CSS에서 중복을 제거하고 유지보수에 도움을 주는 잔처리기 SASS/SCSS에 대해 알아보자.
<참고 자료>
SASS 공식 사이트
인파님의 SCSS 개념 소개 & 설치 세팅 정리
📝 SASS
SASS(Syntactically Awesome Style Sheets)란 CSS의 기능을 확장하고
개발자들이 더 효율적이고 유지보수하기 쉬운 코드를 작성하도록 도와주는 CSS의 전처리기다.
- 변수, 중첩 규칙, 모듈화된 코드 등의 기능을 제공해준다.
- 코드의 재사용성을 높이고 중복 코드를 줄일 수 있다.
📎 변수 사용
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}📎 중첩 사용 - Nesting (부모 요소 안에 자식 요소 입력)
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}📎 모듈 사용 (Modules)
파일 이름을 기반으로 하는 네임스페이스를 사용하여 SASS 파일의 변수, 믹스인, 함수를 참조 한다.
- @use 지시어로 해당 파일에 있는 변수, 함수 등을 가져온다.
- 사용할때는 <파일.변수명> 으로 사용한다.
// _base.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
// styles.scss
@use 'base';
.inverse {
background-color: base.$primary-color;
color: white;
}📎 믹스인 (Mixins)
사이트 전체에서 재사용하려는 CSS 선언 그룹을 만들어 준다.
- @mixins 지시어에 스타일을 설정하고 @include 지시어로 설정된 스타일을 가져온다.
- 그룹 세팅 후에 스타일을 지정하여 바꿔 줄 수 있다.
- ($ : 스타일 지정) 으로 원하는 테마를 만들어서 전달도 가능하다.
@mixin button-styles ($button-styles : DarkGray {
background-color : $button-styles;
padding : 10px;
font-size : 10px;
color : #333;
}
.btnOne {
@include button-styles;
}
.btnTwo {
@include button-styles($button-styles : DarkRed);
}
.btn-primary {
@include button-styles;
color : #777;
font-size : 15px;
}📎 Extend & Inheritance (확장 & 상속)
SASS에서는 확장과 상속을 사용하여 스타일 시트의 코드 재사용성을 높여준다.
Extend는 @extend 키워드를 사용하여 다른 클래스에서 선언된 스타일을 상속 받는 것이다.
상속된 스타일에 대한 변경 사항은 상속한 클래스에도 적용이 된다.
.button {
padding: 10px;
background-color: blue;
}
.submit-button {
@extend .button;
color: white;
}- button, subimt-button 모두 button의 스타일을 가지고 출력된다.
Inheritance는 상속되는 스타일에 %를 부여한다.
다만, %가 붙은 코드는 실제로 적용되지 않는다. (스타일 셋팅만 해둔다고 생각하자)
%button {
padding: 10px;
background-color: blue;
}
.submit-button {
@extend %button;
color: white;
}- %button, sumit-button 모두 button의 스타일을 가지지만, %button은 출력되지 않는다.
📎 Operators (연산자 사용)
CSS에서는 계산된 수치를 입력해주어야 했지만,
SASS에서는 연산자를 이용하여 수치를 직접 계산할 수 있다.
@use "sass:math";
.container {
display: flex;
}
article[role="main"] {
width: math.div(600px, 960px) * 100%;
}
aside[role="complementary"] {
width: math.div(300px, 960px) * 100%;
margin-left: auto;
}💻 SASS / SCSS 사용하기
- SASS 설치하기
npm install -g node-sass- SASS 파일 작성하기
SASS 파일은.scss또는.sass확장자를 가지며, 일반적으로.scss확장자를 사용한다.
$primary-color: #007bff;
.btn {
background-color: $primary-color;
color: #fff;
}- SASS 파일을 CSS로 컴파일하기
작성한 SASS 파일을 CSS 파일로 변환해야 웹페이지에서 사용할 수 있다.
node-sass [옵션] <인풋파일> <아웃풋파일>
node-sass -w input.scss output.css- CSS 파일 적용하기
생성된 CSS 파일을 HTML 파일에 링크하여 웹페이지에서 적용할 수 있다.
<head>
<link rel="stylesheet" href="output.css">
</head>
한 발자국, 한 걸음 느리더라도 하루하루 발전하는 삶을 살자.