아직도 CSS 쓰세요? 이제 SASS 씁시다!

SASS란 무엇인가?

CSS 전처리기란?

CSS 전처리기는 CSS 코드를 작성할 때 보다 효과적이고 조직적으로 스타일을 관리하기 위한 스크립팅 언어입니다. 이 전처리기는 특별한 문법을 사용하여 작성되며, 웹사이트를 실행하기 전에 일반 CSS로 컴파일됩니다.

SASS에는 SCSS와 Sass가 있습니다.

SASS 사용의 장점

• 코드 재사용: 믹스인, 변수, 함수 등을 사용하여 코드 중복을 줄임
• 유지 및 관리 용이성: 분할 및 구조화된 코드 관리
• 고급 기능 사용: 조건문, 반복문, 연산 등

SCSS와 Sass의 차이

Sass는 CSS 전처리기의 한 형태로, 처음에는 들여쓰기 기반의 문법을 사용했습니다. 이를 "들여쓰기 문법" 또는 간단히 "Sass"라고 부릅니다.

SCSS는 Sass의 새로운 문법이며, CSS와 거의 동일한 블록 형식을 사용하는 문법입니다. .scss 확장자를 사용하며, CSS 구문을 그대로 사용할 수 있기 때문에 CSS를 알고 있는 사람들에게는 더 친숙합니다.

Sass

• 들여쓰기 기반 문법
• 중괄호 { } 및 세미콜론 ; 없음
• .sass 확장자 사용

$font-stack: Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

.navbar
  background-color: darken($primary-color, 10%)

SCSS

• CSS와 유사한 문법
• 중괄호와 세미콜론 사용
• .scss 확장자 사용

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

.navbar {
  background-color: darken($primary-color, 10%);
}

결론적으로, SCSS는 CSS의 확장 버전처럼 작동하므로, CSS를 이미 알고 있는 개발자들에게 배우기가 더 쉽습니다.

기본적으로 대부분의 교육 기관에서도 SCSS를 택하고 있고, 대부분의 회사도 SCSS를 선택하였습니다.

SCSS 기본 문법

변수 (Variables)

CSS의 값을 저장하고 재사용하는 방법입니다. 변수 이름은 `$` 로 시작합니다.

주로, 중복해서 자주 사용하는 font-family와 color들을 변수로 지정합니다.

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

.submit-btn { 
    background-color : $primary-color;
}

중첩 ( Nesting)

계층적으로 상속되는 CSS를 더욱 계층적으로 보이게 만드는 기능입니다. 선택자에서 상위 계층을 적던 것을 정리하고 관련 요소들을 그룹으로 묶을 수 있게 되어 더욱 깔끔해진다.

기존 CSS 방식보다 가독성도 훨씬 좋아지고, 코드도 짧아진다는 장점이 있습니다.

하지만, 지나치게 사용하면 코드의 가독성과 유지보수 성이 떨어지며, 예기치 않은 선택자의 특정성(specificity) 문제가 발생할 수 있습니다.
따라서 중첩은 3depth 이내로 제한하는 것이 권장됩니다.

기존 CSS

nav ul {
  margin: 0;
  padding: 0;
}
nav li {
  display: inline-block;
}
nav a {
  text-decoration: none;
}

SCSS

nav {
  ul {
    margin: 0;
    padding: 0;
  }
  li { display: inline-block; }
  a { text-decoration: none; }
}

파일 분리와 임포트 (Partials & Import)

.scss 파일을 여러 파일로 나누고 필요한 곳에서 임포트하는 기능입니다.

부분 파일 이름은 _로 시작하고, import 할 때에는 생략합니다.

_reset.scss

* {
  margin: 0;
  padding: 0;
}

main.scss

@import 'reset';

css로 컴파일된 main.scss

* {
  margin: 0;
  padding: 0;
}

부분 파일은 왜 _ 로 시작할까?

CSS (또는 SASS)에서 부분 파일(partials)은 _ (언더스코어)로 시작하는데, 이는 해당 파일이 stand alone으로는 컴파일되지 않는다는 것을 나타냅니다. 부분 파일은 다른 SCSS 파일에 import되어 사용될 목적으로 만들어집니다.

_로 시작하는 파일들의 몇 가지 주요한 특징은 다음과 같습니다:

독립적이지 않음: _로 시작하는 부분 파일은 자체적으로는 컴파일되지 않습니다. 따라서 SCSS를 컴파일할 때 이 파일들은 단독으로 CSS 파일로 생성되지 않습니다.

재사용성: 부분 파일은 공통적으로 사용되는 변수, 믹스인, 함수 등을 정의하여 다른 SCSS 파일에서 재사용하기 위한 목적으로 만들어집니다.

가독성 및 관리: 큰 스타일 시트를 여러 개의 작은 파일로 나누면 코드의 구조와 관리가 훨씬 쉬워집니다. _ 접두사는 해당 파일이 부분 파일이라는 것을 명확하게 나타내어 가독성을 향상시킵니다.

예시:

_variables.scss: 색상, 폰트 등의 변수를 저장합니다.
_mixins.scss: 재사용 가능한 믹스인을 저장합니다.
main.scss: 위의 부분 파일들을 임포트하여 전체 스타일을 구성합니다.
main.scss에서 부분 파일을 임포트할 때는 언더스코어나 파일 확장자를 생략할 수 있습니다:

 

믹스인 (Mixins)

믹스인(Mixin)은 SCSS (또는 SASS)에서 제공하는 강력한 기능 중 하나로, 재사용 가능한 스타일 그룹을 정의하는 데 사용됩니다. 믹스인을 사용하면 중복 코드를 줄이고, 코드의 일관성을 유지하며, 특정 패턴이나 구조에 대한 변경을 한 곳에서만 진행할 수 있습니다.

기본 믹스인 정의 및 사용

정의

@mixin reset-text {
  margin: 0;
  padding: 0;
  font-size: 16px;
}

사용

p {
  @include reset-text;
}

인자를 사용하는 믹스인

믹스인에 인자를 전달하여 더 유연한 스타일링이 가능합니다.

정의

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

사용

.button {
  @include border-radius(5px);
}

기본값이 있는 인자 지정하기

믹스인의 인자에 기본값을 지정할 수 있습니다.

정의

@mixin box-shadow($x: 0, $y: 0, $blur: 5px, $color: black) {
  box-shadow: $x $y $blur $color;
}

사용

.box {
  @include box-shadow(2px, 2px, 4px, #aaa);
}


.notification {  
@include box-shadow($color: #e3e3e3);  
}  

여러 인자와 ...를 사용하는 믹스인

...를 사용하여 여러 개의 인자를 전달할 수 있습니다.

정의

@mixin transition($properties...) {  
transition: $properties;  
}  

사용

.button {  
@include transition(color 0.2s, background-color 0.5s);  
}

연산자 (Operators)

SCSS에서는 기본적인 수학 연산자를 사용하여 값들 사이의 연산을 수행할 수 있습니다. 이 기능은 디자인 요소의 크기, 여백, 색상 등을 계산하는 데 유용합니다.

하지만 계산을 할 때에는 단위를 통일시켜야 합니다.

.container {
  width: 100% / 3;  // error! 단위를 통일시키지 않음
  padding: 10px + 5px;  // 덧셈
}
.button {
  width: 100px + 30px;  // 결과: 130px
  margin-top: 5em - 2em;  // 결과: 3em
}

조건문 (@if, @else if, @else)

조건문은 주어진 조건에 따라 다른 스타일을 적용하고자 할 때 사용됩니다.

$theme: light;

.button {
  @if $theme == light {
    background-color: white;
    color: black;
  } @else {
    background-color: black;
    color: white;
  }
}

도구와 환경 설정

SCSS는 CSS처럼 바로 사용할 수는 없습니다.

 

HTML과 사용하는 경우

 

마켓 플레이스에 compile hero를 다운받아주세요.

그리고 하단에 Compile Hero가 On 으로 되어있는지 확인해주세요.

그 후 SCSS 를 저장하면 Compile hero 가 자동으로 SCSS를 인식해서 CSS로 번역해줍니다.

그 CSS를 HTML 에 링크하여 사용하면 됩니다.

 

Vue.js, Svelte와 같은 프레임워크와 사용하는 경우

 

npm 이나 yarn을 이용하여 다운로드만 받으면 바로 사용할 수 있습니다.

npm install -g sass

// OR

yarn add sass