19.SCSS를 배워보자
1. SCSS란
-
SCSS란? : CSS의 전(예비)처리기기로, CSS가 동작하기 전에 사용하는 기능으로, C표준 CSS 보다 훨씬 많은 기능을 사용해서 편리하게 작성할 수 있습니다.
-
에러를 표시해준다.
-
다양한 문법을 사용할수 있다.
-
CSS를 간편하게 만들어버릴수도 있다.
-
-
하지만 웹에서는 직접 동작을 하지 않으므로, 웹에서 동작 가능한 표준의 CSS로 컴파일합니다.
2. CSS Preprocessors and Set up
- SCSS 설치 방법 : gulp를 활용한 SCSS 추가
3. SCSS의 Variables(변수) and Nesting(중첩)
-
(1)변수
- 1.css에서도 root를 통해 변수를 사용할수 있었지만, scss에서도 변수를 선언받아서 달러 표시로 받을수 있다.
-
언더바 varialbes scss
$red: #ce4647;
- style.scss
@import "_reset";
@import "_variables";
h1 {
color: $red;
}
- style.css
h1 {
color: #ce4647;
}
-
(2)Nesting(중첩)
-
scss
<body>
<h2>Title</h2>
<div class="box">
<h2>Another Title</h2>
</div>
</body>
h2 {
color: #ce4647;
}
.box {
margin-top: 20px;
&:hover {
background-color: green;
}
h2 {
color: blue;
&:hover {
color: red;
}
}
button {
color: red;
}
}
- scss —> css
.box {
margin-top: 20px;
}
.box:hover {
background-color: green;
}
.box h2 {
color: blue;
}
.box h2:hover {
color: red;
}
.box button {
color: red;
}
- 결론 : scss에서 작업을 하니 front 개발자 입장에서 코드도 간편해지고, 쉽게 작석할수 있게 되었다.
4. Mixins
-
Mixins란 : SCSS fucntionality(함수)를 만들어 재사용할 수 있도록 해준다.
-
언더바mixins.scss
@mixin link($color) {
text-decoration: none;
display: block;
color: $color;
}
- style.scss
@import "_mixins";
@import "_variables";
a {
margin-bottom: 10px;
&:nth-child(odd) {
@include link(blue);
}
&:nth-child(even) {
@include link(red);
}
}
- style.css
a {
margin-bottom: 10px;
}
a:nth-child(odd) {
text-decoration: none;
display: block;
color: blue;
}
a:nth-child(even) {
text-decoration: none;
display: block;
color: red;
}
4.1 Mixins 의 if 문
- 언더바mixins.scss
@mixin link($word) {
text-decoration: none;
display: block;
@if $word == "odd" {
color: blue;
} @else {
color: red;
}
}
- style.scss
@import "_mixins";
@import "_variables";
a {
margin-bottom: 10px;
&:nth-child(odd) {
@include link("even");
}
&:nth-child(even) {
@include link("odd");
}
}
- style.css
a {
margin-bottom: 10px;
}
a:nth-child(odd) {
text-decoration: none;
display: block;
color: red;
}
a:nth-child(even) {
text-decoration: none;
display: block;
color: blue;
}
4.2 Mixins 의 content
- 언더바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; //color : yellow
}
} @else if $device == "tablet" {
@media screen and (min-width: $minTablet) and (max-width: $maxTablet) {
@content; //color: green;
}
} @else if $device == "iphone-l" {
@media screen and (max-width: $minIphone) and (max-width: $maxIphone) and (orientation: landscape) {
@content; // font-size : 60px
}
} @else if $device == "ipad-l" {
@media screen and (min-width: $minTablet) and (max-width: $maxTablet) and (orientation: landscape) {
@content;
}
}
}
- style.scss
@import "_mixins";
h1 {
color: red;
@include responsive("iphone") {
color: yellow;
}
@include responsive("iphone-l") {
font-size: 60px;
}
@include responsive("tablet") {
color: green;
}
}
- style.css
h1 {
color: red;
}
@media screen and (min-width: 500px) and (max-width: 690px) {
h1 {
color: yellow;
}
}
@media screen and (max-width: 500px) and (max-width: 690px) and (orientation: landscape) {
h1 {
font-size: 60px;
}
}
@media screen and (min-width: 501px) and (max-width: 1120px) {
h1 {
color: green;
}
}
5. Extends
-
Extends 는 말 그대로 다른 코드를 확장 하거나 코드를 재사용하고 싶을때 사용하는것이다.
-
상속
-
언더바buttons.scss
%button {
border-radius: 7px;
font-size: 12px;
text-transform: uppercase;
padding: 5px 10px;
background-color: peru;
font-weight: 500;
}
- style.scss
@import "_buttons";
a {
@extend %button;
//상속을 받음(재사용)
text-decoration: none;
//코드 확장
}
button {
@extend %button;
border: none;
}
- style.css
a,
button {
border-radius: 7px;
font-size: 12px;
text-transform: uppercase;
padding: 5px 10px;
background-color: peru;
font-weight: 500;
}
a {
text-decoration: none;
}
button {
border: none;
}
Leave a comment