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

목차

1.  CSS의 라이브러리인 SASS, SCSS
2.  SASS와 SCSS의 차이
3.  주요 기능
   1. 변수(Variables)
   2. 중첩(Nesting)
   3. 믹스인(Mixins)
   4. 상속(Inheritance)
   5. 연산(Operations)
4.  사용 예시
5.  컴파일
6.  마치며

 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를 작성할 수 있다.