- 일반 CSS
- Sass
- CSS Module
- styled-components
일반 CSS
CSS를 작성할 때 가장 중요한 점은 CSS 클래스를 중복되지 않게 만드는 것이다.
중복을 방지하는 방식 두 가지
1. 이름 짓는 규칙
2. CSS Selector
Sass
Sass(Syntactically Awesome Style Sheets) (문법적으로 매우 멋진 스타일시트)는 CSS 전처리기로 복잡한 작업을 쉽게 할 수 있도록 해 주고, 스타일 코드의 재활용성을 높여 줄 뿐만 아니라 코드의 가독성을 높여서 유지 보수를 쉽게 해 준다.
Sass에는 두 가지 확장자 .scss와 .sass를 지원한다.
.sass
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}.sass 확장자는 중괄호와 세미콜론을 사용하지 않는다. 보통 .scss 문법이 더 자주 사용된다.
SassComponent.scss
// 변수 사용하기
$red: #fa5252;
$orange: #fd7e14;
$yellow: #fcc419;
$green: #40c057;
$blue: #339af0;
$indigo: #5c7cfa;
$violet: #7950f2;
// 믹스인 만들기(재사용되는 스타일 블록을 함수처럼 사용할 수 있음)
@mixin square($size) {
$calculated: 32px * $size;
width: $calculated;
height: $calculated;
}
.SassComponent {
display: flex;
.box {
// 일반 css에서는 .SassComponent .box와 마찬가지
background: red;
cursor: pointer;
transition: all 0.3s ease-in;
&.red {
// .red 클래스가 .box와 함께 사용되었을 때
background: $red;
@include square(1);
}
&.orange {
background: $orange;
@include square(2);
}
&.yellow {
background: $yellow;
@include square(3);
}
&.green {
background: $green;
@include square(4);
}
&.blue {
background: $blue;
@include square(5);
}
&.indigo {
background: $indigo;
@include square(6);
}
&.violet {
background: $violet;
@include square(7);
}
&:hover {
background: black;
}
}
}
SassComponent.js
import React from "react";
import "./SassComponent.scss";
const SassComponent = () => {
return (
<div className="SassComponent">
<div className="box red" />
<div className="box orange" />
<div className="box yellow" />
<div className="box green" />
<div className="box blue" />
<div className="box indigo" />
<div className="box violet" />
</div>
);
};
export default SassComponent;
결과
utils 함수 분리하기
여러 파일에서 사용될 수 있는 Sass 변수 및 믹스인은 다른 파일로 따로 분리하여 작성한 뒤 필요한 곳에서 쉽게 불러와 사용할 수 있다.
src> styles > utils.scss 파일 생성 후 기존 SassComponent.scss에 작성했던 변수와 믹스인을 잘라내 이동시킨다.
utils.scss 파일에서 선언한 변수와 믹스인을 SassComponent.scss에서 사용하기 위해
@import './styles/utils';@import 구문 사용
sass-loader 설정 커스터마이징
만약 프로젝트에 디렉터리를 많이 만들어서 구조가 깊어졌다면 해당 파일에서는 다음과 같이 상위 폴더로 한참 거슬러 올라가야 한다는 단점이 있다.
@import '../../../styles/utils';웹팩에서 Sass를 처리하는 sass-loader의 설정을 커스터마이징하여 해결할 수 있다.
create-react-app으로 만든 프로젝트는 세부 설정이 모두 숨겨져 있다.
이를 커스터마이징하려면 프로젝트 디렉터리에서 yarn eject (또는 npm run eject) 명령어를 통해 세부 설정을 밖으로 꺼내 줘야 한다.
이 명령어는 git에 커밋되지 않은 변화가 있다면 진행되지 않아서 먼저 커밋해 주고 실행한다.
yarn eject 후 프로젝트 디렉터리에 config 디렉터리가 생성되었다.
// webpack.config.js - sassRegex 찾기
{
test: sassRegex,
exclude: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
mode: 'icss',
},
},
'sass-loader'
),
sideEffects: true,
},다음과 같이 수정한다.
// webpack.config.js - sassRegex 찾기
{
test: sassRegex,
exclude: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
mode: 'icss',
},
}).concat({
loader: require.resolve('sass-loader'),
options: {
sassOptions: {
includePaths: [paths.appSrc + '/styles']
},
sourceMap: isEnvProduction && shouldUseSourceMap,
}
}),
sideEffects: true,
},이제 utils.scss 파일을 불러올 때 현재 수정하고 있는 scss파일 경로가 어디에 위치하더라도 상대 경로를 입력할 필요 없이 styles 디렉터리 기준 절대 경로를 사용해 불러 올 수 있다.
@import "utils.scss";새 파일을 생성할 때마다 utils.scss를 매번 포함시키는 게 귀찮을 때는?
-> sass-loader의 data 옵션을 설정한다. data 옵션을 설정하면 Sass 파일을 불러올 때마다 코드의 맨 윗부분에 특정 코드를 포함시켜 준다.
// options에 추가
prependData: `@import 'utils';`prependData가 아닌
additionalData로 해주어야 한다
node_modules에서 라이브러리 불러오기
Sass의 장점 중 하나는 라이브러리를 쉽게 불러와서 사용할 수 있다는 점이다.
설치한 라이브러리를 사용하는 가장 기본적인 방법은 node_modules까지 들어가서 불러오는 방법이다.
@import '../../../node_modules/library/styles';이보다 더 쉬운 방법은 다음과 같이 물결 문자(~)를 사용하는 방법
@import '~library/styles';물결 문자를 사용하면 자동으로 node_modules에서 라이브러리 디렉터리를 탐지하여 스타일을 불러올 수 있다.
Sass 라이브러리 include-media 와 open-color 설치 후 라이브러리 불러오기
@import '~include-media/dist/include-media';
@import '~open-color/open-color';