Sass 간단 요약

1. Sass

1) Sass란?

• CSS의 한계나 단점을 보완하기 위해 만들어진 CSS 확장 언어이며 CSS 전처리기의 하나

  • CSS 전처리기(Preprocessor): Pre(=전) 말그대로 CSS가 동작하기 전에 작동한다.
  • 스타일시트가 점점 더 커지고 복잡해져 유지관리가 어려워지고 있음 => Sass의 여러가지 기능을 통해 유지관리를 쉽고 빠르게 할 수 있음

• 브라우저가 Sass 파일을 직접 읽지 못하기 때문에 일반 CSS로 컴파일 해야함

2) Sass 기술 방법 2가지

• .sass 방식과 .scss 방식이 있음(일반적으로 CSS와 좀 더 유사한 .scss를 더 많이 씀)

  • .sass 방식

    $font-stack: Helvetica, sans-serif
    $primary-color: #333
    
    body
      font: 100% $font-stack
      color: $primary-color
    

  • .scss 방식

    $font-stack: Helvetica, sans-serif;
    $primary-color: #333;
    
    body {
      font: 100% $font-stack;
      color: $primary-color;
    }

2. Sass 기본문법

1) 중첩(Nesting)

• Sass는 HTML과 같은 방식으로 CSS 선택자를 중첩할 수 있음

• 중첩을 하면 좋은점? => 중첩을 사용하면, 최상위 선택자를 한번만 선언해도 되어서 코드 반복을 줄일 수 있다.

  • 일반 CSS구문

       nav ul {
         margin: 0;
         padding: 0;
         list-style: none;
       }
       nav li {
         display: inline-block;
       }
       nav a {
         display: block;
         padding: 6px 12px;
         text-decoration: none;
       }

  • SCSS구문

     nav ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      nav li {
        display: inline-block;
      }
      nav a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
      }

• 지나친 중첩 코드 삼가 => 불필요한 선택자를 사용하게 될 수도있기 때문

2) 변수

• 변수를 사용하면 값을 일일이 고치지 않아도 되어서 유지보수를 매우 쉽게 만들 수 있음

• 변수생성하는 법: $ 기호를 사용하여 스타일을 적용할 값을 저장

  $bgColor: #FFF;
      
   body {
     background-color: $bgColor;
   }

• lists:

  $font-size : 10px 12px 16px; //폰트사이즈 리스트
  
  .test1 {
     font-size: nth($font-size, 2); // 12px
   }
  

• maps

  $font-weights: ("regular": 400, "medium": 500, "bold": 700); //글자 굵기 리스트
  
  .test1 {
     font-weight: map-get($font-weights, "medium"); // 500
  }

3) Mixin

• 코드 재사용을 위해 만들어진 기능

• 사용법: @mixin을 쓰고 이름을 정해준 후, 중괄호 {}안에 중복되는 코드를 넣어줌, @include를 사용하여 스타일 하고자하는 요소에 포함시킴.

    @mixin center-xy {
      display: flex;
      justify-items: center;
      align-items: center;
     }
  
    .box{
     	 @include center-xy;
       background: orange;
     }

• 전달인자 있는 mixin

     @mixin center-xy($w, $y) {
        width: $w;
        height: $y;
        display: flex;
        justify-items: center;
        align-items: center;
     }
  
     .box{
         @include center-xy(200px, 300px);
         background: orange;
      }