.gif&blockId=11b00c82-b138-8050-a58b-dcbceda2ef8f)
Sass (Synthetically Awesome StyleSheets)
•
CSS 전처리기
•
변수, 상속, 혼합, 중첩 등의 다양한 기능 제공
•
다만 전처리기로 작성한 코드는 CSS로 컴파일을 거친 뒤 실행 가능
CSS 전처리기(preprocessor) : 자신만의 특별한 문법을 통해 CSS를 생성하는 프로그램
SCSS == Sass
•
SCSS는 Sass의 모든 기능을 지원하는 Superset
Sass와 SCSS의 차이점
•
Sass : 중괄호가 아닌 들여 쓰기를 사용 (like Python)
•
SCSS : CSS처럼 {}와 ;을 사용 (like Javascript)
1. Data Types
•
다양한 데이터 타입을 정의하고 있기 때문에 이를 변수처럼 활용 가능
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,
);
Scss
복사
2. 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;
}
Scss
복사
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
복사
•
치환의 원리이기 때문에 다음과 같이 응용 가능
/* 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;
}
Scss
복사
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");
}
Scss
복사
Variable Scope
•
변수는 선언된 블록 내에서만 유효 범위를 보유
.box1 {
$color: #111;
background: $color;
}
/* Error */
.box2 {
background: $color;
}
Scss
복사
#{ }
•
#{ }를 이용하면 JavaScript의 템플릿 리터럴처럼 코드의 어디든지 변수 값 삽입 가능
/* 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");
Scss
복사
5. Operations (연산)
•
연산자는 레이아웃을 디테일하게 디자인할 때 유용하게 사용 가능
+ | 더하기 | |
- | 빼기 | |
* | 곱하기 | 하나 이상의 값이 반드시 숫자(Number) |
/ | 나누기 | 오른쪽 값이 반드시 숫자(Number) |
% | 나머지 |
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;
}
Scss
복사
7. Functions (함수)
•
함수를 정의하여 사용 가능
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
복사
8. Condition (조건)
if (조건문, 참, 거짓)
•
조건의 참 거짓에 따라 하나의 값 반환
•
== JavaScript의 삼항 연산자
/* SCSS */
$width: 555px;
div {
width: if($width > 300px, $width, null);
}
/* Compile to CSS */
div {
width: 555px;
}
Scss
복사
@if, @else, @else if
•
조건에 따른 분기 처리 가능
•
== JavaScript의 if-else문
/* SCSS */
$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 {
color: #fe9a2e;
}
Scss
복사
9. Loop (반복)
@for
•
스타일을 반복적으로 출력
•
== JavaScript의 for문
•
through와 to 종료 조건
◦
from a through b : a부터 b까지 반복 (b 포함)
◦
from a to b : a부터 b 직전까지 반복
/* SCSS */
/* 1부터 3까지 반복 (3번 반복) */
@for $i from 1 through 3 {
.through:nth-child(#{$i}) {
width: 20px * $i;
}
}
/* 1부터 3 직전까지 반복 (2번 반복) */
@for $i from 1 to 3 {
.to:nth-child(#{$i}) {
width: 20px * $i;
}
}
/* Compile to CSS */
.through:nth-child(1) {
width: 20px;
}
.through:nth-child(2) {
width: 40px;
}
.through:nth-child(3) {
width: 60px;
}
.to:nth-child(1) {
width: 20px;
}
.to:nth-child(2) {
width: 40px;
}
Scss
복사
@each
•
List 또는 Map 데이터를 반복할 때 사용
•
== JavaScript의 for-in / for-of문
/* SCSS */
// List
@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
// Map
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
#{$header} {
font-size: $size;
}
}
/* Compile to CSS */
.puma-icon {
background-image: url("/images/puma.png");
}
.sea-slug-icon {
background-image: url("/images/sea-slug.png");
}
.egret-icon {
background-image: url("/images/egret.png");
}
.salamander-icon {
background-image: url("/images/salamander.png");
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.2em;
}
Scss
복사
10. 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);
}
Scss
복사
