SCSS(SASS) 간단 사용법

1. SCSS(SASS)란?

css의 전처리기. css를 보다 효율적으로 작성할 수 있게 문법이 개선된 방법으로, 작성 후 css로의 변환이 필요함

1.1. css로 변환

• nodejs의 sass패키지 이용
  • npm install -g sass
  • sass [target] [source]
    • 예시 : sass -w style.css scss/style.scss
    • -w 옵션을 통해 소스파일의 변화를 감지해서 실시간 변환 가능
• gulp 등의 taskrunner를 통해 자동화 가능

대략적인 구조

2. 문법

• 기본적인 문법은 css와 동일하고 추가적인 문법 존재

2.1. nesting

• 부모자식 관계에 따라 nesting이 가능
• nest 안에서 &로 nesting하고 있는 셀렉터를 치환 가능
• &로 치환되는 셀렉터는 문자만 치환되기 때문에 뒤에 바로 문자를 덧붙일 수 있음

.btn {
    width: 200px;
    height: 60px;
    border-radius: 30px;
    
    &Blue {			// .btnBlue
      background-color: blue;
    }
    
    &Red {			// .btnRed
      background-color: red;
    }
}

• 속성도 nesting 가능

nav {
  margin: {
    top: 20px;
    left: 50px;
  }

  border: {
    color: darkslategray;
    radious: 50%;
    style: dashed;
  }
  
  font: {
    size: 12px;
    color: purple;
    faimily: 'Courier New', Courier, monospace; 
  }
}

2.2. 변수 설정

• $변수이름 으로 자주쓰이는 값을 변수로 사용가능
• 변수들만 모아두는 scss파일을 따로 만들어서 사용할 수도 있음

2.3. mixin

• 인자로 값을 받아서 재사용할 수 있는 스타일
• 매개변수 뒤 콜론으로 기본값 설정 가능
• 사용은 @include를 이용

2.4. use

• css의 import와 비슷하게 다른 scss파일을 불러올 수 있음
• 모듈 시스템과 동일하게 동작, 컴파일 중 단 한번만 import됨
• 변수나 함수 사용 시 네임스페이스를 명시해야하므로 어디서 가져온 요소인지 알 수 있음
• underscore(_)나 hyphen(-)을 이용하면 private member를 만들 수 있음

2.5 기타

• scss파일 이름의 맨 앞에 underscore(_)를 주면 css로 컴파일하지 않겠다는 의미(모듈로만 사용)

변수 파일

변수파일 활용