Sass

  • CSS의 단점을 보완하기 위해 만든 CSS 전처리기
  • Sass 파일은 SCSS이다.
  • Node.js의 Sass가 SCSS를 읽어서 CSS로 변환해준다.
  • 또는 VSCode의 익스텐션을 이용하여 변환(컴파일)할 수도 있다.
  • CSS와 다르게 틀린 부분을 에러로 띄워준다.

    • 💫 Import

  • 다른 SCSS 파일을 가져와서 Import할 수 있다. CSS 파일도 가능하다.
  • 부분파일의 이름은 보통 언더바(_)를 앞에 붙여준다.
  • 언더바(_)는 따로 적어주지 않아도 인식한다.
  • 예시) 파일이름: _reset.scss, _nav.scss, _section.scss
    • // RESET
    @import "reset";
    

    // COMMON
    @import "nav";
    @import "section";
  • SCSS의 각주는 자바스크립트처럼 // 로 사용할 수 있다.

    • 🐣 Nesting

  • 선택자 안에 하위 요소로 선택자를 넣는 문법이 가능하다.
    • body {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    

    	ul,
    	ol {
    	  list-style: none;
    	}
    }

    & 선택자 활용 (자기 자신 선택자)

  • 공통 특성을 가진 modifier 생산 가능
    • .btn {
    width: 100px;
    height: 30px;
    background-color: orange;
    border-radius: 10px;
    line-height: 30px;
    	&--small {
            width: 50px;
    	}
      &--large {
            width: 200px;
    	}
      &--red {
            background-color: red;
    	}
    }
  • hover와 같은 선택자는 해당 요소 안에서 다음과 같이 표현한다.
    • &:hover {
          background-color: orange;
    }
    &::after {
          content: "!!";
    }
  • hover와 그에 따른 효과를 받는 선택자가 다를 때는 다음과 같이 표현한다. (.wrap에 hover하면 .item이 transform)
    • .wrap {
      &:hover {
        .item {
          transform: translateY(0px) rotateY(0deg);
          opacity: 1;
        }
      }

    🍭 변수 ($)

  • 색상이나 속성 값을 변수로 지정해두고 사용할 수 있다.
    • $body-bg: #eee;
    $wrap-border: #ddd;
    $wrap__item: #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);
    

    body {
    	background-color: $body-bg;
    }

    🪷 @mixin

  • JS의 객체처럼 속성 값들을 저장하여 사용할 수 있다.
    • @mixin button() {
      display: block;
      width: 100px;
      height: 30px;
      border-radius: 15px;
      background-color: #555;
      color: white;
      text-align: center;
      font: bold 16px/30px "arial";
      margin: auto;
      margin-top: 20px;
    }
    @import "mixin";
    

    a {
    	@include button();
    }
  • 다음처럼 매개변수도 지정할 수 있으며, 그 디폴트 값도 지정 가능하다.
    • @mixin button($width: 100%, $bg-color: grey, $font-color: white) {
      display: block;
      width: $width;
      height: 30px;
      border-radius: 15px;
      background-color: $bg-color;
      color: $font-color;
      text-align: center;
      font: bold 16px/30px "arial";
      margin: auto;
      margin-top: 20px;
    }
    @import "mixin";
    

    a {
    	@include button(100%, orange, black);
    }
  • 협업 시에는 각각의 매개변수 자리가 어떤 값을 뜻하는지 알아보기 쉽게 하기 위해서 다음처럼 작성한다.
  • 매개변수 자리에는 물론 변수도 들어갈 수 있다.
    • @import "mixin";
    

    $btn-bg: #333;
    

    a {
    	@include button($width: 100%, $bg-color: $btn-bg, $font-color: black);
    }

    🎍 @for

  • SCSS에서는 for문도 사용할 수 있다.
  • to와 through로 사용할 수 있다.
  • 숫자는 #{} 안에 $를 사용하여 변수를 입력하여야 한다.
  • 1 to 5는 1이상 5미만을 의미한다.
    • @for $i from 1 to 5 { 
    	&:nth-child(#{$i}) {
        transition-delay: 0.2s * $i;
      }
    }
  • 1 through 5는 1이상 5이하를 의미한다.
  • 아래처럼 변수를 사용할 수도 있다.
    • $interval: 0.2s;
    

    @for $i from 1 through 5 { 
    	&:nth-child(#{$i}) {
    		trasition-delay: $interval * $i;
    	}
    }

    🌺 @each

  • JS 배열의 forEach와 유사하다.
  • SCSS에서도 배열을 선언할 수 있다.
    • $bgColors: (orange, hotpink, aqua, lightgreen);
  • index() 메소드가 존재하여 이를 통해 index 값을 구할 수 있다.
    • @each $el in $bgColors {
      $index: index($bgColors, $el);
      &:nth-child(#{$index}) {
    		a {
    			@include button($bg-color: $el);
    		} 
    	}
    }

    🌗 @if

  • if문을 활용하면 배경색에 따라 글자색을 바꾸어 다크모드 / 라이트모드를 만들 수 있다.
    • @if $wrap__item == #fff {
      color: black;
    } @else { 
    	color: white;
    }
  • else if 문도 가능하다.