Sass (Synthetically Awesome StyleSheets)
CSS 전처리기로써, 변수, 상속, 혼합, 중첩등의 다양한 기능을 제공합니다.
다만 전처리기로 작성한 코드는 css로 컴파일을 거친 뒤 실행 시킬 수 있습니다.
💡 CSS 전처리기 (preprocessor): 자신만의 특별한 문법을 통해 CSS를 생성하는 프로그램
❗️ Sass 와 SCSS의 차이점
Sass : 중괄호가 아닌 들여쓰기를 사용함
SCSS :: CSS 처럼 {} 와 ;을 사용함
SCSS
Sass의 모든 기능을 지원하는 Superset입니다.
Css와 거의 비슷한 문법으로 Sass의 기능을 사용할 수 있어 편리합니다.
✏️ Sass
.list
width: 100px
float: left
li
color: red
background: url("./image.jpg")
&:last-child
margin-right: -10px✏️ SCSS
.list {
width: 100px;
float: left;
li {
color: red;
background: url("./image.jpg");
&:last-child {
margin-right: -10px;
}
}
}1. Data Types
SCSS 는 다양한 데이터 타입을 정의하고 있어 이를 변수처럼 활용할 수 있습니다.
$boolean: true;
$string: hello;
$color: red;
$number: 720;
$list: red, orange, yellow, green, blue;
$map: (
l: light,
d: dark,
);2. Nesting (중첩)
Nesting을 통해 상위 선택자의 반복을 줄일 수 있습니다.이를 통해 복잡한 구조를 더 편리하게 개선하게 됩니다.
.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;
}치환의 원리이기 때문에 다음과 같이 응용할 수도 있습니다.
/* SCSS */
.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;
}4. Variables (변수)
반복적으로 사용되는 값을 변수로 지정할 수 있습니다. 변수 이름 앞에는 항상 $를 붙여야 합니다.
$변수이름: 속성값;
/* SCSS */
$color-primary: #ff0000;
$url-images: "/assets/images/";
$w: 100px;
.box{
width: $w;
margin-left: $w;
background: $color-primary url($url-images + "bg.jpg");
}
/* Compiled to CSS */
.box{
width: 100px;
margin-left: 100px;
background: #ff0000 url("/assets/images/bg.jpg");
}#[4-1] Variable Scope
다만 변수는 선언된 블록 내에서만 유효 범위를 가집니다.
.box1{
$color: #111;
background: $color;
}
/* Error */
.box2 {
background: $color;
}#[4-2] { } 문자 보간
#{ }를 이용하면 JavaScript의 템플릿 리터럴처럼 코드의 어디든지 변수 값을 넣을 수 있습니다.
$family: unquote("Droid+Sans");
@import url ("}");
@import url ("");/* SCSS */
$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}";
/*Compile to CSS*/
@import url("http://fonts.googleapis.com/css?family=Droid+Sans");5. Operations 연산
연산자는 레이아웃을 디테일하게 디자인할 때 유용하게 쓰일 수 있습니다.
6. Mixins (재활용) (@mixin 과 @include 기능 사용)
Mixin은 재사용할 CSS 스타일을 정의할 수 있는 유용한 기능입니다. @mixin 을 통해 스타일을 선언하고, @include을 통해 사용합니다.
🏷️ @mixin
기본적인 mixin 선언은 아주 간단함 → 지시어를 이용하여 스타일 정의
/* SCSS */
@mixin 믹스인이름 {
스타일;
}
/*Sass*/
=믹스인이름
스타일/* SCSS */
/* 선언 - @mixin */
@mixin large-text{
font: {
size: 22px;
weight: bold;
family: snas-serif;
}
color: orange;
$::after {
content: "!!";
}
span.icon {
background:url("/images/icon.png");
}
}
/* 사용 - @include */
h1 {
@include large-text;
}
div{
@include large-text;
}🏷️ @include
선언된 mixin을 사용하기 위해서는 @include가 필요함
/* SCSS */
@include 믹스인이름;
/* Sass */
+믹스인이름 /* 선언 - @mixin */
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
/* 사용 - include */
.box {
@include border-radius(10px);
}7. functions (함수)
함수를 정의하여 사용할 수 있습니다.
다만 함수와 mixin이 헷갈릴 수도 있는데, 이들은 반환 값에 차이가 있습니다.
mixin과 함수의 차이점?
Mixin: 지정한 스타일 (Style)을 반환
함수: 계산된(연산된) 특정 값을 @return 지시어를 통해 반환
✏️ 선언방법
/* Mixins */
@mixin 믹스인이름($매개변수) {
스타일;
}
/*functions*/
@function 함수이름($매개변수) {
@return 값
}✏️ 사용방법
// Mixin
@include 믹스인이름(인수);
// functions
함수이름(인수)/* SCSS */
$max-width: 980px;
@function columns($number: 1, $columns: 12) {
@return $max-width * ($number / $columns);
}