SCSS에서 variable 사용하기
SCSS 폴더에 variable 파일 생성.
(파일 생성시, 파일 이름 앞에 "_" 넣기)
ex) _variables.css
- 이때, "_"는 CSS로 변하는 걸 원치 않는 다는 의미이다.
즉, SCSS만을 위한 파일이라는 의미이다.
variable 파일 안에 variable 작성하기.
$variable name: value;
ex) $color: blue;
Nesting
코드를 좀 더 정확하게 만들어 준다.
즉, 타겟하는 element를 더 정확하게 해준다.
ex)
.box { margin-top: 20px; } .box h2 { color: blue; } .box button { color: red; } /* 위와 같이 부모가 box인 자식 요소의 css 코드가 있을 때, nesting을 이용해 아래와 같이 간단한 코드 작성을 할 수 있다. */.box { margin-top: 20px; h2 { color: blue; } button { color: red; } }
ex)
.box { margin-top: 20px; h2 { color: blue; } button { color: red; } } .box:hover{ background-color: green; } /* state가있는 코드를 nesting을 이용해 작성할 때, 아래의 코드를 살펴보자. */.box { margin-top: 20px; &:hover { background-color: green; } h2 { color: blue; } button { color: red; } } /* & = .box */
mixin
SCSS functionality를 재사용 할 수 있게 한다.
SCSS에서 mixin 사용하기
SCSS 폴더에 mixin 파일 생성.
(파일 생성시, 파일 이름 앞에 "_" 넣기)
ex) _mixins.css
- 이때, "_"는 CSS로 변하는 걸 원치 않는 다는 의미이다.
즉, SCSS만을 위한 파일이라는 의미이다.
mixin 파일 안에 mixin 작성하기.
@mixin name { 코드 작성 }
ex) /* mixins.scss */ @mixin sexyTitle { color: blue; font-size: 30px; margin-bottom: 12px; }/* styles.scss */ h2 { @include sexyTitle(); } => 위와 같이 변수처럼 활용.
mixin과 variable 함께 활용하기.
= mixin이 variable을 허용하게 하는 방법.
/* mixins.scss */ @mixin link($color) { text-decoration: none; display: block; color: $color; }/* styles.scss */ a { @include link(); } a:nth-child(odd) { @include link(blue); } a:nth-child(even) { @include link(red); } /* 위의 코드를 더 간편하게 작성하는 법. */ a { &:nth-child(odd) { @include link(blue); } &:nth-child(even) { @include link(red); } }
if 활용하기.
/* mixins.scss */ @mixin link($word) { text-decoration: none; display: block; @if $word == “odd” { color: blue; } @else { color: $color; } }/* styles.scss */ a { &:nth-child(odd) { @include link("odd"); } &:nht-child(even) { @include link("even"); } }
mixin으로 반응형 디자인 만들기.
@content
/* mixins.scss */ @mixin responsive { @content; }/* styles.css */ a { @includ responsive{ text-decoration: none; /* -> 이게 @content가 된다. */ } }
ex)
/* mixins.scss */ /* 변수 정의 */ $minIphone: 500px; $maxIphone: 690px; $minTablet: $minIphone + 1; $maxTablet: 1120px; / @mixin responsive($device) { @if $device == “iphone” { @media screen and (min-width: $minIphone) and (max-width: $maxIphone){ @content; } } @else if $device == “tablet” { @media screen and (min-width: $minTablet) and (max-width: $maxTablet){ @content; } } @else if $device == “iphone-l” { @media screen and (min-width: $minIphone) and (max-width: $maxIphone) and (orientation: lendscape){ @content; } } @else if $device == “ipad-l” { @media screen and (min-width: $minTablet) and (max-width: $maxTablet) and (orientation: lendscape){ @content; } }<body> <h1>hello</h1> </body>/* styles.scss */ h1 { color: red; @include responsive(“iphone”){ color:yellow; } @include responsive(“iphone-1”){ font-size: 60px; } @include responsive(“tablet”){ color:green; } @include responsive(“iphone”){ color:yellow; } }
Extend
같은 코드를 중복하고 싶지 않을 때 사용한다.
= 다른 코드를 확장(extend)하거나 재사용하고 싶을 때 사용한다.
%name { 코드 작성 }
ex) <body> <a href="#">Log In</a> <button>Log Out</button> </body>/* _common.scss */ %common { border-radius: 7px; font-size: 12px; text-transform: uppercase; padding: 5px 10px; }/* styles.scss */ @import "_common"; / a { @extend %common; } button { @extend %common; }
