Sass (1) - 정의, 변수, 연산자, 내장함수, 중첩

Sass란?

=> Synthetically Awesome Style Sheet (문법적으로 짱 멋진 스타일 시트)
css의 전처리기로서, css 코드의 재활용성을 높일 뿐 아니라 가독성을 높여준다.
덕분에 유지보수를 쉽게 할 수 있게 된다.
컴파일을 통하여 sass/scss 파일이 css 형태로 바뀌게 된다.

node-sass 사용

=> 빠른 컴파일 속도와, Node.js 환경에서 작업할 때 libsass를 사용할 수 있게 해준다

# NPM 을 통하여 node-sass 글로벌 설치
$ sudo npm install -g node-sass

# 컴파일하여 현재 디렉토리에 저장
$ node-sass style.scss -o .

# style.scss 파일에 변화가 있을 떄 마다 자동으로 리컴파일
$ node-sass style.scss -w -o .

.

SASS vs SCSS

=> 처음엔 Sass가 릴리즈되었다. 주요 문법이 CSS와 달라서, 괄호 대신 인덴트를 사용한다거나
혹은 ; 대신 단축 연산자를 사용하였다.
scss는 css의 상위집합으로서, css와 동일한 문법으로 sass의 기능들을 사용할 수 있게 됐다.

1. Variable

$ 문자를 사용하여 변수 개념을 사용할 수 있다!
Sass

/* define primary colors */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;

/* use the variables */
.main-header {
  background-color: $primary_1; // here you can put an inline comment
}

CSS

.main-header {
  background-color: #a2b9bc;
}

2. Math Operators

Sass에서는 수학 연산자를 사용할 수 있다.
+, -, /, *, %, ==, != 등을 단위를 통일시켜 적용하면 된다.

3. Built-in Functions

모든 내장 함수는 여기에서 확인 가능하다.

• darken() : 특정 색깔과, 얼마나 어둡게 할 지 인수로 주면 자동으로 색상을 계산해서 나타내준다.
  번거롭게 컬러 팔레트를 뒤져가면서 어떤 색이 좋을지 찾을 필요 없다!
  예를 들어, 어떤 버튼의 기본색에 대하여 hover 시에 얼마나 10% 정도 더 어둡게 만들고 싶다면?

  $buttonColor: #2ecc71;
  $buttonDark: darken($buttonColor, 10%);
  button {
  background: $buttonColor;
  box-shadow: 0px 5px 0px $buttonDark;
  }
  

4. Nesting

Sass의 유용한 기능 중 하나로 선언에 대한 중첩을 꼽을 수 있다.
괄호와 인덴트만 섞으면 간편하게 중첩을 만들 수 있다.

.container {
    width: 100%;
    h1 {
        color: red;
    }
}

그렇다면, 중첩을 벗어나려면(de-nest)???
예를 들어, 어떤 클래스 sibling이 다른 클래스 내부에 있기도 하지만, 클래스 외부에서도 사용된다는 것을 알게 되었다!
=> @at-root 지시자를 사용한다.

.container {
  .child {
    color: blue;
  }
  @at-root .sibling {
    color: gray;
  }
}