랄지 IT
SASS 본문
CSS는 프로젝트의 규모가 커지고 수정이 빈번히 발생함에 따라 쉽게 지저분해지고 유지보수도 어려워지는 단점도 가지고 있다.
Sass는 CSS pre-processor(전처리기)로서 CSS의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 CSS의 확장(extension)이다.
* Syntactically Awesome StyleSheets: 구문적으로 멋진 스타일시트
* 전처리기: 입력 데이터를 처리하여 다른 프로그램에 대한 입력으로서 사용되는 출력물을 만들어내는 프로그램
Sass의 기능
- 변수의 사용
- 조건문과 반복문
- Import
- Nesting
- Mixin
- Extend/Inheritance
Sass는 2006년 Ruby로 처음 개발되었고 이후 다양한 포팅 버전이 등장했다가 최근에 Dart Sass로 재구현되었다.
* 포팅: 프로그램이 원래 설계된 바와 다른 컴퓨팅 환경에서 동작할 수 있도록 하는 과정
브라우저는 Sass의 문법을 알지 못하기 때문에 Sass(.scss) 파일을 css 파일로 트랜스파일링(컴파일)하여야 한다.
아래의 절차를 따라서 sass 를 설치하거나 web 컨버터등을 활용할 수도 있다
* sass converter: www.sassmeister.com/
Sass 환경의 설치가 필요하다.
$ npm install -g sass
sass 파일을 생성하고, 경로를 지정한 뒤 트랜스파일링 하면 지정된 경로에 css 파일이 생성된다.
$ sass foo.scss:foo.css
-
foo.scss
$site_max_width: 960px;
#main {
width: 100%;
max-width: $site_max_width;
}
foo.css
#main {
width: 100%;
max-width: 960px;
}
-
특정 디렉터리 내의 모든 scss 파일을 css 파일로 일괄 트랜스파일링
$ sass src/sass:dist/css
package.json을 생성->수정
간단한 트랜스파일링
$ npm init -y
{
...
"scripts": {
"build:sass": "sass src/sass:dist/css"
},
...
}
$ npm run build:sass
watch 옵션은 scss 파일의 변경을 감지하여 css 파일을 자동 업데이트한다.
$ sass --watch src/sass:dist/css
Sass는 SASS 표기법(.sass)과 SCSS 표기법(.scss)이 있다.
Sass 3.0부터 CSS 친화적인 SCSS（Sassy CSS） 표기법이 기본 표기법이 되었다.
프로퍼티 값으로 사용할 수 있는 값에는 각각의 데이터 타입(Data type)이 존재한다.
숫자형, 문자열, boolean, null, list, map(map-get 함수로 객체처럼 사용)
Sass에서는 변수를 사용할 수 있다.
문자열, 숫자, 컬러(#aa443f) 등을 사전에 변수에 저장하고 필요할 때 불러 사용할 수 있다.
$site_max_width:960px;
$font_color:#333;
...
#main {
width: 100%;
max-width: $site_max_width;
}
변수에는 유효범위(scope)가 존재한다.
코드 블록 내에서 선언한 변수를 전역 변수로 지정하는 방법은 !global 을 사용하는 것이다.
#main {
$color: #333 !global; // 원래는 블록안에서만 사용(지역변수)->전역 변수가 된다
}
연산자를 사용할 수 있지만, 대상을 변환하여 연산할 수 없는 경우 에러를 출력한다.
%, em, rem, vh, vw, vmin, vmax과 같이 상대적인 값을 Sass는 알지 못한다.
따라서 상대적인 값을 갖는 단위의 연산은 동일한 단위를 갖는 값과의 연산만이 유효하다.
$width: 100px;
width: $width + 10em; // 100px + 10em => Error
width: 5% + 10%; // 15%
변수를 CSS의 /와 함께 사용하고자 하는 경우 #{}(Interpolation)를 사용한다.
p {
$font-size: 12px;
$line-height: 30px;
font: #{$font-size}/#{$line-height}; // 12px/30px
}
&는 부모요소를 참조하는 셀렉터이다.
a {
color: #ccc;
&.home {
color: #f0f;
}
&:hover {
text-decoration: none;
}
// & > span (X)
> span {
color: blue;
}
span {
color: red;
}
}
!default 는 할당되지 않은 변수의 초기값을 설정한다.
변수에 값이 할당되지 않았을 때 사용할 기본값을 지정한다.
변수에 값을 할당하면 !default와 같이 사용한 변수값은 무력화된다.
Nesting은 Sass의 유용한 확장 기능으로 선언을 중첩(nesting)하는 것이다.
너무 깊은 nesting은 가독성을 나쁘게 하고 셀렉터를 복잡하게 만든다. (적절하게 써야한다)
#navbar {
width: 80%;
height: 23px;
ul {
list-style-type: none;
}
li {
float: left;
a {
font-weight: bold;
}
}
}
부모 요소의 참조가 필요한 경우 &를 사용한다. 예를 들어, :hover 또는 ::before 등의 가상 클래스 선택자
nesting은 프로퍼티에도 사용할 수 있다.
.funky {
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
@import는 CSS 파일을 분리하여 개발할때 사용한다.
여러 개의 파일로 분할하는 것 또는 분할된 파일을 partial이라 하며 partial된 Sass 파일명의 선두에는 underscore(_)를 붙인다.
(_reset.scss, _module.scss, _print.scss)
예를 들어, “_foo.scss”라는 partial된 Sass 파일을 import하는 경우 아래와 같이 기술한다.
@import "foo";
@import는 top-level에서 사용하는 것이 일반적이지만 CSS rule 또는 @media rule 내에 포함시키는 것도 가능하다.
// _example.scss
.example {
color: red;
}
#main {
@import "example";
}
기존 스타일을 상속하고자 경우 @extend를 사용한다.
@media 안에서 외부의 선택자를 @extend할 수 없다. (@extend를 @media 블록과 같이 사용할 수 없다)
@extend의 사용은 가급적 자제하고 Mixin을 사용하는 것을 추천한다.
.error {
border: 1px #f00;
background-color: blue;
}
.seriousError {
@extend .error;
border-width: 3px;
}
프로그래밍 언어와 유사하게 제어문(조건, 반복)을 사용할 수 있다.
if(condition, if_true, if_false)
$type: ocean;
p {
color: if($type == ocean, blue, black); // color: blue;
}
@if…@else를 사용하면 조건 분기가 가능하다.
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
@for으로 반복문을 사용할 수 있다.
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
@each와 list 또는 map의 요소에 대해 반복을 실시한다.
// List @each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
// Map
// $header: h1, $size: 2em
// $header: h2, $size: 1.5em
// $header: h3, $size: 1.2em
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
#{$header} {
font-size: $size;
}
}
@while으로 반복문을 사용할 수 있다.
$i: 6;
@while $i > 0 {
.item-#{$i} {
width: 2em * $i;
}
$i: $i - 2;
}
Mixin은 Sass의 매우 유용한 기능으로 중복 기술을 방지하기 위해 사용 빈도가 높은 마크업을 사전에 정의하여 필요할 때에 불러 사용하는 방법이다.
@extend와 유사하나 프로그래밍 언어의 함수와 같이 인수를 전달받을 수 있다.
// 지름이 50px인 원
@mixin circle {
width: 50px; height: 50px; border-radius: 50%;
}
// 지름이 50px인 원을 위한 mixin을 include한 후 배경을 추가 지정
.box {
@include circle;
background: #f00;
}
매개변수 사용
@mixin circle($size) {
width: $size; height: $size * 2; border-radius: 50%;
}
.box {
@include circle(100px);
background: #f00;
}
Function은 mixin과 유사하나 반환값에 차이가 있다.
-
mixin : style markup을 반환
-
function : @return directive를 통하여 값을 반환
$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
}
#sidebar { width: grid-width(5); } // width: 240px;
CSS는 멀티 라인 주석 /* */만을 지원하지만 Sass는 /* */와 // 모두 사용할 수 있다.
한 줄 주석 //은 트랜스파일링 후 CSS에서 사라지고, 멀티 라인 주석은 CSS에 나타난다.
Sass Built-in function에는 다양한 내장 함수를 제공한다.
1. Number Functions
percentage(0.2) 숫자값을 %로 변환
round(10.4px) 소숫점 이하 반올림
ceil(10.4px) 소숫점 이하 올림
floor(10.4px) 소숫점 이하 절사
abs(-10px) 절대값 취득
2. Introspection Functions
type-of(100px) Data type 취득
unit(100) Data unit 취득
unitless(100) 값에 단위가 있는지 확인
comparable(2px, 1px) 2개의 값을 합산, 감산, 비교 가능한지 확인
3. String Functions
quote("foo") 따옴표 붙이기
unquote("foo") 따옴표 제거
4. List Functions
length(10px 20px 30px) 리스트의 요소수 취득
nth(10px 20px 30px, 1) 리스트의 n번째 요소 취득
index(1px solid red, solid) 요소의 index 취득
append(10px 20px, 30px) 리스트의 마지막에 단일 요소 추가
join(10px 20px, 30px 40px) 리스트와 리스트의 결합
zip(1px 1px 3px, solid dashed solid, red green blue) 복수의 리스트를 각자의 순서에 맞추어 재결합
5. Map Functions
// key로 value 취득
map-get(("foo": 1, "bar": 2), "foo") => 1
6. Color Functions
color: adjust-hue($base-color, 20%); 색상 변경
color: saturate($base-color, 20%); 채도 변경
color: darken($base-color, 10%); 휘도 변경
color: rgba($base-color, .7); 투명도(opacity) 변경
color: opacify($base-color, 0.3); alpha 연산(더 불투명)
color: transparentize($base-color, 0.25); alpha 연산(더 투명)
Tint & Shade: 흰색(tint)과 검정색(shade)의 값으로 혼합
color: tint($base-color, 10%);
color: shade($base-color, 10%);
출처: poiemaweb.com
- 1 Sass의 소개, 설치와 간단한 명령어 사용법
- 2 CSS를 프로그래밍 언어와 같이 작성할 수 있게 확장한 SassScript
- 3 Nesting, import, extend, 조건과 반복, Mixin, Function
- 4 Sass가 제공하는 기본 내장 함수