[SCSS] SCSS 사용하기

SCSS란?

 SASS를 더 편리하게 수정한 버전. 확장자는 .scss 사용하며, 브라우저에서 SASS구문을 이해하지 못하기 때문에 컴파일하는 작업이 필요하다. 

 

설치하기

npm install -g node-sass

//에러나면 아래껄로 하기
sudo npm install --unsafe-perm -g node-sass

설치 후 파일확장자명을 .scss로 사용한다.

유용한 플러그인

 

Live Sass Compiler 

Sass와 SCSS를 컴파일 작업을 하지 않아도 실시간으로 확인이 가능, 문법오류 체크를 해줌

 

 

---

 

주요기능

중첩

//SCSS
.section {
  width: 100%;
  .list {
    padding: 20px;
    li {
      float: left;
    }
  }
}

//컴파일 후 
.section {
  width: 100%;
}
.section .list {
  padding: 20px;
}
.section .list li {
  float: left;
}

 

변수 : $를 사용하여 변수를 지정할 수 있다.

$btnClolr: blue;
$border: 1px solid red;

 

import : @import './경로/파일명.scss'를 사용해 다른 css파일을 불러올 수 있다.

• 예) 변수만 모아둔 scss파일, 로그인컴포넌트의 scss 등
• 만약 파일명 앞에 _언더스코어 를 사용하면 css로 컴파일 하지 않는다(HTML에서 링크할일 없는 경우는 _사용)

mixin & include

• js에서 함수 선언하듯 mixin으로 선언하고, 인자전달 & 기본값 설정까지 가능
• 선언하기(@mixin)와 포함하기(@include)

//@mixin로 스타일 정의하기
@mixin large-text {
  font-size: 22px;
  font-weight: bold;
  font-family: sans-serif;
  color: orange;
}

//@include로 사용하기
h1 {
  @include large-text;
}

extend : 값을 상속받아 사용가능, 중첩되는 속성은 자식의 값으로 덮어쓰기 된다.

+ - / * % == != 연산 가능 (주의 +, - 연산할 경우 단위를 통일)

- 연산은 변수 값에 가능    

$input-wrap-width: 100% - 10px;
$input-wrap-height: 100px / 50px * 20%;

내장함수 사용가능

• : 임의 함수 지정해 사용할 수 있다. @return을 통해 값을 반환한다. 자주 사용하는 것은 함수를 만들어 사용하길 추천!

---