SASS & SCSS

SASS

SASS란?

• CSS를 사용하다가, 스타일시트가 점점 커지고 복잡해져 유지 관리하기 어려워질때, 도움 받기위해 사용하는 것
• SASS로 작업 -> CSS 전환 -> 브라우져에서 스타일링 보여주게 됨.

SASS vs SCSS

• SASS : CSS로 컴파일 되거나 해석되는 전처리기(전에 처리한 뒤 컴파일 해서 CSS로 바꿔주는). 포인트는 코드를 css를 해석하는 전처리기+문법
• SCSS : 기존 CSS 구문 위에 구축되는 SASS의 기본 문법. 포인트는 그냥 문법 이라는 것

---

SASS의 특징

• 변수(Variables)
  - 변수 사용하여 재사용 하기 용이

$primary-color: #333;

body {
	color: $primary-color;
}

• 중첩(Nesting)
  - 계층구조를 중첩하여 손쉽게 사용 가능

nav {
	ul {
    	margin: 0;
        padding: 0;
    }
    li {
    	display: inline-block;
    }
}

• 조각들(Partial)
  - CSS의 작은 조각이 포함된 부분 SASS 파일을 만들 수 있음.
  
  
• Modules
  - @use를 사용하여 가져온 스타일시트를 모듈이라고 함.
  - 파일을 사용할 때, 파일 확장자를 포함할 필요가 없음 SASS가 알아서 파악

/// _base.scss 의 경우 아래처럼 scss생략가능
@use 'base';

.inverse {
	color: white;
}

• Mixins
  - 반복해서 작성하는 부분이 있는데, 재사용하려는 CSS 선언 그룹을 만들 수 있음.

	@mixin  theme($theme: DarkGray) {
    	background: $theme;
        box-shadow: 0 0 1px rgba($theme, .25);
        color: #fff;
    }
    .info {
    	@include theme;
    }
    .alert {
    	@include theme;
    }

• Extend
  - @extend를 사용하면 한 선택기에서 다른 선택기로 CSS 속성 집합을 공유할 수 있음. 내용을 보면 Mixin이랑 비슷하지만 차이점을 보면
  
• Extend와 Mixin의 차이점
  - mixin은 소스코드의 중복을 막기 위해 사용하고, extend,%placeholder는 연관성 있는 규칙에 만들기 위해 사용
  - 선택자간의 연관성이 있으면 extend 사용, 연관성이 없지만 코드가 겹치는 선택자들이면 mixin으로 중복 없애기 위해 사용