출처 https://heropy.blog/2018/01/31/sass/
CSS Preprocessor란?
CSS 전처리기.
즉, CSS가 동작하기 전에 사용하는 기능
CSS Preprocessor를 사용하는 이유는?
CSS보다 간단한 표기법으로 CSS를 구조화하여 표현할 수 있다.
다른 팀원들과 작업 시, 구문의 수준 차이를 평준화할 수 있다.
CSS에 존재하지 않는 Mixin등의 기능을 활용하여, CSS 유지보수 편의성을 큰 폭으로 향상시킬 수 있다.
CSS Preprocessor의 종류
가장 많이 사용되는 것은 Less, Sass(SCSS), Stylus
SASS란?
SASS (Syntactically Awesome Style Sheets)
SASS의 3버전에서 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 CSS의 상위 집합이다.
즉, SCSS는 CSS와 거의 같은 문법으로 SASS 기능을 지원한다.
간단한 차이는 {} 와 ; 의 유무이다.
SASS의 기능
SASS는 다음과 같은 기능을 제공한다.
- 변수의 사용: 자주 쓰는 값을 미리 변수로 정해두고, 한 번에 교체할 수 있다.
- 조건문과 반복문
- Import : @import './경로/파일명.scss'를 사용해 다른 css파일을 불러올 수 있다.
- Nesting(중첩) : 한 클래스가 다른 곳에서 사용된다면 @at-root 지시자를 사용한다.
- Mixin: 재사용 가능한 기능을 만드는 방식. js 에서 함수 선언하듯 mixin으로 선언하고, 인자전달과 기본값 설정까지 가능하다.
- Extend/Inheritance: 값을 상속받아 사용 가능하다. 중첩되는 속성은 자식의 값으로 덮어쓰기 된다.
SASS와 SCSS의 비교
SASS
선택자의 유효범위를 들여쓰기로 구분한다.
.list
width: 100px
float: left
li
color: red
background: url("./img/jpg")
&:last-child
margin-right: -10pxSCSS
선택자의 유효범위를 {}로 구분한다.
.list {
width: 100px;
float: left:
li {
color:red;
background: url("./img/jpg");
&last-child {
margin-right: -10px;
}
}
}컴파일 방법
웹에서는 CSS만 동작한다. 따라서 웹에서 전처리기가 동작하게 하려면, 작성한 전처리기를 웹에서 동작 가능한 표준의 CSS로 컴파일 해야 한다. 컴파일하기 위해서는 컴파일러가 필요하다.
- SassMeister
간단한 코드는 SassMeister를 사용하여 실시간으로 SASS가 적용된 결과를 볼 수 있다.
- node-sass
node-szss는 Node.js 컴파일러인 LibSass에 바인딩한 라이브러리이다.
NPM으로 전역 설치하여 사용한다.
- Gulp
빌드 자동화 도구 Gul에서 gulpfile.js를 만들어 아래와 같이 설정할 수 있다.
- Webpack
- Parcel
웹 애플리케이션 번들러 Parcel은 매우 단순하게 컴파일할 수 있다.
주석
컴파일되는 주석
여러 줄 주석을 사용할 때 각 줄 앞에 * 을 붙여야 하고, * 의 라인을 맞춰야 한다.
코드를 쓸 때 열고 닫기를 하지 않기 때문에 정렬이 매우 중요하다.
/* 컴파일 할 주석 */컴파일 되지 않는 주석
// 컴파일되지 않는 주석데이터 종류
Numbers(숫자) ex - 1, 20px, 2em 등
String(문자)
Colors(색상 표현) ex - red, blue, #FFF, rgba(0,0,0,0) 등
Booleans(논리)
Nulls(아무 값 없음)
Lists(공백이나 , 로 구분된 값의 목록)
Maps(Key: Value 형태)
중첩(Nesting)
Sass의 중첩 기능을 사용하면 상위 선택자의 반복을 피하고 복잡한 구조를 보다 편리하게 작성할 수 있다.
SCSS
.container {
width: 100px;
.item {
width: 200px;
img {
width: 100%;
}
}
}CSS
.container {
width: 100px;
}
.container .item {
width: 200px;
}
.container .item img {
width: 100%;
}중첩 안에서 & 키워드를 사용하면 부모 선택자를 참조하여 치환한다.
SCSS
.btn {
position: absolute;
&.active {
color: red;
}
}
.list {
li {
&:last-child {
margin-right: 0;
}
}
}CSS
.btn {
position: absolute;
}
.btn.active {
color: red;
}
.list li:last-child {
margin-right: 0;
}다음과 같이 응용할 수도 있다.
SCSS
.btn {
&-small { font-size: 12px; }
&-medium { font-size: 14px }
&-large { font-size: 16px }
}CSS
.btn-small {
font-size: 12px;
}
.btn-medium {
font-size: 14px;
}
.btn-large {
font-size: 16px;
}중첩을 벗어날 때는 @at-root 키워드를 사용한다.
SCSS
.list {
$w: 100px;
$h: 50px;
li {
width: $w;
height: $h;
}
@at-root .box {
width: $w;
height: $h;
}
}CSS
.list li {
width: 100px;
height: 50px;
}
.box {
width: 100px;
height: 50px;
}
font-size, font-weight 등과 같이 동일한 네임 스페이스를 가지는 속성들은 다음과 같이 나타낼 수 있다.
SCSS
.box {
font: {
size: 10px;
weight: bold;
};
margin: {
top: 10px;
bottom: 20px;
};
padding: {
left: 30px;
right: 40px;
};
}CSS
.box {
font-size: 10px;
font-weight: bold;
margin-top: 10px;
margin-bottom: 20px;
padding-left: 30px;
padding-right: 40px;
}
변수(Variables)
반복적으로 사용되는 값을 변수로 지정할 수 있다.
변수 이름 앞에는 $ 를 붙인다.
변수에 변수를 재 할당할 수 있다.
변수는 선언된 블록 내에서만 유효범위를 가진다.
단 !global을 사용하면 변수의 유효범위를 전역으로 설정할 수 있다.
대신 기존에 사용하던 같은 이름의 변수가 있을 경우 값이 덮어질 수 있다.
!default 플래그는 변수의 초깃값을 설정한다.
할당되어 있는 변수에 !default를 설정하면 변수가 기존 할당 값을 사용한다.
기존 변수가 있을 경우 현재 설정하는 변수의 값을 사용하지 않겠다는 의미로 사용할 수 있다.
예를 들어 외부 라이브러리를 연결했더니 변수 이름이 내가 작성한 변수 이름과 겹친다면 덮어쓰기 되어 문제가 생긴다.
이 때 라이브러리의 변수 뒤에 !default 플래그가 있다면 기존 코드를 사용할 수 있다.
SCSS
/* 전역 변수 */
$bg-color: #eee;
$w: 200px;
$h: 200px;
.box1 {
width: $w;
height: $h;
background: $bg-color;
}
/* 변수 재 할당 */
$red: #ff0000;
$blue: #0000ff;
$color-primary: $blue;
$color-danger: $red;
.box2 {
color: $color-primary;
background: $color-danger;
}
/* 전역 설정 */
.box3 {
$color: #111 !global;
background: $color;
}
.box4 {
background: $color;
}
/* 초기값 설정 */
$color-active: red;
.box5 {
$color-active: blue !default;
background: $color-active;
}CSS
/* 전역 변수 */
.box1 {
width: 200px;
height: 200px;
background: #eee;
}
/* 변수 재 할당 */
.box2 {
color: #0000ff;
background: #ff0000;
}
/* 전역 설정 */
.box3 {
background: #111;
}
.box4 {
background: #111;
}
/* 초기값 설정 */
.box5 {
background: red;
}파일 분할(Partials)
프로젝트 규모가 커지면 파일들을 header나 side-menu 같이 각 기능과 부분으로 나눠 유지보수가 쉽도록 관리한다.
파일이 점점 많아지게 되면 유지보수나 성능 면에서 문제가 될 수 있다.
그래서 Sass는 Partials 기능을 지원한다.
파일 이름 앞에 _ 를 붙여 @import로 가져오면 컴파일 시 ~.css 파일로 컴파일하지 않는다.
연산(Operations)
- 산술연산자
+(더하기), -(빼기), *(곱하기), /(나누기), %(나머지)
- 비교 연산자
==(동등), !=(부등), <(~보다 큰), >(~보다 작은), <=, >=
- 논리 연산자
and(그리고), or(또는), not(부정)
재활용(Mixins)
Sass Mixins는 스타일 시트 전체에서 재사용 할 CSS 선언 그룹을 정의하는 기능이다.
Mixin으로 다양한 스타일을 만들어낼 수 있다.
선언하기 (@mixin) 와 포함하기 (@inclued)로 사용한다.
매개변수가 있을 때만 ($매개변수)와 (인수)를 입력한다.
Mixin과 include 선언
// SCSS
@mixin 믹스인이름($매개변수) {
스타일;
}
@include 믹스인이름(인수)
// Sass
=믹스인이름($매개변수)
스타일
+믹스인이름(인수)SCSS
/* mixin size */
@mixin size ($w, $h) {
width: $w;
height: $h;
}
.box1 {
@include size(100px, 100px);
}
.box2 {
@include size(100px, 100px);
}
/* mixin size2 */
@mixin size2 ( $w: 200px, $h: 200px ) {
width: $w;
height: $h;
}
.box3 {
@include size2;
}
.box4 {
@include size2($h: 300px);
}
/* large-text */
@mixin large-text {
font: {
font-size: 22px;
font-weight: bold;
color: orange;
}
color: orange;
&::after {
content: "!!";
}
span.icon {
background: url();
}
}
.box5 {
@include large-text;
}
h1 {
@include large-text;
}
CSS
/* mixin size */
.box1 {
width: 100px;
height: 100px;
}
.box2 {
width: 100px;
height: 100px;
}
/* mixin size2 */
.box3 {
width: 200px;
height: 200px;
}
.box4 {
width: 200px;
height: 300px;
}
/* large-text */
.box5 {
font-font-size: 22px;
font-font-weight: bold;
font-color: orange;
color: orange;
}
.box5::after {
content: "!!";
}
.box5 span.icon {
background: url();
}
h1 {
font-font-size: 22px;
font-font-weight: bold;
font-color: orange;
color: orange;
}
h1::after {
content: "!!";
}
h1 span.icon {
background: url();
}
인수의 기본값을 설정할 때는 다음과 같이 한다.
매개변수에 값을 설정하지 않으면 기본값이 적용된다.
SCSS
@mixin dash-line($width: 1px, $color: black) {
border: $width dashed $color;
}
.box1 {
@include dash-line;
}
.box2 {
@include dash-line(3px, orange);
}CSS
.box1 {
border: 1px dashed black;
}
.box2 {
border: 3px dashed orange;
}Mixin에 전달할 인수를 입력할 때 명시적으로 키워드를 입력하여 작성할 수 있다.
별도의 입력 순서를 필요로 하지 않아 편리하게 작성할 수 있다.
SCSS
@mixin position (
$p: absolute,
$t: null,
$b: null,
$l: null,
$r: null
) {
position: $p;
top: $t;
bottom: $b;
left: $l;
right: $r;
}
.absolute {
@include position($b: 10px, $l: 20px);
}
.fixed {
@include position(
fixed,
$t: 30px,
$r: 40px
);
}CSS
.absolute {
position: absolute;
bottom: 10px;
left: 20px;
}
.fixed {
position: fixed;
top: 30px;
right: 40px;
}
때로 입력할 인수의 개수가 불확실한 경우 가변 인수를 사용한다.
가변 인수는 매개변수 뒤에 ... 을 붙여준다.
SCSS
@mixin bg($width, $height, $bg-values...) {
width: $width;
height: $height;
background: $bg-values;
}
div {
@include bg(
100px,
20px,
url(),
url(),
url()
)
}CSS
div {
width: 100px;
height: 20px;
background: url(), url(), url();
}가변 인수를 전달할 값으로 사용하면 다음과 같다.
SCSS
@mixin font (
$style: normal,
$weight: normal,
$size: 16px,
$family: sans-serif
) {
font: {
style: $style;
weight: $weight;
size: $size;
family: $family
}
}
div {
// 매개변수의 순서와 개수에 맞게 전달한다
$font-values: italic, bold, 16px, sans-serif;
@include font($font-values...);
}
span {
// 필요한 값만 키워드 인수로 변수에 담아 전달한다
$font-values: (style: italic, size: 22px);
@include font($font-values...);
}
a {
// 필요한 값만 키워드 인수로 전달한다
@include font($weight: 900, $style: italic);
}CSS
div {
font-style: italic;
font-weight: bold;
font-size: 16px;
font-family: sans-serif;
}
span {
font-style: italic;
font-weight: normal;
font-size: 22px;
font-family: sans-serif;
}
a {
font-style: italic;
font-weight: 900;
font-size: 16px;
font-family: sans-serif;
}