CSS가 너무 길어진다면
CSS를 약간 프로그래밍 언어스럽게 작성할 수 있는 SASS라는 preprocessor 를 이용하시면 됩니다.
SASS에선 변수, 함수, 반복문, 연산자 이런게 사용가능해서
SASS 문법으로 쉽게쉽게 짧게짧게 CSS를 작성할 수 있습니다.
작성한 뒤에 CSS로 컴파일만 해주시면 됩니다.
근데 그건 node-sass라는 라이브러리만 설치하시면 알아서 해줍니다. 설치해보도록 합시다.
설치부터 합시다 & SASS가 뭐냐면
터미널 켜시고
npm install node-sass
yarn add node-sass
둘중 하나 입력하시면 됩니다.
CSS는 주먹구구식으로 작성하면 되는 원초적인 스타일링 언어입니다.
근데 CSS를 조금 더 프로그래밍언어스럽게 다룰 수 있는 CSS 대체 문법이 존재합니다.
SASS라는 pre-processor 입니다. 이걸 이용하면 변수, 반복문, 함수 이런 문법으로 CSS를 작성할 수 있습니다.
그리고 SASS 문법으로 스타일을 쭉 작성하셨다면 다시 CSS로 컴파일을 하셔야합니다.
그건 node-sass 라는 라이브러리가 자동으로 알아서 해주기 때문에 그래서 방금 설치한겁니다.
SASS 파일을 생성해서 장착해봅시다
Detail.js에만 종속되는 CSS파일을 만들고 싶으면
src 폴더 내에 Detail.css 를 만들어 작성합니다.
그 후에 Detail.js에 방금 만든 css 파일을 import 해오시면 됩니다.
(Detail.css 파일)
.red {
color : red;
}
(Detail.js 파일)
import './Detail.css';
▲ 이런 식으로요. 이렇게 스타일링하는게 일반적입니다.
근데 SASS문법으로 작성하고 싶으시면 그냥 파일명만 .scss로 바꿔주시면 끝입니다.
(Detail.scss 파일)
.red {
color : red;
}
(Detail.js 파일)
import './Detail.scss';
그러면 scss 파일 내에선 SASS 문법을 가득 작성하실 수 있습니다.
그럼 CSS 파일로 자동으로 알아서 컴파일해줍니다.
그럼 SASS문법을 쓰는 이유를 알아봅시다.
SASS 문법 1. 변수 사용
scss파일에선 변수를 사용할 수 있습니다. 이렇게 사용합니다.
(Detail.scss)
$메인칼라 : #ff0000;
.red {
color : $메인칼라;
}
$변수명 : 집어넣을값;
이렇게 변수를 만들고 원하는 곳에서 사용가능합니다.
색상 뿐만 아니라 px값 %값 별걸 다 집어넣을 수 있습니다.
변수명은 당연히 한글도 잘 먹습니다. 요즘 한글 안되는 코딩 언어가 어딨습니까.
SASS 문법 2. @import
실은 그냥 CSS문법이긴 한데 많이 쓰니 넣어두겠습니다.
CSS 파일 간 import를 하실 수 있는 문법인데
@import './어쩌구.css';
이렇게 사용하면 끝입니다.
보통 CSS 아키텍쳐 이런거 잘하는 분들이 자주 하는데
평소에 CSS 파일 짜다보면 자주 사용하는 스타일들이 간혹 있습니다. 예를 들면..
body {
margin : 0;
}
div {
box-sizing : border-box;
}
이런 스타일들입니다. reset 이라고 보통 부르죠.
이런걸 다른 css (혹은 scss)파일에 저장해두고 필요해질 때마다 @import 해오시면 편리합니다.
(실은 그냥 우리 앱의 메인 CSS 파일에 집어넣으셔도 되긴합니다)
SASS 문법 3. nesting 문법
CSS 짜다보면 셀렉터를 길게 복잡하게 알아보기 힘들게 쓰는 경우가 있습니다.
scss파일 안에선 셀렉터 말고 이런 식으로도 개발이 가능합니다.
div.container h4 {
color : blue;
}
div.container p {
color : green;
}
▲ 이렇게 말고
div.container {
h4 {
color : blue;
}
p {
color : green;
}
}
▲ 이렇게 작성할 수 있습니다.
그냥 셀렉터를 옆으로 길게 나열하는게 아니라 안쪽에다가 작성합니다.
이게 nesting 문법입니다.
h4 {} 이렇게 안쪽에 쓰시면 띄어쓰기 셀렉터랑 같은 의미입니다.
굳이 이렇게 쓰는 이유는
-
셀렉터 해석이 쉽고
-
관련된 class끼리 뭉텅이로 관리하기 편해서 입니다.
SASS 문법 4. extends 문법
그 전에 간단한 알림창 UI를 디자인해봅시다.
(Detail.scss 파일)
.my-alert {
background : #eeeeee;
padding : 15px;
border-radius : 5px;
max-width : 500px;
width : 100%;
margin : auto;
}
.my-alert p {
margin-bottom : 0;
}
(Detail.js 파일)
function Detail(){
return (
<div>
<HTML많은곳/>
<div className="my-alert">
<p>재고가 얼마 남지 않았습니다</p>
</div>
</div> )
}
이렇게 하면 아주 예쁜 회색 알림창이 하나 생성됩니다. 끝!
Q. 근데 갑자기 빨간색, 파란색 등 다양한 배경색의 알림창이 또 필요해지면 어쩌죠?
초보) .my-alert 라는 클래스를 복붙해서 .my-alert2라는 클래스를 하나 더 만들어 수정합니다.
배운사람) 손수복붙하지 않고 @extend 문법을 이용합니다.
(Detail.scss 파일)
.my-alert {
background : #eeeeee;
padding : 15px;
border-radius : 5px;
max-width : 500px;
width : 100%;
margin : auto;
}
.my-alert2 {
@extend .my-alert;
background : yellow;
}
.my-alert p {
margin-bottom : 0;
}
이런 식입니다.
@extend 어쩌구
이렇게 사용하시면 어쩌구라는 클래스명에 들어있던 모든 내용을 그 자리에 복붙해줍니다.
CSS코드를 재사용할 일이 있을 때 손수 복붙 안하셔도되고 비슷한 UI 만들기도 쉬워집니다.
SASS 문법 5. @mixin / @include 문법
mixin은 그냥 함수만드는 문법입니다. (함수문법은 코드 축약하고 재사용할 때 많이 쓰죠?)
SASS에선 function 키워드 대신 @mixin 이라고 쓰시면 되고
중괄호 안에 내가 축약하고 싶은 코드들을 다 담으시면 됩니다.
그리고 함수를 부를 땐 @include 함수명() 이렇게 불러줍니다.
(Detail.scss 파일)
@mixin 함수() {
background : #eeeeee;
padding : 15px;
border-radius : 5px;
max-width : 500px;
width : 100%;
margin : auto;
}
.my-alert {
@include 함수()
}
.my-alert p {
margin-bottom : 0;
}
이런 식으로 사용합니다.
