SCSS(Syntactically Awesome StyleSheet
CSS는 복잡한 언어는 아니지만 작업이 커지고 코드가 많아질수록 불편함이 생기게 됩니다. 예를들어 선택자의 과용과 연산 기능의 한계, 구문의 부재 등등 프로젝트가 커지면 코드 중복이 많아지고 복잡해져 유지보수가 어려워지게 됩니다. SCSS는 코드의 재활용성을 올리고, 가독성을 올리는 등 CSS에서 보이던 단점을 보완하고, 개발의 효율을 올리기 위해 등장한 CSS 전처리기 언어 입니다. CSS를 편리하게 사용할 수 있도록 하며 추가 기능 또한 있는 확장판 스크립트 언어라고 보시면 됩니다. 여기서 CSS 전처리기 언어는 CSS 문법과 유사하지만 선택자의 중첩이나 조건문, 반복문, 다양한 단위의 연산 등 표준 CSS보다 훨씬 많은 기능을 사용해서 편리하게 작성할 수 있습니다.
01. SCSS의 장점
1. CSS보다 심플한 표기법으로 CSS를 구조화하여 표현할 수 있습니다.
2. 가독성과 재사용성을 높여주어 유지보수가 쉬워지게 도와줍니다.
3. 선택자의 중첩을 통해 반복되는 부모요소 선택자 사용을 줄일 수 있습니다.
4. 프로그래밍 언어에서 사용하는 조건문, 반복문을 통해서 동적으로 CSS 관리가 가능합니다.
02. SCSS의 단점
1. 전처리기를 위해 도구가 필요합니다.
2. 컴파일 시간이 소요됩니다.
03. SCSS의 문법
1. Data Types
CSCC는 다양한 데이터 타입을 정의하고 있어 이를 변수처럼 활용할 수 있습니다.
| 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) |
$boolean: true;
$string: hello;
$color: red;
$number: 720;
$list: red, orange, yellow, green, blue;
$map: (
l: light,
d: dark,
);
2. Nesting (중첩)
nesting을 통해 상위 선택자의 반복을 줄일 수 있습니다. 이를 통해 복잡한 구조를 더 편리하게 개선하게 됩니다.
/* SCSS */
.section {
width: 100%;
.list {
padding: 20px;
li {
float: left;
}
}
}
/* Compile to CSS */
.section {
width: 100%;
}
.section .list {
padding: 20px;
}
.section .list li {
float: left;
}
3. & (상위 선택자 참조)
Nesting(중첩) 내부에서 & 키워드는 상위(부모) 선택자로 치환됩니다.
/* SCSS */
.btn {
position: absolute;
&.active {
color: red;
}
}
.list {
li {
&:last-child {
margin-right: 0;
}
}
}
/* Compile to CSS */
.btn {
position: absolute;
}
.btn.active {
color: red;
}
.list li:last-child {
margin-right: 0;
}
4. Variables (변수)
반복적으로 사용되거나 관리하고 싶은 값을 변수로 지정할 수 있습니다. 다만 변수 이름 앞에는 항상 $를 붙여야 합니다.
/* SCSS */
$color-primary: #e96900;
$url-images: "/assets/images/";
$w: 200px;
.box {
width: $w;
margin-left: $w;
background: $color-primary url($url-images + "bg.jpg");
}
/* Compile to CSS */
.box {
width: 200px;
margin-left: 200px;
background: #e96900 url("/assets/images/bg.jpg");
}
5. Operations (연산)
연산자는 레이아웃을 디테일하게 디자인할 때 유용하게 쓰일 수 있습니다.
| + | 더하기 |
| - | 빼기 |
| * | 곱하기 |
| / | 나누기 |
| % | 나머지 |
6. Mixins (재활용)
Mixin은 재사용할 CSS 스타일을 정의할 수 있는 유용한 기능입니다. @mixin을 통해 스타일을 선언하고 @include을 통해 사용합니다.
/* 선언 - @mixin */
@mixin large-text {
font: {
size: 22px;
weight: bold;
family: sans-serif;
}
color: orange;
&::after {
content: "!!";
}
span.icon {
background: url("/images/icon.png");
}
}
/* 사용 - @include */
h1 {
@include large-text;
}
div {
@include large-text;
}
7. Functions (함수)
함수를 정의하여 사용할 수 있습니다.
/* 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;
}
8. Condition (조건)
조건의 참 거짓에 따라 하나의 값을 반환합니다. JavaScript의 삼항 연산자와 구조가 비슷합니다. 또한, 조건에 따른 분기 처리도 가능합니다. 이것은 JavaScript의 if-else문과 구조가 비슷합니다.
/* SCSS */
$width: 555px;
div {
width: if($width > 300px, $width, null);
}
$color: orange;
div {
@if $color == strawberry {
color: #fe2e2e;
} @else if $color == orange {
color: #fe9a2e;
} @else if $color == banana {
color: #ffff00;
} @else {
color: #2a1b0a;
}
}
/* Compile to CSS */
div {
width: 555px;
}
div {
color: #fe9a2e;
}
9. Built-in Functions (내장 함수)
Sass에선 기본적으로 다양한 내장 함수를 제공합니다. 종류가 다양하니 필요에 따라 찾아보면서 사용하는 것을 권장합니다.
.item:nth-child(1) {
background-color: $color;
}
.item:nth-child(2) {
background-color: lighten($color, 20%);
}
.item:nth-child(3) {
color: white;
background-color: darken($color, 20%);
}
.item:nth-child(4) {
background-color: grayscale($color);
}
.item:nth-child(5) {
background-color: rgba($color, 0.3);
}
.item:nth-child(6) {
background-color: invert($color);
}
'CSS' 카테고리의 다른 글
| [CSS]이미지 스프라이트 / IR 효과 / 백그라운드 표현 (7) | 2022.08.20 |
|---|---|
| [CSS]강아지 애니메이션 (3) | 2022.08.18 |
| [CSS]미디어쿼리 (3) | 2022.08.15 |
| [CSS]기본문법 (3) | 2022.08.13 |
| [CSS]벡터방식과 비트맵방식 (10) | 2022.08.09 |
댓글