TIL

190420_TIL(Sass 특강)

4월 20일(토)

Sass 특강

  • 패스트캠퍼스에서 제공하는 주말 하루 특강을 들었다.
  • 짧은 시간이었기 때문에 깊은 내용을 듣지는 못하고 기초적인 내용 위주로 Sass를 맛(?)봤다.
  • 다른 프로그래밍 언어들과는 많이 다른 css를 여타 프로그래밍 언어들과 비슷하게 사용할 수 있는 점이 새로웠다. 여지껏 알던 css가 아닌 낯선 느낌이었다.
  • css를 사용하면서 느꼈던 불편한 점들(좋지않은 재사용성, 복잡한 선택자 사용 등)을 개선할 수 있는 점이 좋았다.

Sass란?

  • Sass(Syntactically Awesome StyleSheets))는 CSS pre-processor(전처리기)로서 CSS의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 CSS의 확장(extension) 언어이다.
  • CSS에는 없는 문법인 선언의 중첩(Nesting), 조건문, 반복문, 변수의 사용, 다양한 연산 기능 등을 지원하여 코드의 재활용성과 가독성을 높여준다.
  • 웹브라우저에서 스타일링에 사용되는 언어는 오직 CSS 뿐이다. Sass 스크립트 코드를 CSS 코드로 변환(compile) 시켜 줘야 한다.

Mixin

  • Sass 전체를 정리하기에는 양이 너무 많다… 수업을 들을 때 가장 흥미로웠던 부분이기도 하고 실제로도 Sass에서 가장 유용한 기능으로 손꼽히는 Mixin을 간단하게 정리하겠다.
  • Mixin 기능은 중복을 방지하고 사용 빈도가 높은 스타일 코드를 사전에 정의하여 필요할 때 불러서 사용하는 방법이다.
  • Mixin 기능의 특징은 프로그래밍 언어의 함수처럼 parameter(매개변수)를 사용하여 argument(전달인자)를 받을 수 있다는 것이다.
  • MIxin의 사용법은 자주 사용할 스타일 코드 그룹을 @mixin으로 선언하고 사용할 스타일 코드 그룹 내에서 @include를 사용하여 @mixin으로 선언한 코드 그룹을 불러들이는 것이다.

예시코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@mixin boldtext($size, $color) {
    font: {
        family: 'Malgun Gothic' sans-serif;
        weight: bold;
        size: $size;
    }
    color: $color;
}

//순서가 바뀌어도 전달인자를 지정해주면 동작한다.
.boxsample {
    @include boldtext($color:green, $size:50px);
}
//.boxsample {
//    @include boldtext(25px, green);
//}

참고자료

Share