sass_nomad coder
SCSS
// scss 파일명에 _가 붙어있다면 css로 컴파일되지 않길바란다는 의미!
### Variables 변수
$변수명
Nesting 중첩
: 타겟으로 하는 요소를 더 정확하게 해준다
html
<h2>title</h2>
<div class="box">
<h2>another title</h2>
</div>
<button>Byebye</button>기존 css
.box {margin-top: 20px}
.box h2 {color: blue;}
.box button {
color: red;
}
.box:hover {
background-color: green;
}nesting
.box {
margin-top: 20px;
h2 {color: blue;}
button {color: red;}
&:hover {background-color: green;}
}Mixins (js의 function과 비슷)
: 상황에 따라 다르게 코딩하고싶을 때 사용
: scss functionality를 재사용할 수 있도록 해준다
index.html
<body>
<a href="#">Google</a>
<a href="#">Google</a>
<a href="#">Google</a>
<a href="#">Google</a>
</body>_mixins.scss
@mixin link($word) {
text-decoration: none;
display: block;
@if $word == 'odd' {
color: green;
} @else {
color: orange;
}
}--> 어떤 종류의 인자(argument)를 mixin에 보내야할때 keyword @if와 @else를 통하여 css 결과를 바꾼다
style.scss
@import "mixins";
a {
margin-bottom: 10px;
&:nth-child(odd) {
@include link('odd')
}
&:nth-child(even) {
@include link('even')
}
}
scss에서
if-else나 color를 보내고 싶거나
property(속성)을 전달하고 싶을 때 ---> 매개변수와 같음
ex) @mixin link($color) {color: $color}
mixin을 사용
@content
style.scss
@import "mixins";
a {
@include responsive {
text-decoration: none;
}
}_mixins.scss
@mixin responsive {
color: blue;
@content;
}: @include responsive가 mixin의 @content가 된다.
Extend
: 같은 코드를 중복하고 싶지 않을 때 사용
: 다른 코드를 확장(extend)하거나, 코드를 재사용하고 싶을 때 사용
index.html
<body>
<a href="#">Log In</a>
<button>Log OUt</button>
</body>a 태그와 button의 결과가 동일하게 나오도록 해보자
(class명은 사용하지 않는다)
_button.scss
%button {
font-family: inherit;
border-radius: 7px;
font-size: 12px;
text-transform: uppercase;
padding: 5px 10px;
background-color: orchid;
color: white;
font-weight: 700;
}: page에서 분리해야하는 요소들이 많을 때 유용
ex) button, title, card, navigation
style.scss
@import "button";
a {
@extend %button;
text-decoration: none;
}
button {
@extend %button;
border: none;
}button 이라는 확장기능을 만들고 세부 style을 분리하여 사용
Responsive Mixins
반응형 웹을 위한 mixin
: 현재의 예시는 대략적인 이해를 위한 것이니 그대로 사용하지 말 것
index.html
<body>
<h1>Hello</h1>
</body>_mixins.scss
// variables 변수
$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: landscape) {
@content;
}
} @else if $device == 'ipad-l' { //아이패드 가로사이즈
@media screen and (min-width: $minTablet) and (max-width: $maxTablet) and (orientation: landscape) {
@content;
}
}
}
// portrait 세로
//landscape 가로style.scss
@import "mixins";
h1 {
color: red;
// .iphone
@include responsive('iphone') {
color: yellow;
}
@include responsive('ipad-l') {
font-size: 60px;
}
// tablet
@include responsive('tablet') {
color: green;
}
}
