SCSS
: Sass의 모든 기능을 지원하는 Superset
Sass(Syntehtically Awesome StyleSheets)
: CSS 전처리기
: 변수, 상속, 혼합, 중첩 등의 다양한 기능 제공
: CSS로 컴파이을 거친 뒤 실행 가능
Sass vs SCSS
- Sass: 들여쓰기 사용
Variables
: stylesheet에서 재사용하고 싶은 정보를 변수로 저장
: $ 문자를 사용하여 변수로 만듦
/* css */
:root {
--primary-color: #272727;
--accent-color: #ff652f;
--text-color: #fff;
}
// scss
$primary-color: #272727;
$accent-color: #ff652f;
$text-color: #fff;
// & 예제
.main {
@include flexCenter(row);
// operation 이 같아야 한다. %와 px 연산 불가
width: 80% - 40%;
margin: 0 auto;
&__paragraph {
font-weight: weight(bold);
&:hover {
color: pink;
}
}
}
/* 컴파일된 css 파일 */
.main {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
width: 40%;
margin: 0 auto;
}
.main__paragraph {
font-weight: 700;
}
.main__paragraph:hover {
color: pink;
}
// #{&} 예제
.main {
@include flexCenter(row);
// operation 이 같아야 한다. %와 px 연산 불가
width: 80% - 40%;
margin: 0 auto;
#{&}__paragraph {
font-weight: weight(bold);
&:hover {
color: pink;
}
}
}
/* 컴파일된 css 파일 */
.main {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
width: 40%;
margin: 0 auto;
}
.main .main__paragraph {
font-weight: 700;
}
.main .main__paragraph:hover {
color: pink;
}
$font-weights: (
"regular": 400,
"medium": 500,
"bold": 700
);
body {
font-weight: map-get($font-weights, bold)
}
// _variables.scss
$primary-color: #272727;
$accent-color: #ff652f;
$text-color: #fff;
$font-weights: (
"regular": 400,
"medium": 500,
"bold": 700
);
$mobile: 800px;
// _resets.scss
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
// main.scss
@import "./resets";
@import "./variables";
body {
background: $primary-color;
color: $text-color;
}
@function weight($weight-name) {
@return map-get($font-weights, $weight-name);
}
// 예제 1
@mixin flexCenter($direction) {
display: flex;
justify-content: center;
align-items: center;
flex-direction: $direction;
}
.main {
@include flexCenter(row);
width: 80%;
margin: 0 auto;
}
// 예제 2
@mixin theme($light-theme: true) {
@if $light-theme {
background: lighten($primary-color, 100%);
color: darken($text-color, 100%);
}
}
// $light-theme 생략 가능
// $light-theme:false인 경우 .light 선택자에 대한 css 코드 컴파일x
.light {
@include theme($light-theme: true);
}
// 예제 3
@mixin mobile {
@media (max-width: $mobile) {
@content;
}
}
.main {
@include flexCenter(row);
width: 80%;
margin: 0 auto;
...
@include mobile {
flex-direction: column;
}
}
.main {
width: 80%;
margin: 0 auto;
#{&}__paragraph1 {
font-weight: weight(bold);
&:hover {
color: pink;
}
}
#{&}__paragraph2 {
@extend .main__paragraph1;
&:hover {
color: $accent-color;
}
}
}
.main {
width: calc(80% - 40%);
}
.main {
width: 80% - 40%;
}