Sass / Scss

sass는 전처리 언어로 css를 좀 더 쉽고 편리하게 관리할 수 있다고 한다.

(.sass는 중괄호 생략 가능)파일이름.scss로 이름 붙여서 중괄호 붙여 통일성 높이는 게 편해 보인다.

 

1. sass 의 변수 문법

매번 색상을  대입할 순 없으니 변수로 만들어서 기록할 수 있다.

scss
$메인색상 : #2a4c6e;
$서브색상 : #333333;

.text {
  color: $메인색상
}
.box {
  background: $서브색상
}

이런 식으로, $변수이름 : 지정할 것; 이렇게 정한 후, 사용할 때 $변수이름 을 쓰면 된다. (변수이름은 한/영 둘다 가능, 변수로 사칙연산도 가능하지만 px % 단위는 맞추기)

 

2. Nesting 문법

셀렉터가 길어지므로 이렇게 사용할 수 있다.

.text {
  ul {
    width : 100%;
  }
  li {
    color : red;
  }
}
/*위에건 SASS 문법*/

.text ul { 
  width : 100%; 
}
.text li { 
  color : red; 
}
/*밑에건 CSS 문법*/

.navbar {
  &:hover {
    color : blue;
  }
}
/*hover 사용하는 법*/

 

3. 이미 있는 클래스를 확장하는 @extend 문법

.btn {
  font-size : 16px;
  padding : 10px;
  background : grey;
}

.btn-green {
  @extend .btn;
  background : green;
}

이런식으로 쓰면 위의 btn클래스를 복사할 수 있다.

 

4. 코드를 한단어로 축약하는 @mixin

@mixin 버튼기본디자인() {
  font-size : 16px;
  padding : 10px;
}

.btn-red {
  @include 버튼기본디자인();
  background : red;
}

여러줄을 한 단어로 축약해서 함수처럼 사용하고 싶을 때 쓰는 문법이다 사용할 땐 @include 이름()으로 쓴다.

그리고

@mixin 버튼기본디자인($구멍) {
  font-size : 16px;
  padding : 10px;
  background : $구멍;
}

위 처럼, 함수 파라미터로 변수를 뚫어서 쓸 수도 있다. 이러면, 사용할 때 @include 버튼기본디자인(#234224) 이렇게 사용하면 된다.

 

5. @use와 언더바 파일

reset파일과 같이 자주 사용하는 파일은

@use 'reset.scss';

이처럼 쓸 수 있다. 

가끔가다

@use '_reset.scss';

파일 이름 앞에 _이 쓰여있는 파일은 따로 컴파일하지 않고 첨부만 했어요 하는 파일을 의미한다.

@use로 불러온 파일에 있던 $변수와 @mixin도 가져다 쓸 수 있는데,

reset.$변수명;  /* 다른 파일의 변수쓰는법 */
@include reset.mixin의이름();  /* 다른 파일의 mixin쓰는법 */

 

 

이렇게 변수와 mixin앞에 파일명을 붙이면 된다.