편의상 scss로 지칭
$ npm i -g sass
$ sass foo.sscss:foo.css
$ npm init
명령어로 파일 생성 {
"name": "natours",
"version": "1.0.0",
"description": "Landing page for natours",
"main": "index.js",
"scripts": {
"watch:sass":"sass sass/main.scss css/style.css -w",
},
"author": "",
"license": "ISC",
"devDependencies": {
"node-sass": "^6.0.1"
}
}
마지막 -w를 붙이면 scss가 변경이 될때마다 자동으로 트랜스파일링이 된다.
이제 $ npm run watch:sass
로 트랜스파일링이 가능하다.
SASS와 SCSS의 문법은 차이점이 있지만 본인은 SCSS가 더 직관적이고 사용하기 편하므로 SCSS문법 기준으로 작성을 하겠다.
7:1 패턴에 대해 알아보기 => https://sass-guidelin.es/ko/#section-37
_
를 붙인다. _
와 확장자는 생략 가능하다.//main.scss
@import 'abstracts/functions';
@import 'abstracts/mixins';
@import 'abstracts/variables';
기존의 CSS는 /* ... */
를 사용하였지만 scss는 Javascript 스타일의 주석도 //
사용이 가능하다.
데이터 | 설명 | 예시 |
---|---|---|
Numbers | 숫자 | 1, .82(0.82와 같음), 30px, 2rem |
Strings | 문자 | bold, absolute, "/img/nat-1.jpg" |
Colors | 색상 | black, #fff, rgba(0,0,0,.5) |
Booleans | 논리 | true, false |
Null | 프로퍼티값에 값이 null인 변수가 지정되면 트랜스파일링 되지 않는다. | null |
Lists | 공백이나 ,로 구분된 값의 목록 | (a, b, c), a b |
Maps | Key:value 형태 | (apple:a, orange:o, vaseline:v) |
.section .list{
padding:20px;
}
.section .list li {
color: red;
}
.section{
.list{
padding:20px;
li{
color: red;
}
}
.box {
font: {
weight: bold;
size: 20px;
};
margin: {
top: 10px;
right: 20px;
};
padding: {
top: 10px;
left: 2px;
};
`
중첩 안에서 &
를 사용하여 상위 선택자를 참조하여 선택
<!-- html -->
<header class='header'>
<div class="header__logo-box">
<p class='header__logo-box--paragraph'>nice</p>
<img class='header__logo' src="./img/logo-white.png" alt="logo-white">
</div>
<div class="header__text-box">
</div>
</header>
SCSS
.header{
padding: 3rem;
&__logo-box{
margin: 2rem;
&__paragraph{
color: red;
}
}
&__text-box{
background-color: #fff;
}
}
$color-primary: #55c57a;
$color-primary-light: #7ed56f;
$color-primary-dark: #28b485;
$grid-width:114rem;
$gutter-vertical:8rem;
$gutter-vertical-small:6rem;
.row{
width: $grid-width;
margin: $gutter-vertical 0;
color : $color-primary;
}
.row {
$color-primary: #55c57a;
bacground-color : $color-primary;
}
.header{
background-color : $color-primary;
}
#{$변수명}
을 사용하여 코드의 어디든지 변수값을 넣을 수 있다.
.col-1-of-2 {
width: calc((100% - #{$gutter-horizontal})/2);
}
$content : null;
$content: 'Non-null content' !default;
.row {
content : $content; // 'Non-null content'
}
산술 연산자와 비교 연산자는 Python이랑 같다.
px
단위로 연산을 한다. 상대적 단위(%
,em
,vw
) 등은 calc()
로 연산해야 한다.width: 50% - 20px; // 연산 불가
width: calc(50%-20px) // 가능
$width: 100px;
.row{
width: $width + 10 //110px
}
.header{
width: $width + 10in // 1060px
}
/
은 나눗셈의 의미가 아니라 값을 구분하는 의미를 갖기 대문에 /
연산자를 사용하기 위해 몇가지 조건이 필요하다.width: $width / 2; // 변수에 대해 사용 → width: 500px;
height: (500px / 2); // 괄호 내에서 사용 → height: 250px;
margin-left: 5px + 8px / 2px; // 다른 연산의 일부로서 사용 → margin-left: 9px;
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
@for $i from i through 3 {
.item-#{$i} { width: 2em * $i;}
}
// 트랜스 파일링 결과
.item-1 {
width: 2em;
}
.item-2 {
width: 4em;
}
.item-3 {
width: 6em;
}
@each $theme in $themes {
.section-#{$theme} {
background-color: map-get($colors, $theme);
}
}
//map 에서 반복을 할 때는, 일관성을 강제하기 위해 언제나 $key $value를 변수 이름으로 사용하길 권장한다.
@each $key, $value in $map {
.section-#{$key} {
background-color: $value;
}
}
@include mixin이름;
//mixin 생성
@mixin absCenter {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.row {
@include absCenter;
}
.row{
@include respond(phone){
margin: 5px;
}
}
@mixin respond($breakpoint) {
@if $breakpoint==phone {
@media only screen and (max-width: 37.5em) {
@content
};
}
@if $breakpoint==tab-port {
@media only screen and (max-width: 56.25em) {
@content
};
}