SCSS
css 전처리기
css를 그냥 사용해도 물론 괜찮지만 불편하다. 그래서 확장된 기능을 제공하는 SASS,SCSS등의 CSS전처리기들을 사용한다. 하지만 이렇게 만든 파일을 그대로 사용할 순 없다. 실제 브라우저에서 동작하는 css파일로 컴파일해서 바꿔주게된다. 이렇게 하면 css전처리기가 제공하는 다양한 기능을 사용해 개발할 수 있다.
Sass와 SCSS의 차이?
Sass가 먼저 있고 Sass의 3버전에 새롭게 등장했다는것을 보면 기존의 불편했던점을 보완한 것 같다.
SCSS는 Sass의 기능을 모두 지원하지만 css와 문법이 거의 동일한 CSS의 상위집합이다. 마치 TS같다.
간단한 예로 Sass는 들여쓰기를 기준으로 선택자의 유효범위를 구분하지만, SCSS는 중괄호를 사용한다. 개인적으로도 중괄호로 구분하는것이 더 보기 쉽다.
또한 Mixins 기능 또한
SCSS에서는 @mixin과 @include로 사용했지만
Sass에서는 =,+ 기호로 사용한다.
Sass
=border-radius($radius)
-webkit-border-radius: $radius
-moz-border-radius: $radius
-ms-border-radius: $radius
border-radius: $radius
.box
+border-radius(10px)SCSS
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }기능
중첩
여러 클래스를 함께 선택 할 때 사용할 수 있다.
.section {
width: 100%;
.list {
padding: 20px;
li {
float: left;
}
}
}이렇게 쓰는 것은
.section {
width: 100%;
}
.section .list {
padding: 20px;
}
.section .list li {
float: left;
}와 같다.
& : Ampersand(상위 선택자 참조)
상위 선택자(부모) 를 참조하여 치환한다.
.btn {
position: absolute;
&.active {
color: red;
}
}여기서 &는 자신의 상위 선택자인 .btn이 된다.
따라서 &.active는 .btn.activ를 가리킨다.
다양한 선택자와 함께 사용할 수 있어 유용하다.
@at-root : 중첩 벗어나기
중첩에서 벗어날 때 @at-root를 사용한다.
@at-root 뒤에 적힌 style들은 중첩문이 아닌 문서의 root 제일 바깥쪽에 적힌 것처럼 동작하게 된다. 이게 어떻게 쓰일지 궁금했는데 여러 변수들을 함께 사용하면서 실제 중첩되는 관계는 아닌 대상들에 대해 사용된다고 한다.
@at-root <selector> {... }
이렇게 선택자를 붙여 사용할 수도 있고@at-root { ... }
이렇게 중괄호 안의 모든 구문을 root로 중첩 밖으로 보낼 수도 있다.
SCSS
.list {
$w: 100px;
$h: 50px;
li {
width: $w;
height: $h;
}
@at-root .box {
width: $w;
height: $h;
}
}CSS
.list li {
width: 100px;
height: 50px;
}
.box {
width: 100px;
height: 50px;
}중첩 속성
margin-top, margin-left, font-weight, font-size등과 같이 시작하는 이름은 동일하지만 뒤에 다양한 속성이 붙는 경우 이를 묶어서 중첩 속성으로 처리할 수 있다
.box {
font: {
weight: bold;
size: 10px;
family: sans-serif;
};
margin: {
top: 10px;
left: 20px;
};
padding: {
bottom: 40px;
right: 30px;
};
}변수
값을 저장해서 반복적으로 사용할 수 있는 가장 유용하다고 생각하는 변수 기능이다.
$변수이름 : 속성값;으로 사용할 수 있다
$color-primary: #e96900;
$url-images: "/assets/images/";
$w: 200px;
.box {
width: $w;
margin-left: $w;
background: $color-primary url($url-images + "bg.jpg");
}css module
강의에서 리액트 컴포넌트의 클래스 이름을 scss파일에서 import해서 사용하는것을 봤는데 굉장히 신기했고 그것이 css module의 기능이었다.
css 모듈을 사용하면 css에서 클래스를 사용할 때 클래스가 중첩되는것을 완벽히 방지할 수 있다.
사용시 파일이름은 filename.module.css로 하면 된다
예를 들어 Box 컴포넌트와 css파일
- Box.js
import React from "react";
import styles from "./Box.module.css";
function Box() {
return <div className={styles.Box}>{styles.Box}</div>;
}
export default Box;- Box.modules.css
.Box {
background: black;
color: white;
padding: 2rem;
}이렇게 두 파일을 만들어 사용한다고 했을 때,
import styles from "./Box.module.css";해서 styles로 import해오고
<div className={styles.Box}>{styles.Box}</div>;이렇게 className에 styles.Box로 해당하는 클래스의 이름을 전달해준다.
이렇게 하면 클래스이름이 Box 문자 그대로가 되는것이 아니라, 고유한 이름이 새로 생성되기 때문에 실수로 다른 곳에서 사용한 css 클래스 이름과 중복되는 일이 없다.
cra로 생성한 경우 별도로 css module을 위한 도구를 설치할 필요는 없고 webpack의 css-loader가 지원해주어 그냥 사용할 수 있다.
후기
그동안 styled-components를 사용하며 알게모르게 사용했던 많은 기능들이 사실은 css가아닌 Sass, SCSS의 문법인 경우가 많았다. 그동안 js에 집중하긴 했지만 style을 작성하는 방법에 대해 너무 고민이 없었던 것 같다. SCSS가 손에 익으면 더 효율적이고 빠르게 코드를 만들 수 있을것같다.
아직 모르는 사용법이 많은데 앞으로 조금씩 채워나가야겠다.
도움
-
SCSS
https://heropy.blog/2018/01/31/sass/https://sass-lang.com/documentation/at-rules/at-root
https://abcdqbbq.tistory.com/53
