[CSS] SCSS

 

SCSS (Syntactically Awesome StyleSheet)

---

CSS를 편리하게 사용할 수 있도록 하는 전처리기로 CSS의 기능 부재 단점을 보완하여 다양한 기능이 추가되었다.

CSS를 구조화하여 표현해주고 가독성과 재사용성을 높여 유지보수가 쉬워지게 도와준다. 

 

특징

 

• 변수 할당

  $font - stack : sans - serif;
  
  body {
  	font : 100% $font-stack;
  	...
  }
  

  $를 사용하여 자주 사용하는 폰트나 색상 등을 변수로 지정하여 재사용 가능

 

• 전역 변수

  .box1 {
  	$color : #FFFFFF !global;
  	backgound : $color;
  }
  
  .box2 {
  	background : $color;
  }
  

  !global 을 사용하면 변수의 유효범위를 전역으로 설정 가능

 

• 중첩 구문 중첩기능을 통해 높은 가독성을 가짐
• body { ul { ... } li { ... } p { ... } }

 

• 상위 선택자 참조

  .btn {
  	&.active {
  		color : red;	
  	}
  }
  
  ol{
  	li {
  		&.last-child { ... }
  	}
  }
  

  중첩 안에서 &를 사용하여 상위(부모) 선택자를 참조하여 치환함

 

• 중첩 벗어나기

  .list{
  	li {...}
  	@at-root .box {
  	}
  }
  

  중첩 안에서 생성하되 중첩에서 벗어나고 싶을 때 @at-root 사용

 

• 모듈화

  @use 'base';
  

  @use 를 사용하여 파일을 분할하고 모듈화 할 수 있음

 

• 믹스인

  @mixin theme($theme : darkgrey) {
  	...
  }
  .mini_theme {
  	@include theme;
  }
  

  함수처럼 default 매개변수를 지정할 수 있고 매개변수를 통한 속성 값 변경 가능함

• 확장, 상속

  %theme {
  	...
  }
  
  .mini_theme {
  	@extend %theme;
  	color : red;
  }
  

  @extent를 사용하여 속성 집합을 상속받을 수 있음

 

• 연산자

  div {
  	width : math.div(600px, 960px) * 100%;
  }
  

  Math메소드의 수학적 기능 사용 가능