티스토리 뷰
Sass란?
Sass는 Syntactically Awesome Style Sheets(문법적으로 멋진 스타일 시트)의 약자로, CSS의 확장된 기능을 제공하는 CSS 전처리기(preprocessor)이다.
스타일시트의 크기가 커지면 복잡성이 높아지며, 결국 유지 보수가 어려워진다.
Sass는 CSS에 존재하지 않는 nesting, mixins, inheritance 등과 같은 기능을 제공하기 때문에 간결하고 효율적으로 작성할 수 있으며 유지보수하기 쉽도록 도와준다.
Sass와 Scss의 차이
Sass와 Scss는 모두 CSS 전처리기로 css를 확장하여 효율적으로 스타일 시트를 작성할 수 있는 도구이다.
그러나 Sass와 Scss는 문법적인 차이가 존재한다.
Sass는 들여 쓰기로 구분되어 간결한 문법을 가지고 있으며, Scss는 기존의 css 문법을 확장하여 우리가 친숙한 문법을 가지고 있다.
** Sass
중괄호({})와 세미콜론(;) 사용하지 않고 들여 쓰기를 통해 스타일 블록을 구분한다.
$primary-fontFamily: sans-serif
$primary-color: #333
body
font-family: $primary-fontFamily
color: $primary-color** Scss
기존 CSS와 같은 문법으로 CSS의 호환성이 좋다.
일부 개발자는 새로운 Sass 문법에 익숙하지 않아 Sass 버전 3 이상부터는 Scss로 변경되었으며 실제 사용자 수는 Sass 보다 친숙한 Scss를 선호한다. 물론 Sass의 기능은 탑재되어 있다.
$primary-fontFamily: sans-serif;
$primary-color: #333;
body {
font-family: $primary-fontFamily;
color: $primary-color
}
Sass의 주요 기능
Sass을 설명하는 글이지만 편의상 Scss 문법을 사용하도록 하겠다.
변수 Variables
Sass는 변수를 사용하여 스타일시트에서 재사용 가능한 값을 저장하고 관리할 수 있다.
이를 통해 스타일시트에서 중복을 줄이고 코드를 간결하게 작성할 수 있다.
변수를 사용할 때에는 $ 문자를 사용하여 변수를 선언하고 호출한다.
$primary-fontFamily: Helvetica, sans-serif;
body {
font-fammily: $primary-fontFamily;
}Sass 변수에는 변수 범위가 존재하며 특정 선택자에서 선언하면 해당 선택자에서만 접근 가능하다 (Scope)
해당 변수를 전역적으로 설정할 때는 !global 플래그를 사용하여 전역 변수로 선언 가능하다.
중첩 Nesting
Sass는 중첩을 사용하여 스타일시트를 구조화하고 가독성을 높일 수 있다.
부모 요소에 대한 스타일을 자식 요소에서 정의할 때 유용하며 이를 통해 스타일시트의 중복 또한 줄일 수 있어 코드의 가독성을 향상할 수 있다.
부모 선택자를 레퍼런스 할 때는 & 키워드를 사용한다. (styled-compoonents에서도 동일하게 사용)
a {
color: black;
&:hover {
text-decoration: underline;
color: gray;
}
&:visited {
color: purple;
}
}이때, 주의할 점은 4 레벨보다 깊게 들어가지 말 것!
drilling이 깊어질수록 코드의 복잡도가 높아져 유지보수가 어려워진다.
믹스인 Mixin
믹스인은 재사용 가능한 스타일 블록을 정의하고 호출할 수 있게 해 준다.
이를 통해 브라우저별로 다른 접두사를 갖는 CSS 속성을 믹스인으로 정의하여 간편하게 사용할 수 있다.
extend와 비슷하지만 argument 인수를 받을 수 있다.
mixin을 선언할 때는 @mixin 지시자를 사용하며, 이를 사용할 때는 @include 지시자를 사용한다.
@mixin headline ($color, $size) {
color: $color;
font-size: $size;
}
h1 {
@include headline(green, 12px);
}#{ } 표현은 특정 문자열을 따로 처리하지 않고 그대로 출력할 때 사용된다.
@content 지시자를 사용하면 나중에 @include 할 때, 그 선택자 내부의 내용들이 @content 부분에 나타나게 된다.
@mixin media($queryString){
@media #{$queryString} {
@content;
}
}
.container {
width: 900px;
@include media("(max-width: 767px)"){
width: 100%;
}
}
/**
.container {
width: 900px;
}
@media (max-width: 767px) {
.container {
width: 100%;
}
}
*/
상속 Inheritance
Sass는 상속을 통해 스타일시트의 구조를 유연하게 관리할 수 있다.
스타일을 한 곳에서 정의하고 다양한 요소에서 상속받아 사용할 수 있으며, 이를 통해 코드의 재사용성을 높이고 스타일의 일관성을 유지할 수 있다.
특정 선택자를 상속할 때, @extend 지시자를 사용한다.
.box {
border: 1px solid gray;
padding: 10px;
display: inline-block;
}
.success-box {
@extend .box;
border: 1px solid green;
}
연산 Operations
Sass는 수학 연산을 지원하여 스타일시트에서 값을 계산하고 다양한 단위를 조작할 수 있다. 이때 주의할 점은 +, - 연산자를 사용할 때는 단위를 언제나 통일시켜주어야 한다는 점이다.
다음과 같은 코드는 오류를 발생한다.
$box-width: 100% - 20px
이런 식은 작업은 calc() 함수를 사용하도록 하자.
모듈 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;
}
확장 Extends
Sass는 스타일시트에서 다른 스타일을 확장하여 사용할 수 있는 기능을 제공한다.
Sass에서 특정 선택자를 상속할 때 @extends 지시자를 사용한다.
.box {
border: 1px solid gray;
padding: 10px;
display: inline-block;
}
.success-box {
@extend .box;
border: 1px solid green;
}
출처