CSS 전처리기란?
CSS 구조를 가독성 있게 만들어주고 유지 보수가 편리하도록 만들어 주는 도구이며
종류로는 SASS (SCSS), LESS, Stylus등이 있습니다.
저는 여기서 주로 많이 사용하는 SASS (SCSS)를 정리해보고자 합니다.
SASS (syntactically Awesome Style Sheets)
기존 CSS를 사용하다 보면 단순 반복되는 부분 등 유지보수의 불편함을 느끼는데
SASS는 이러한 부분을 해소시켜주는 CSS 전처리 도구입니다.
SASS에 SCSS가 포함되어 있는데, SCSS는 SASS 3번째 버전에서 추가되었고, SASS는 모든 기능을 지원하면서 CSS구문과 완전히 호환되도록 만들어 졌습니다.
📝Data type
- Numbers / 숫자 /
1, .82, 20px, 2em… - Strings / 문자 /
bold, relative, "/images/a.png", "dotum" - Colors / 색상 표현 /
red, blue, #FFFF00, rgba(255,0,0,.5) - Booleans / 논리 /
true, false - Nulls / 아무것도 없음 /
null - Lists / 공백이나 ,로 구분된 값의 목록 /
(apple, orange, banana), apple orange - Maps / Lists와 유사하나 값이 Key: Value 형태 /
(apple: a, orange: o, * banana: b)
SCSS 주요기능1 - Nesting(둥지)
부모선택자 내부에서 자식 선택자를 써서 CSS에서 부모 선택자를 반복해서 쓰는걸 방지 해줍니다!
✅ CSS
기존의 css구조로 wrapper와 wrapper 내부의 content를 하나하나 명시해줘야 했습니다.
.wrapper{
width:100px;
height:200px;
}
.wrapper .content{
color:white;
float:left;
}✨ SASS
.wrapper 선택자 유효범위 안에서 .content를 작성할 수 있습니다.
하지만 중괄호와 세미콜론이 빠져있는 것을 확인할 수 있습니다.
그리고 선택자의 유효범위를 단순 들여쓰기로 구분지었습니다.
.wrapper
width:100px
height:200px
.content
color:white
float:left✨ SCSS
그에 반해 SCSS는 중괄호로 유효범위를 나타내고 세미콜론을 사용하는걸 볼 수 있습니다.
.wrapper{
width:100px
height:200px
.content{
color:white
float:left
}
}SCSS 주요기능2 - &(부모 참조 선택자)
✅ CSS
.menu{
background:red;
}
.menu:hover{ 👈
background:green;
}✨ SASS
부모 선택자 내부에서 사용되며 &는 결국 부모를 나타내는 말과 동일합니다.
기본 CSS에서는 부모선택자에 hover 효과를 주고 싶으면 부모선택자에 호버를 붙여 사용하지만 이처럼 &를 부모선택자 내부에 사용해 hover를 적어서 사용가능합니다.
.menu{
background:red;
&:hover{ 👈
background:green;
}
}✨ 응용방법
.fs {
&-small {
font-size: 12px;
}
&-medium {
font-size: 14px;
}
&-large {
font-size: 16px;
}
}
/* Compile to CSS */
.fs-small {
font-size: 12px;
}
.fs-medium {
font-size: 14px;
}
.fs-large {
font-size: 16px;
}SCSS 주요기능3 - $로 쉬운 변수 선언 및 사용
다만 변수는 선언된 블록 내에서만 유효 범위를 가집니다.
✅ CSS
:root{
--font-color:red;
}
body{
color:var(--font-color);
}✨ SASS
root를 사용하면 생각보다 번거로운 점이 많은데 SASS는 $(달러)표시로 변수를 선언 해주고 그 변수명을 붙여 사용해주면 됩니다.
$font-color:red;
bdoy{
color:$font-color;
}SCSS 주요기능4 - @mixin / @include
- @mixin은 css에서 자주 쓰이는 요소를 그룹처리 시켜 블록단위로 재사용할수 있게 하는것 입니다. * @include는 @mixin된 값을 불러올때 사용하는 것입니다.
✅ CSS
box1과 box2의 width, height값이 반복 사용이 되었습니다.
.section{
position: relative;
}
.section .box1{
width: 100px; 👈
height: 50px; 👈
}
.section .box2{
width: 100px; 👈
height: 50px; 👈
}✨ SASS
SASS는 @mixin을 사용하여 요소값을 그룹화 시켰고
그 값을 불러올때는 @inclue를 사용하여 불러올수가 있습니다.
@mixin box-style { 👈
width: 100px;
height: 50px;
}
.section{
position: relative;
.box1{
@include box-style;
}
.box2{
@include box-style;
}
}그리고 mixin은 이처럼 매개변수를 사용할 수도 있습니다.
@mixin box-style($size1, $size2){ ✅
width: $size1;👈
height: $size2;👈
}
.section{
position: relative;
.box1{
@include box-style;
}
.box2{
@include box-style;
}
}SCSS 주요기능5 - funcitons(함수)
함수를 정의하여 사용할 수 있습니다.
다만 함수와 Mixin이 헷갈릴 수도 있는데, 이들은 반환 값에 차이가 있습니다.
Mixin과 함수의 차이점
- Mixin : 지정한 스타일(Style)을 반환
- 함수 : 계산된 특정 값을 @return 지시어를 통해 반환
/* SCSS */
$max-width: 980px;
@function columns($number: 1, $columns: 12) {
@return $max-width * ($number / $columns);
}
.box_group {
width: $max-width;
.box1 {
width: columns(); // 1
}
.box2 {
width: columns(8);
}
.box3 {
width: columns(3);
}
}
/* Compile to CSS */
.box_group {
/* 총 너비 */
width: 980px;
}
.box_group .box1 {
/* 총 너비의 약 8.3% */
width: 81.66667px;
}
.box_group .box2 {
/* 총 너비의 약 66.7% */
width: 653.33333px;
}
.box_group .box3 {
/* 총 너비의 25% */
width: 245px;
}SCSS 주요기능6 - @import
CSS는 하나의 태그에 여러 태그를 관리해야 하는 경우가 많은데
이럴경우 굉장히 복잡한 구조를 가지게 되는데 SCSS는 import를 사용하여
다른 복잡한 구조를 해소시켜줄 수 있고 import를 사용할때는 확장자 값을 생략해 줄 수 있다.
✅ CSS
header{
...
}
section{
...
}
aside{
...
}
footer{
...
}✨ SASS
root를 사용하면 생각보다 번거로운 점이 많은데 SASS는 $(달러)표시로 변수를 선언 해주고 그 변수명을 붙여 사용해주면 됩니다.
@import 'header.scss';
@import 'header.scss';
@import 'header.scss';
@import 'header.scss';
@import 'header'; //.scss라는 확장자 생략 가능SCSS 주요기능7 - 조건문 if() / @if
if문은 두가지로 구성되어 있는데 괄호를 사용한 if()과 @를 사용한 @if가 있습니다.
✅ if()
쉽게 삼항연산자로 생각하면 된다.
if(condition, true, false);
$type: box; //변수 선언
article{
background:if($type == box, blue, green);
}
//CSS compilde 결과
article {backround: blue;✅ @if
기존의 if문가 비슷하게 생각하면 된다, 하지만 괄호를 넣지 않는다는 다른점이 있다.
기능은 else를 사용하는것도 동일합니다.
$type: box; //변수 선언
article{
@if $type == box {
color: blue;
} @else if $type == list{
color: green;
}
}
//CSS compilde 결과
article {backround: blue;SCSS 주요기능8 - 반복문 @for
@for도 동일하게 조건문에 괄호를 사용하지 않고,
기존의 for문은 초기화식, 증감식, 조건식을 사용하는데
SASS는 반복사용될 변수를 선언하고 어떤 방식으로 반복할지
from ~ to / through를 사용하게 됩니다.
✅ @for ~ to
from 1 to 3은 뒤에 붙은 to의 값에서 -1을 한 값까지만 반복이 된다는 것으로,
1부터 2까지만 반복이 되는걸 의미합니다.
@for $i from 1 to 3 {
.box-#{$i} {
width: 2em * $i}
}
//CSS compilde 결과
.box-1 { width:2em;}
.box-2 { width:4em;}✅ @for ~ through
from 1 through 3은 뒤에 붙은 through 값까지 반복이 된다는 것으로,
1부터 3까지만 반복이 되는걸 의미합니다.
@for $i from 1 through 3 {
.box-#{$i} {
width: 2em * $i}
}
//CSS compilde 결과
.box-1 { width:2em;}
.box-2 { width:4em;}
.box-3 { width:6em;}여기서 알아둬야 하는 점 ❗❗❗❗
SSAS에서 변수를 선언할 때는
#{}와 같이#뒤에 괄호를 하고 변수값을 넣어주어야 합니다!
SCSS 주요기능9 - 반복문 @while
@while도 동일하게 조건문에 괄호를 사용하지 않고,
@while 뒤에 조건식을 넣고 true일 경우 안의 코드가 반복 실행됩니다.
$i: 5;
@while $i < 10 {
.box-#{$i} {
width: 2em * $i;
}
$i: $i + 2;
}
//CSS compilde 결과
.box-5 { width:10em;}
.box-7 { width:14em;}
.box-9 { width:18em;}SASS(SCSS)의 장점 정리👍
- Nesiting 등의 기능을 통해 코드의 양을 줄이고 연관된 코드끼리 그룹핑해서 코드의 중복을 줄일 수 있다.
- 변수 선언 및 @mixin 기능 등을 사용할 수 있기 때문에 유지보수가 쉬워진다.
- 조건문, 반복문, 연산자 등을 사용할 수 있다.
- 어렵지가 않다!
