SASS

 

초기에 프로젝트를 진행하면서 sass라는 것은 들어봤는데 정확히 무엇인지 몰라서 아주 아주 간단하게 정리해보았다.

나는 JS랑 같이 사용할 수 있는 styled component를 선호하긴한다.

---

SASS 사용법

 

vscode extension에서 Live Sass compiler를 설치한다. (5.0.0 버전이상)

그럼 하단에 Watching 또는 Watch Sass라는 글이 뜬다. 

.scss 파일을 만들면 알아서 .css파일로 만들어준다.

(.sass파일로도 만들 수 있는데 안 좋다.)

html에서 link연결은 .css파일로 연결하면 된다.

 

 

---

SASS 기능들

 

1). 값을 저장해놓고 쓰는 '변수' 

 

프로젝트를 진행하면서 공통적으로 사용해야하는 색, 크기와 같은 스타일들을 있는데 이를 변수로 저장해서 사용할 수 있다.

 

/* (test.scss) */

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

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

사칙연산도 가능하다. 

$기본사이즈 : 16px;

.box {
  font-size : $기본사이즈 + 2px;
  width : (100px * 2);
  height : (300px / 3)
}

 

사실 CSS파일에서도 var()를 이용해서 변수를 지정할 수 있지만 지저분하다.

사실 CSS파일에서도 calc()를 이용해서 사칙연산이 가능하지만 지저분하다.

 

2). 셀렉터 대신 쓰는 Nesting

styled component에서도 있는건데 셀렉터를 편하게 쓸 수 있다.

이게 정리하기 편하고 보기에도 좋고 아주 물건이다.

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

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

 

/* .navbar내부의 :hover */
.navbar {
  :hover {
    color : blue;
  }
}

/* .navbar의 :hover만들어 줌 */
.navbar {
  &:hover {
    color : blue;
  }
}

 

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

이미 만들어 놓은 css를 가져오는 것도 있다.

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

.btn-green {
  @extend .btn; /* .btn안의 css를 그대로 가져온다. */
  background : green;
}

 

% 기호를 사용하는 방법도 있는데 컴파일할 때는 %기호안에 있는건 사라진다. (변수설정이랑 비슷한 듯)

여기서 컴파일이란 .scss -> .css 파일로 변환되는 것을 말한다. 

.css 까보면 %btn이 없다.

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

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

 

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

@extend랑 거의 비슷한 기능인데 함수처럼 매개변수, 전달인자를 정할 수 있다.

@mixin으로 만들고 @include로 불러내면된다.

이렇게 하면 손쉽게 동일한 디자인의 버튼을 다른 색상으로 만들 수 있다.

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

.btn-green {
  @include 버튼기본디자인(green);
}
.btn-black {
  @include 버튼기본디자인(black);
  
}.btn-yellow {
  @include 버튼기본디자인(yellow);
}

 

 

5). @use와 언더바 파일

 

import와 비슷하게 다른 scss파일을 불러올 수 있다.

이렇게 아래코드를 적으면 reset.scss파일이 그대로 복붙된다.

@use 'reset.scss';

 

 

작명할 때 파일명 맨 앞에 언더바(_)를 붙이는 경우에는 .css로 컴파일이 되지않는다.

그냥 첨부용

@use '_reset.scss';

 

아니면 _reset.scss파일안의 있는 $변수와 @mixin을 가져다 쓸 수도 있다.

쓸 때는 앞에 파일명을 붙여야한다.

@use '_reset.scss';

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