[CSS] SASS(SCSS) 개념 정리

sass를 사용해보기 위해 개념과 기능에 대해 정리해보았다.

SASS란?

sass는 css의 확장판 스크립트 언어이다. 기존 css와 비교하여 기능 부재의 단점을 보완한 다양한 기능이 추가되어있고, 가독성이 높고 코드의 재사용에 유리하다.

SASS 사용 이유

css를 썼을 때 프로젝트의 크기가 커지고 고도화될수록 유지보수에 큰 어려움이 생긴다. 예를 들어 기존의 CSS는 불필요한 선택자(Selector), 연산 기능 한계, 구문(Statement)의 부재의 문제점이 있는데 이런것들을 SASS를 사용함으로써 해결할 수 있다.

SASS는 다음과 같은 기능들이 존재한다.

• 변수(Variable) 할당
• 중첩(Nesting) 구문
• 모듈화(Modularity)
• 믹스인(Mixins)
• 확장&상속(Extend/Inheritance)
• 연산자(Operators)

SASS의 At-Rules

• @mixin / @include : 스타일 청크(묶음)를 쉽게 재사용할 수 있다.
• @extend : 여러 선택자가 스타일을 상속받도록 할 수 있다.
• @import / @use : 다른 스타일시트에 있는 변수, 함수, 믹스인 등을 불러와 결합해서 쓸 수 있다.
• @function : SassScript에서 사용할 수 있는 사용자 정의 함수를 만들 수 있다.
• @- if / @each / @for : 상황에 맞춰 CSS가 적용되도록 흐름을 제어할 수 있다.

scss와 sass의 차이?

scss는 sass의 3버전에 등장한 언어로 sass와 사용법이 비슷하지만 다른점도 있다.

• 문법차이
• 확장자 (.scss, .sass)

확장자는 말그대로 확장자 차이이고 문법적으로 다른 부분은

{ } ; 의 유무
sass는

.text
  font-size: 20px
  a
    color: #ffffff

이렇게 세미콜론과 중괄호를 쓰지 않는 반면 scss는

.text{
  font-size: 20px;
  a{
    color: #ffffff:
  }
}

이런식으로 사용한다.

변수 할당

SASS에서는 $기호를 사용하여 변수를 정의할 수 있다.

css

body {
  color: #3498db;
  font-family: Helvetica, sans-serif;
}

sass

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

body
  color: $primary-color
  font-family: $font-stack

중첩 구문

css

nav {
  background: #333;
}
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

sass

nav
  background: #333
  ul
    margin: 0
    padding: 0
    list-style: none
  li
    display: inline-block
  a
    display: block
    padding: 6px 12px
    text-decoration: none

모듈화

@use/ @import를 사용하여 파일을 분할하고 모듈화 할 수 있다.

css

/* styles.css */
.button {
  background-color: #3498db;
  /* 버튼 스타일 */
}

sass

// _variables.sass
$primary-color: #3498db

// _buttons.sass
@import 'variables'

.button
  background-color: $primary-color
  // 버튼 스타일

// main.sass
@import 'variables'
@import 'buttons'

믹스인

함수처럼 defalut parameter를 지정할 수 있고 parameter를 받아서 속성을 부여할 수 있다. (재사용성)

css

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

sass

@mixin border-radius($radius: 10px)
  -webkit-border-radius: $radius
  -moz-border-radius: $radius
  border-radius: $radius

.box
  @include border-radius

확장 상속

@extend 사용 시 css 속성 집합을 상속받을 수 있다.

css

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.success {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
  border-color: green;
}
.error {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
  border-color: red;
}

sass

%message-shared
  border: 1px solid #ccc
  padding: 10px
  color: #333

.success
  @extend %message-shared
  border-color: green

.error
  @extend %message-shared
  border-color: red

연산자

math.div(나누기) 외에도 sin, cos, tan, random, max, min 등등 여러 가지 수학적 기능을 사용할 수 있다.

css

.container {
  width: 100%;
}
article[role="main"] {
  float: left;
  width: 62.5%;
}
aside[role="complementary"] {
  float: right;
  width: 31.25%;
}

sass

.container
  width: 100%

article[role="main"]
  float: left
  width: math.div(600px, 960px) * 100%

aside[role="complementary"]
  float: right
  width: 300px / 960px * 100%