[SASS,SCSS] SASS,SCSS 알아보기

목차

 CSS의 라이브러리인 SASS, SCSS

SASS와 SCSS는 CSS를 더 효율적으로 작성할 수 있게 도와주는 CSS 전처리기이다. 두 가지 모두 Sass(Syntactically Awesome Stylesheets)라는 이름 아래 개발되었으며, CSS의 단점을 보완하고 스타일시트 작성의 효율성을 높여준다.

 

 SASS와 SCSS의 차이

• SASS (Sass의 옛날 문법): Indentation Syntax라고도 하며, 들여쓰기를 통해 코드의 구조를 나타낸다. 중괄호 `{}`와 세미콜론 `;`를 사용하지 않는다.
• SCSS (Sass의 새로운 문법): Sassy CSS의 약자로, CSS와 거의 동일한 문법을 사용한다. 중괄호와 세미콜론을 사용하며, 기존 CSS 파일에 쉽게 적용할 수 있다.

 주요 기능

변수(Variables)

스타일 속성 값을 변수로 저장하고 재사용할 수 있다.

$primary-color: #333;

body {
  color: $primary-color;
}

 

중첩(Nesting)

선택자를 중첩하여 계층 구조를 표현할 수 있다.

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

  li { display: inline-block; }

  a {
    text-decoration: none;
    color: #333;

    &:hover {
      color: #555;
    }
  }
}

 

믹스인(Mixins)

코드 블록을 재사용할 수 있는 기능이다.

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

.box { @include border-radius(10px); }

 

상속(Inheritance)

한 셀렉터의 스타일을 다른 셀렉터가 상속받을 수 있다.

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success { @extend .message; }
.error { @extend .message; }
.warning { @extend .message; }

 

연산(Operations)

.container {
  width: 100% - 10px;
  height: 50px * 2;
  margin: 5px + 10px;
}

 

 사용 예시

$base-color: #c6538c;
$border-dark: rgba($base-color, 0.88);

.button {
  padding: 10px 15px;
  font-size: 18px;
  color: #fff;
  background-color: $base-color;
  border: 1px solid $border-dark;

  &:hover {
    background-color: darken($base-color, 10%);
  }
}

 

위의 SCSS 코드는 다음과 같은 CSS로 컴파일 된다.

.button {
  padding: 10px 15px;
  font-size: 18px;
  color: #fff;
  background-color: #c6538c;
  border: 1px solid rgba(198, 83, 140, 0.88);
}
.button:hover {
  background-color: #b34775;
}

 

 컴파일

SASS/SCSS 코드는 CSS로 컴파일 되어야 웹 브라우저에서 사용할 수 있다. 이를 위해 'sass' 명령어나 다양한 빌드 도구(예: Webpack, Gulp)를 사용할 수 있다.

sass input.scss output.css

 

 마치며

SASS와 SCSS는 스타일시트 작성의 효율성을 크게 높여주며, 코드의 유지보수와 재사용성을 향상시켜준다. 다양한 기능들을 활용하여 더 나은 CSS를 작성할 수 있다.