[CSS/Side Lib.] SASS, SCSS

오늘은 React-router 와 SASS 세션이 진행되었다. SASS를 처음 접하다보니, 구글링을 병행하면서 별도 포스팅을 진행하겠다.

---

🧑‍💻 Session : Sass

- Sass 란?

Sass(Syntactically Awesome style sheets)는 CSS Pre-Processor(전처리기, 스크립트 확장 언어) 라고 정의한다.

Sass에서 추가적인 기능들을 구현한 뒤, 컴파일러가 브라우저에서 인식하는 CSS 언어로 전환해준다. (파일 확장자는 .css -> .scss)

• 스타일들의 네스팅을 통해 불필요한 클래스명을 줄임으로서 복잡한 코드를 간결하게 만들고, 코드 가독성을 높인다.
• 속성과 값에 대한 변수 저장을 통해 코드의 재활용으로 효율적인 마크업이 가능하다.

* CSS 전처리기 3대장 : Sass / Less / Stylus

• Less : 진입장벽이 낮아 사용이 편하다 / 구비되지 않은 기능들의 한계가 존재
• Stylus : 깔끔하고 세련되며 다양한 기능 지원 / 비교적 최근에 출시되어, 범용성이 적으며 컴파일 후 일부 버그가 잔재
• Sass : 둘 장단점을 충족. Sass(새로운 문법)가 Stylus, SCSS(CSS 직관적 문법)는 Less와 유사하며, 하나의 컴파일러로 컴파일 가능.

* 설치

npm install node-sass --save
// v^4.0.0 과 v^5.0.0 선택적 사용

  -> node-sass 는 Node.js 컴파일러인 LibSass에 바인딩한 라이브러리이다. Sass, SCSS가 브라우저에 적용되도록 돕는 툴.

 

 

- Sass 주요 기능

0. Comment(주석)

/* show */
// no-show

/* show
   show
   show
*/

// 한 줄 주석이 추가되었다. 이는 CSS로 컴파일되면 보이지 않는다.

 

1. Variable(변수) : CSS에 변수개념을 도입해준다. $구문으로 선언하며 숫자, 문자열, 폰트, 색상, Null, Array 등 저장

$theme-color : #3b20f1;

main {
  background-color: $theme-color;
}

• 이 변수에도 Scope 개념이 적용된다. 즉, 선택자 내에서 선언한 변수는 그 안에서만 사용 가능하다.
• 지역변수를 전역변수로 사용하려면 값 우측에 !global 플래그를 사용한다. { $theme-color: #333 !global; }
• 해당 변수의 기본값을 설정하려면 !default 플래그를 사용한다. 변수값이 없거나 null 일 때 대체 { $theme-color: #eee !default } 

2. Operators(연산자) : 다른 언어들처럼 수학 연산자들을 지원한다.

Operator	Description
+	addition
-	subtraction
/	division
*	multiplication
%	modulo
==	equality
!=	inequality

* 주의할 점은, +, - 연산자 사용 시에는 단위를 통일 시켜야 한다. { width: 100% - 20px } 은 오류가 발생하며, CSS calc() 함수로 대체

  곱셈과 나눗셈은 상관없이 작동한다. { width: 300px / 960px * 100% }

 

3. Built-in Functions(내장함수) : 다양한 기능을 지원하는 내장함수를 지원

// darken(색상, 비율) : 해당 '색상'에서 '비율'만큼 어두워진 색상값을 반환 

$buttonColor: #2ecc71;
$buttonDark: darken($buttonColor, 10%);

Sass-lang (Built-in Modules) : https://sass-lang.com/documentation/modules

 

4. Nesting(중첩)

// .css
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}


// .scss
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
      li {
        display: inline-block;
      }
  }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

 

1) & : 부모 선택자를 리퍼런스하는 선택자

button {
  width: 200px;
  height: 100px;
  background-color: $theme-color;
  &:hover {
    background-color: red;
    cursor: pointer;
  }
}

 

2) @at-root : 해당 선택자를 네스팅 밖으로 배출시켜준다. 일반적으론, @at-root 선택자보단 선택자 자체를 밖에 작성한다.

.header {
  .child {
    color: blue;
  }
  @at-root .sibling {			// .sibling 이 다른 구역에서도 사용!
    color: gray;
  }
}

 

5. Import(불러오기) : 다른 SCSS 파일을 불러올 수 있다. (.scss 확장자가 없어도 정상적용) @import 구문으로 불러옴

@import "layout.css";
@import "layout";

  * Partial : .sass, .scss 파일 이름이 underscore('_') 로 시작하면, 컴파일링에서 제외된다. 대신 import는 동일하게 가능.

 

6. Extend(상속) : 특정 상속자 기능의 모음에 상속시킬 때 @extend 선택자를 사용한다.

%flex-center {
  display: flex;
  justify-content: center;
  align-items: center
}

login-container {
  @extend flex-center;
}

  * %(Placeholder) : 해당 선택자를 사용하면 상속은 정상적으로 이루어지나, 그 선택자는 컴파일에 제외된다. (효율성 향상)

 

7. Mixin(믹스인) : Extend 와 유사한 기능이나, argument(인자)를 받아 함수처럼 동작할 수 있다.

@mixin [믹스인명] ($변수1, $변수2..) 구문으로 지정, @include [믹스인명] (변수값1, 변수값2...) 선택자로 적용

@mixin headline ($color, $size) {
  color: $color;
  font-size: $size;
}

h1 {
  @include headline(green, 12px);
}

 

8. Function(함수) : 내장함수와는 달리 임의의 함수를 제작한다.

Mixin 과 유사하나 Mixin 은 Style Markup을, Function은 @return 값을 반환

@function calc-percent($target, $container) {
  @return ($target / $container) * 100%;
}

.my-module {
  width: calc-percent(650px, 1000px);
}

---

Sass 가 유용한 툴인 건 인지됬지만, 상당히 많은 기능을 지원하는 것을 새삼 깨우쳤다. 또한, 문법 역시 사뭇 다르다는 느낌까지..

앞으로의 프로젝트들에, Sass를 적용해보면서 위 주요 문법들을 조금씩 익혀봐야겠다.

 

<출처>
Velopert.log : https://velopert.com/1712
Sass-lang : https://sass-lang.com/documentation/