Sass는 CSS의 전처리기 입니다.

웹은 CSS 만 읽을 수 있기 때문에 더욱 편해진 문법을 사용해서 작성한 SCSS 파일을 전처리하여 CSS 파일로 컴파일 시켜주게 됩니다

• sass 는 모든 버전의 css와 호환
• sass 는 css로 컴파일 되는 스타일 시트 언어
• 변수, 중첩, 믹스인, 함수 등을 사용 가능
• scss는 sass3버전에서 생겨났으며, sass를 더욱 css와 유사하게 사용 할 수 있도록 나왔습니다.
  sass는 중첩을 표현 할 때, 들여쓰기를 사용하고, 속성 구분을 위해 줄바꿈을 사용하지만,
  scss는 중첩을 표현 할 때, 중괄호를 사용하고, 속성 구분을 위해 세미콜론을 사용

SASS 와 SCSS 의 차이

SASS

nav
  ul // 중첩을 위해 들여쓰기
    margin: 0 // 속성구분은 줄바꿈
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none

SCSS

nav { // 중첩을 위해 중괄호로 감쌈
  ul {
    margin: 0; // 속성 구분을 위해 세미콜론 사용
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

CSS 보다 편리한점

1. Nesting (중첩)

   CSS

   // nav 안에 있는 요소들에 적용하려면 나열을 해줘야 됨
   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;
     }
   
     li { display: inline-block; }
   
     a {
       display: block;
       padding: 6px 12px;
       text-decoration: none;
     }
   }

2. 선택기 목록 (콤마로 구분된 셀렉터는 따로따로 중첩됩니다)

   CSS

   .alert ul, .alert p, .warning ul, .warning p {
     margin-right: 0;
     margin-left: 0;
     padding-bottom: 0;
   }

   SCSS

   // 콤마로 구분되서 위의 css 코드와 동일하게 따로따로 중첩 됨
   .alert, .warning {
     ul, p {
       margin-right: 0;
       margin-left: 0;
       padding-bottom: 0;
     }
   }

3. 선택기 연산자

   CSS

   // 부모 ul 태그 아래 있는 li 태그
   ul > li { 
     list-style-type: none;
   }
   
   // h2 태그 다음에 있는 p 태그
   h2 + p {
     border-top: 1px solid gray;
   }
   
   // p 태그 다음에 있는 모든 span 태그
   p ~ span {
     opacity: 0.8;
   }

   참고 > 연산자 ,+ 연산자 ,~ 연산자

   SCSS (연산자 위치가 외부 셀렉터 뒤에와도 되고, 내부 셀렉터 앞에와도 되고, 연산자 단독으로 사용해도 됨)

   ul > { // 외부 셀렉터 다음에 연산자를 사용
     li {
       list-style-type: none;
     }
   }
   
   h2 {
     + p { // 내부 셀렉터 앞에 연산자 사용
       border-top: 1px solid gray;
     }
   }
   
   p {
     ~ { // 내외부 셀렉터 사이에서 단독으로 연산자를 사용해서 묶어줌
       span {
         opacity: 0.8;
       }
     }
   }

4. #{}을 사용하여 동적인 값 전달 가능 (mixin을 사용 할 때 유리함)

   CSS

   @charset "UTF-8";
   // 이모지는 여러가지가 있기 때문에 동적으로 전달하면 효과적으로 사용할 수 있음
   span.emoji-women-holding-hands {
     font-family: IconFont;
     font-variant: normal;
     font-weight: normal;
     content: "👭";
   }

   SCSS

   @mixin define-emoji($name, $glyph) { // 이렇게 동적으로 값을 넣어줄수 있도록 mixin 선언
     span.emoji-#{$name} { // 보간(#{})을 이용하여 동적인 값을 이어서 넣어줌
       font-family: IconFont;
       font-variant: normal;
       font-weight: normal;
       content: $glyph;
     }
   }
   
   @include define-emoji("women-holding-hands", "👭"); // 사용하는 곳에서 동적으로 이모지를 넣어줄 수 있음

mixin

mixin은 반복되는 스타일을 지정 하기도 하고,
동적인 값을 넣어줄때도 사용 가능

• @mixin 으로 선언 해주고
• @include 로 사용
• mixin 중첩도 가능

@mixin reset-list { // mixin 선언
  margin: 0;
  padding: 0;
  list-style: none;
}

@mixin horizontal-list {
  @include reset-list; // 위에서 선언한 mixin도 사용 가능

  li {
    display: inline-block;
    margin: {
      left: -2px;
      right: 2em;
    }
  }
}

nav ul {
  @include horizontal-list; // @include를 이용해서 사용
}

보통 mixin 파일을 따로 만들어서 관리하고, mixin 이 모아져 있는 파일을 import 시켜서 사용합니다.
import 하는 방법은
@use 를 사용해서 import 시켜줍니다.

@use "파일명";

.className {
	@include 파일명.믹신이름
}

@import 를 사용해서 import 시킬수 있지만 @use 사용을 권장

// 공식문서 내용
The Sass team discourages the continued use of the 
@import rule. Sass will gradually phase it out 
over the next few years, and eventually remove it 
from the language entirely. Prefer the @use rule 
instead. (Note that only Dart Sass currently 
supports @use. Users of other implementations must 
use the @import rule instead.)

@import를 사용하면 전역적으로 가져오기 때문에 없앨 예정이라고 함

참고

SASS: https://sass-lang.com/
연산자: https://www.w3schools.com/cssref/css_selectors.php