Sass
Sass(Syntactically Awesome Style Sheets)는 CSS의 단점을 보완하기 위한 Preprocessor(전처리 언어)이다.
Sass는 css를 변수, 함수, import, 상속 등의 기능 같은 프로그래밍 언어를 작성할 수 있는 문법들을 제공한다.
개발환경 세팅
웹 브라우저는 css 파일밖에 모르기 때문에 Sass로 코드를 짰으면 css 파일로 변환해 주는 변환기를 돌려 변환된 css 파일을 html 파일과 사용해야 한다.
node.js를 설치해서 변환하는 대신 VScode 에디터를 활용해 보자.
VScode의 extension 메뉴에서 Live Sass Compiler를 검색해서 높은 버전을 설치한다. (5.0.0 버전 이상)
Sass 파일은 파일명.scss로 생성하면 된다.
그러면 하단에 Watch Sass 버튼이 생기는데 누르면 현재 작성한 Sass 파일을 자동으로 css 파일로 변환해 준다.
(하단 바가 안 보이면 [View]-[Appearance]-[Status bar] 켜면 된다.)
코드는 scss 파일에 짜고 html에 넣을 때는 변환된 css 파일을 넣으면 된다.
참고로 .map 파일도 같이 생성될 수 있는데, 크롬 개발자 도구의 디버깅용이다.
Sass 문법 1 : 값을 저장해 놓고 쓰는 '변수'
css로 색상을 지정할 때 #2a4ce 이런 색상 코드를 사용한다.
외우기도 힘들고, 복붙해서 사용하기도 귀찮다.
Sass 파일에서는 이런 어려운 값들을 변수로 치환해서 사용할 수 있다.
(test.scss)
$main-color : #2a4c6e;
$sub-color : #333;
.text {
color : $main-color
}
.box {
background : $sub-color;
}1. 우선 Sass를 쓰려면 test.scss파일 만들고 거기에 작성한다. Sass 파일은 항상 파일 확장자가 .scss로 끝나면 된다.
2. $ 기호를 사용하여 변수 이름을 작명하고, 그 변수에 저장할 값을 오른쪽에 적으면 $변수을 쓸 때마다 오른쪽에 적은 값이 그 자리에 남는다.
이것이 Sass에서의 변수 문법이다.
- width, font-size, color 등 자주 쓰지만 기억하기 어려운 값들을 넣으면 매우 편리하다.
- $변수 이름은 영어, 한글 모두 사용이 가능하다.
- 많은 곳에서 공통적으로 사용하는 값들을 넣으면 좋다.
(▲ 왜냐하면 나중에 변경이 쉬워지기 때문이다. 예를 들어 여러 곳에서 사용 중인 사이트 메인 색을 #2a4c6e → #eee로 변경해야 한다고 하자. 색상코드만 붙여넣기 식으로 개발했다면 이 색을 전부 일일이 찾아서 바꿔야 할 것이다. 하지만 변수로 집어넣었다면 변수 정의만 $main-color : #eee로 바꾸면 다른 곳도 바뀐다. 이렇게 수정과 관리가 쉬워진다.)
- 사칙 연산도 가능하다.
덧셈, 뺄셈은 px 단위는 px 단위끼리, % 단위는 % 단위끼리 이렇게 단위를 맞춰 줘야 한다.
곱셈, 나눗셈은 보통 뒤에 단위를 쓰지 않고, 괄호 안에 작성해야 한다.
(참고 1) Sass없이 그냥 CSS 파일에도 var() 이용해서 변수 문법을 사용할 수 있다.
(참고 2) 그냥 CSS 파일에서도 calc() 라는 함수를 이용하면 사칙 연산을 사용할 수 있다.
:root {
--main-color : red;
--sub-color : skyblue;
--main-font-size : 20px;
}
.box {
background-color: var(--sub-color);font-size: var(--main-font-size);
width: calc(40% - 20px);
}
sass 파일과 scss 파일
.sass 파일도 만들 수 있는데 이 파일은 Sass 문법으로 코드를 짤 때 중괄호 생략이 가능하다.
.box font-size : 16px; .main-bg color : red
Sass 문법 2 : 셀렉터 대신 쓰는 Nesting
셀렉터를 많이 사용하다 보면 코드 자체가 복잡해진다.
ex) div.container < div p.first > span::after
셀렉터가 조금만 복잡해지면 처음 보는 사람은 이게 어떤 요소인지 제대로 파악하기 어렵다. 그래서 셀렉터의 외모를 개선할 수 있는 Nesting이라는 문법이 존재한다.
.navbar {
ul {
width: 100%;
}
li {
color : black;
}
}
/* Sass 문법 */
.navbar ul {
width: 100%;
}
.navbar li {
color: #333;
}
/* css 문법 */위의 두 코드는 같은 기능을 하는 코드이다.
중괄호 안에 또 셀렉터를 쓰면 그건 셀렉터상의 스페이스바 문법과 동일하게 작성 가능하다.
Nesting 문법을 사용하는 이유는 딱 하나, "UI들을 뭉텅이로 관리할 수 있어서" 이다.
navbar 내부에 속한 요소들을 저렇게 정리해 두면 나중에 관리가 편할 것이다.
navbar 내부에 있는 글자 하나를 바꾸고 싶다면 .navbar {} 중괄호 안에서만 찾으면 된다.
(참고 1) 그렇다면 div.container < div p.first > span::after 예제는 어떻게 써야 할까?
div.container {
> div {
p.first {
> span {
color : red;
}
}
}
}이렇게 작성하면 되는데, Nesting 할 때 중괄호를 3개, 4개 타고 들어가는 건 권장하는 방법이 아니다.
Sass 문법을 쓰든, 안 쓰든 셀렉터를 저렇게 길게 나열하는 건 좋은 관습이 아니므로 깔끔하게 클래스를 하나 선언하는 게 좋다.
(참고 2) 그러면 :hover 같은 건 붙이려면 어떻게 써야 할까?
.navbar {
:hover {
color : blue;
}
}
.navbar {
&:hover {
color : blue;
}
}
/* Sass 문법 */
.navbar :hover {
color: blue;
}
.navbar:hover {
color: blue;
}
/* css 문법 */위처럼 쓰면 .navbar :hover를, 아래처럼 쓰면 .navbar:hover를 잡게 된다.
아래처럼 &기호를 붙여 주면 셀렉터를 스페이스바 없이 붙일 수 있다.
(참고 3) Nesitng 문법은 꼭 써야 하는 게 아니다.
Sass 문법 3 : 이미 있는 클래스를 확장하는 @extend
이미 존재하는 속성들을 복붙하지 않고 사용할 수 있다.
@extend 그리고 복붙해야 할 클래스명을 뒤에 적어 주면 된다.
%btn {
font-size : 16px;
padding : 10px;
}
.btn-red {
@extend %btn;
background: red;
}
.btn-green {
@extend %btn;
background : green;
}
보통 비슷한 디자인의 요소들을 만들 때 많이 사용한다.
%기호는 . 대신 쓸 수 있는 임시 클래스인데, css 파일에서 클래스로 컴파일하고 싶지 않을 때 쓰는 기호이다.
컴파일하고 나면 %기호 안에 있는 것들은 흔적도 없이 사라진다.
Sass 문법 4 : 코드를 한 단어로 축약하는 @mixin
변수 문법과 매우 유사하다.
변수는 짧은 값 하나만 저장해서 쓸 수 있는 문법이었는데, @mixin은 스타일 여러 줄을 한 단어로 치환해서 사용 가능하다.
@mixin btn-style() {
font-size: 16px;
padding: 10px;
}
.btn-green {
@include btn-style();
background: green;
}
.btn-red {
@include btn-style();
background: red;
color: #fff;
}1. @mixin을 쓰고,
2. 이름을 하나 작명한 후 ( ){ } 붙이고,
3. 한 단어로 치환할 값들을 중괄호 안에 쭉 나열한다.
그런 다음 아래에 자유롭게 @include mixin이름으로 사용하면 mixin 안에 있던 코드가 그 자리에 복붙된다.
얼핏 보면 mixin과 extend 문법은 유사해 보인다.
extend가 조금 더 쓰기 편한 장점이 있는 것 말고는 거의 똑같아 보이기도 한다.
그런데 mixin만의 장점이 하나 있는데, 바로 내부에 묶어든 속성들에 함수처럼 매개변수를 만들 수 있다는 것이다.
@mixin btn-style($매개변수) {
font-size: 16px;
padding: 10px;
background: $매개변수
}
.btn-green {
@include btn-style(green);
}
.btn-red {
@include btn-style(red);
}코드를 이렇게 짜놓으면 .btn-green, .btn-red 클래스는 안에 어떻게 채워질까?
css로 변환하면 이렇게 채워진다.
이렇게 응용하면 파란 버튼, 노란 버튼 등 자유 자재로 만들 수 있다.
이것이 바로 mixin의 장점이라고 보면 된다.
1. 긴 코드를 한 단어로 축약할 수도 있고,
2. 코드 내부에 매개변수를 만들어 사용할 때마다 각각 다른 내용을 집어넣을 수 있다.
Sass 문법 5 : @use와 언더바 파일
css 파일마다 맨 위에 첨부하는 reset.css 같은 걸 자주 복붙한다면 import 문법을 사용하면 좋다.
복붙 시간을 줄여줄 수 있다.
@use 'reset.scss';▲ rest.scss 파일을 해당 scss파일에 전부 복붙할 수 있다.
파일이 다른 폴더 안에 있다면 '폴더명/reset.scss' 이런 식으로 경로를 수정해 주면 된다.
@use '_reset.scss';▲ scss파일을 작명할 때 언더바를 파일명 맨 앞에 붙이는 경우가 있다.
언더바 _기호를 파일명 맨 앞에 사용하면 "이 파일은 css파일로 다로 컴파일하지 말아라"라는 의미이다.
그냥 첨부용 파일이라는 것.
@use '_reset.scss';
reset.$변수명; /* 다른 파일의 변수 쓰는 법 */
@include reset.msinin이름(); /* 다른 파일의 mixin 쓰는 법 */▲ @use 해 온 다른 파일에 있던 $변수와 @mixin을 가져다 쓸 수도 있따.
이 경우에는 그냥 쓴느 게 아니라 파일명을 꼭 앞에 붙여야 한다.
응용하면 다른 파일에서 자주 사용할 법한 _button.scss, _navbar.scss 이런 파일들을 미리 다 만들어 놓고 첨부하는 식으로 css를 개발할 수 있다.
항상 @use 사용할 때는 파일 경로만 조심하면 된다.
* 이 포스팅은 코딩애플 강의를 토대로 작성하였습니다.