KDT 5th 웹개발자 입문 수업 18일차 - 2

1. Sass

 

2. SCSS

CSS 에 if/for문/중첩 등이 가능한 것

 

• Window의 경우
• node.js 설치 https://nodejs.org/ko/

Node.js

 

• Mac의 경우, brew install node.js 로 설치

설치되어있는지 확인은 node -v 입력 시 버전이 나오면 깔린 것

 

 

2-1. npx 로 직접 watch 하기

 

2-1-1 .scss 파일을 생성하여 작성 후,

2-1-2. npx sass --watch SCSS명.scss CSS명.css

npx에게 sass를 사용하여 scss파일을 css파일로 변경해주는 명령어로, scss 파일을 watch(보고있다가) 파일이 변경되면 css에 바로 적용시켜준다.

 

그러면

이렇게 css파일과 css.map 파일이 생긴다.

scss의 파일의 모든 정보를 가지고 있는건 map 파일로, 협업을 위해선 CR/LF 차이 때문에 꼭 git ignore을 해줘야 한다.

 

watch 하고 있기에 변경이 생길 때마다 자동으로 scss에 변경이 생길 때마다 css에도 변경이 생긴다. (변경이 될 때마다 터미널에 기록이 남는다)

 

 

 

2-2. VSCode 확장 [ Live Sass Compiler ] 사용하기

아래 상태표시창에서 Watch Sass를 누르면 자동으로 css 파일이 생기고, Watching 중인지 알 수 있다.

 

 

2-3. Scss 파일 간 import 하기

파일명 앞에 부분 파일을 나타내는 _를 사용하여 저장해준다 (Scss의 암묵적 약속으로 _를 사용하면 내부 파일?이라는 의미)

 

@import 'path/filename' 형식으로 다른 Scss 파일을 읽어올 수 있다. 자동적으로 CSS로 변환해줄 때 import로 이어준 파일도 같이 적용된다.

 

@import '' 확장자 없이 파일명만 치면, 자동으로 scss나 sass를 의미 (물론 css도 가져올 수 있음)

 

 

2-4. Nesting

{ } 안에 자식 요소를 사용하여 요소간의 상하관계를 편하게 작성 가능

.wrap {
  display: flex;
  background-color: #eee;
  width: 100%;
  padding: 100px;
  border: 2px solid #ddd;
}
.wrap .item {
  background-color: #fff;
  width: 300px;
  padding: 40px 20px;
  margin: 0 20px;
  border-radius: 30px;
  box-shadow: 5px 5px 20px #ccc;
}
.wrap .item h2 {
  font: bold 30px/1 "arial";
  margin-bottom: 20px;
  color: #333;
}
.wrap .item p {
  font: normal 16px/1.5 "arial";
  color: #7b7b7b;
}
.wrap .item a {
  width: 80px;
  height: 30px;
  background-color: #555;
  color: white;
  display: inline-block;
  text-align: center;
  border-radius: 13px;
  font: bold 16px/30px "arial";
  margin-top: 10px;
  transition: 0.4s;
  border: 1px solid #333;
}
.wrap .item a:hover {
  background-color: white;
  color: #333;
}

//SCSS

.wrap {
  display: flex;
  background-color: #eee;
  width: 100%;
  padding: 100px;
  border: 2px solid #ddd;

  .item {
    background-color: #fff;
    width: 300px;
    padding: 40px 20px;
    margin: 0 20px;
  
    border-radius: 30px;
    box-shadow: 5px 5px 20px #ccc;

    h2 {
      font: bold 30px/1 'arial';
      margin-bottom: 20px;
      color: #333;
    }
    p {
      font : normal 16px/1.5 'arial';
      color : #7b7b7b;
    }

    a {
      width: 80px;
      height: 30px;
      background-color: #555;
      color: white;
      display: inline-block;
      text-align: center;
      border-radius: 13px;
      font: bold 16px/30px 'arial';
      margin-top: 10px;
      transition: .4s;
      border:1px solid #333;

      &:hover {
        background-color: white;
        color: #333;
      }
    }
  }
}

 

2-5. & 자기 자신 선택자

{ } 내부에 &를 쓰고 가상 클래스 선택자를 연동시켜주면 된다. (ex. &:hover { } )

 

치환 특성을 활용하여 공통 특성을 가진 modifier

&--small / &--large ... 같이

 

 

2-6. 변수 :  $

보통 최상단에 미리 변수를 표기

BEM과 같이 사용하는 것이 좋음

// 변수
$body-bg : #eee;
$wrap-border : #ddd;
$wrap__item-bg : #fff;
$wrap__item_h2 : #333;
$wrap__item_p : #777;
$btn-bg : orange;
$btn-font: white;
$wrap__item-shadow : 5px 5px 20px rgba(0, 0, 0, 0.1);

모든 속성값을 변수에 저장이 가능함.

변수를 사용할 때도 $변수명 으로 사용해주면 된다.

 

 

2-7. mixin

새로운 scss 파일로 중복되는 내용을 @mixin 믹스인명() { } 으로 저장해둔다.

 

@mixin button() {
  width: 80px;
  height: 30px;
  background-color: $btn-bg;
  color: $btn-font;
  display: inline-block;
  text-align: center;
  border-radius: 13px;
  font: bold 16px/30px 'arial';
  margin-top: 10px;
  transition: .4s;
  border:1px solid $wrap-border;
}

사용하기 위해선, 우선 @import '저장해둔믹스인파일'; 로 가져온다음, 사용할 장소에 @include 믹스인명() ; 으로 사용해주면 된다!

a {
      // width: 80px;
      // height: 30px;
      // background-color: $btn-bg;
      // color: $btn-font;
      // display: inline-block;
      // text-align: center;
      // border-radius: 13px;
      // font: bold 16px/30px 'arial';
      // margin-top: 10px;
      // transition: .4s;
      // border:1px solid $wrap-border;
      @include button();

      &:hover {
        background-color: $wrap__item-bg;
        color: $wrap__item_h2;
      }
    }

 

mixin은 함수처럼 매개변수를 넣어 재사용이 가능하다! (기본값 설정도 가능)

@mixin button($width: 80px, $bg-color : gray, $font-color:white) {
  width: $width;
  height: 30px;
  background-color: $bg-color;
  color: $font-color;
  display: inline-block;
  text-align: center;
  border-radius: 13px;
  font: bold 16px/30px 'arial';
  margin-top: 10px;
  transition: .4s;
  border:1px solid $wrap-border;
}

// .......

a {
      @include button(80px, $btn-bg, $btn-font);

      &:hover {
        background-color: $wrap__item-bg;
        color: $wrap__item_h2;
      }
    }

 

 

2-8. SCSS는 구문이 틀리면 어디서 틀렸는지 알려주는 기능도 있다

믹스인 매개변수에 기본값을 뺐더니 나오는 에러 사항

 

 

2-9. 협업 시 mixin 사용에선, 제 3자가 매개변수의 의미를 찾아보기 어렵기 때문에 해당 매개변수 이름을 명시하여 알려주는 것이 좋다.

@include button($width : 80px, $bg-color : $btn-bg, $font-color : $btn-font);

 

 

2-10. SCSS의 반복문 @for

@for $i from 시작숫자 to 끝숫자 { } -> 시작숫자부터 끝숫자-1 까지 반복한다.

    // &:first-child {
    //   transition-delay: .1s;
    // }
    // &:nth-child(2) {
    //   transition-delay: .2s;
    // }
    // &:nth-child(3) {
    //   transition-delay: .3s;
    // }
    // &:last-child {
    //   transition-delay: .4s;
    // }
    
    
    /// 위의 코드를 @for문으로 작성
    $interval : 0.2s;
    @for $i from 1 to 5 {
      &:nth-child(#{$i}) {
        transition-delay: $interval * $i;
      }
    }

 

숫자는 #{ } 안에 $를 사용하는 변수를 써야 한다! ex. #{$i} 

from 시작인덱스 to 끝인덱스 -> 시작인덱스부터 끝인덱스-1 까지 반복

from 시작인덱스 through 끝인덱스 -> 시작인덱스부터 끝인덱스까지 반복

 

 

2-11. @each

forEach(JS)와 유사함

 

*SCSS에서 배열은 ( )를 사용한다.

    $bgColors : (orange, black, hotpink, aqua, lightgreen);
    @each $el in $bgColors {
      $index : index($list: $bgColors, $value:$el);
      &:nth-child(#{$index}) {
        a {
          @include button($bg-color : $el);
        }
      }
    }

@each $변수 in $배열명 {

  $index : index($list, $value); 로 index()함수로 인덱스를 가져올 수 있다.

  //로직

}

 

 

2-12. @if

특정 조건에 따라서 속성을 변경하고 싶을 때 사용

@if 조건 { }

@else { }

 

===는 안되고 ==만 가능함

 

 

✚ font 속기 사용하기  font : weight(굵기) size(크기)/line-height(행간) family(폰트종류); 순서로 사용해준다.

 

 

✚. npm (node package Manager) vs npx (node Package excute)