11.1 Sass (Syntactically Awesome Stylesheets)
CSS 전처리기는 CSS의 기능을 확장하고 스타일 작성 과정을 간소화할 수 있는 도구야. 변수, 중첩 규칙, mixin과 함수 같은 기능을 제공해 코드가 더 모듈화되고 재사용 가능하며 쉽게 유지 보수할 수 있어. 오늘은 가장 인기 있는 CSS 전처리기인 Sass, LESS, Stylus를 살펴보자.
Sass는 가장 인기 있는 CSS 전처리기 중 하나야, 스타일링에 유용한 많은 기능을 추가해준단다.
Sass 설치하기
Sass는 npm을 통해 설치할 수 있어:
Terminal
npm install -g sass
Sass의 주요 기능
1. 변수
Sass에서 변수는 재사용할 수 있는 값을 저장할 수 있게 해줘:
HTML
<html>
<head>
<style>
body {
color: #333;
}
</style>
</head>
<body>
<p>문단 1</p>
<p>문단 2</p>
</body>
</html>
Sass
$primary-color: #333
body
color: $primary-color
2. 중첩 규칙
중첩 규칙은 CSS를 더 계층적인 스타일로 작성할 수 있게 해줘:
HTML
<html>
<head>
<style>
nav {
background: #eee;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
color: tomato;
}
</style>
</head>
<body>
<nav>
<ul>
<li>항목 1</li>
<li>항목 2</li>
<li>항목 3</li>
</ul>
</nav>
</body>
</html>
Sass
nav
background: #eee
ul
margin: 0
padding: 0
list-style: none
li
color: tomato
3. 믹시
믹시는 다른 규칙에 포함될 수 있는 스타일 그룹을 만들 수 있게 해줘:
HTML
<html>
<head>
<style>
.box {
width: 256px;
min-height: 200px;
border-radius: 10px;
border: 2px solid green;
}
</style>
</head>
<body>
<div class="box">콘텐츠</div>
</body>
</html>
Sass
@mixin border-radius($radius)
-webkit-border-radius: $radius
-moz-border-radius: $radius
border-radius: $radius
.box
@include border-radius(10px)
border: 2px solid green
width: 256px
min-height: 200px
4. 상속
상속은 한 셀렉터가 다른 셀렉터의 스타일을 상속받게 해줘:
HTML
<html>
<head>
<style>
.box {
min-height: 120px;
}
.box:not(:last-child) {
margin-bottom: 5px;
}
.info, .success, .warning {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
background-color: #cfc;
}
.warning {
background-color: #fc9
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box info">정보</div>
<div class="box success">성공</div>
<div class="box warning">경고!</div>
</div>
</body>
</html>
Sass
%message
border: 1px solid #ccc
padding: 10px
color: #333
.box
min-height: 120px
&:not(:last-child)
margin-bottom: 5px
.info
@extend %message
.success
@extend %message
background-color: #cfc
.warning
@extend %message
background-color: #fc9
5. 함수
HTML
<html>
<head>
<style>
body {
font-size: 1.125rem;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cupiditate esse libero veritatis voluptatem?
Aliquam atque laboriosam porro recusandae totam.
</p>
</body>
</html>
Sass
@function px-to-rem($px, $base-font-size: 16px)
@return ($px / $base-font-size) * 1rem;
body
font-size: px-to-rem(18px);
Sass 컴파일
Sass를 CSS로 컴파일하는 명령어:
Terminal
sass style.scss style.css
11.2 LESS
LESS 설치하기
LESS는 npm을 통해 설치할 수 있어:
Terminal
npm install -g less
LESS의 주요 기능
1. 변수:
HTML
<html>
<head>
<style>
body {
color: #333;
}
</style>
</head>
<body>
<p>문단 1</p>
<p>문단 2</p>
</body>
</html>
LESS
@primary-color: #333;
body {
color: @primary-color;
}
2. 중첩 규칙:
HTML
<html>
<head>
<style>
nav {
background: #eee;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
color: tomato;
}
</style>
</head>
<body>
<nav>
<ul>
<li>항목 1</li>
<li>항목 2</li>
<li>항목 3</li>
</ul>
</nav>
</body>
</html>
LESS
nav {
background: #eee;
ul {
margin: 0;
padding: 0;
list-style: none;
li {
color: tomato;
}
}
}
HTML
<html>
<head>
<style>
.box {
width: 256px;
min-height: 200px;
border-radius: 10px;
border: 2px solid green;
}
</style>
</head>
<body>
<div class="box">콘텐츠</div>
</body>
</html>
3. 믹시:
LESS
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
.box {
.border-radius(10px);
border: 2px solid green;
width: 256px;
min-height: 200px;
}
4. 상속:
LESS는 부모를 참조하기 위해 "&" 기호를 사용해.
HTML
<html>
<head>
<style>
button:hover {
background-color: #555;
}
</style>
</head>
<body>
<button>버튼</button>
</body>
</html>
LESS
.button {
&:hover {
background-color: #555;
}
}
5. 함수:
LESS는 색상, 숫자 및 문자열과 작업하기 위한 함수를 지원해.
HTML
<html>
<head>
<style>
body {
font-size: 1.125rem;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cupiditate esse libero veritatis voluptatem?
Aliquam atque laboriosam porro recusandae totam.
</p>
</body>
</html>
LESS
@base: 16px;
.font-size(@size) {
font-size: (@size / @base) * 1rem;
}
body {
.font-size(18px);
}
LESS 컴파일
LESS를 CSS로 컴파일하는 명령어:
Terminal
lessc style.less style.css
11.3 Stylus
Stylus는 간결한 구문과 여러 유용한 기능을 제공하는 유연하고 강력한 CSS 전처리기야.
Stylus 설치하기
Stylus는 npm을 통해 설치할 수 있어:
Terminal
npm install -g stylus
Stylus의 주요 기능
1. 변수:
HTML
<html>
<head>
<style>
body {
color: #333;
}
</style>
</head>
<body>
<p>문단 1</p>
<p>문단 2</p>
</body>
</html>
Stylus
primary-color = #333
body
color primary-color
2. 중첩 규칙:
HTML
<html>
<head>
<style>
nav {
background: #eee;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
color: tomato;
}
</style>
</head>
<body>
<nav>
<ul>
<li>항목 1</li>
<li>항목 2</li>
<li>항목 3</li>
</ul>
</nav>
</body>
</html>
Stylus
nav
background #eee
ul
margin 0
padding 0
list-style none
li
color tomato
3. 믹시:
HTML
<html>
<head>
<style>
.box {
width: 256px;
min-height: 200px;
border-radius: 10px;
border: 2px solid green;
}
</style>
</head>
<body>
<div class="box">콘텐츠</div>
</body>
</html>
Stylus
border-radius(radius)
-webkit-border-radius radius
-moz-border-radius radius
border-radius radius
.box
border-radius(10px)
border 2px solid green
width 256px
min-height 200px
4. 상속:
Stylus는 상속을 위해 @extend를 사용해.
HTML
<html>
<head>
<style>
.box {
min-height: 120px;
}
.box:not(:last-child) {
margin-bottom: 5px;
}
.info, .success, .warning {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
background-color: #cfc;
}
.warning {
background-color: #fc9
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box info">정보</div>
<div class="box success">성공</div>
<div class="box warning">경고!</div>
</div>
</body>
</html>
Stylus
.message
border 1px solid #ccc
padding 10px
color #333
.info
@extend .message
.success
@extend .message
background-color #cfc
.warning
@extend .message
background-color #fc9
5. 함수:
Stylus는 재사용 가능한 함수를 만들 수 있게 해줘.
HTML
<html>
<head>
<style>
body {
font-size: 1.125rem;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cupiditate esse libero veritatis voluptatem?
Aliquam atque laboriosam porro recusandae totam.
</p>
</body>
</html>
Stylus
px-to-rem(px, base-font-size = 16px)
px / base-font-size * 1rem
body
font-size px-to-rem(18px)
Stylus 컴파일
Stylus를 CSS로 컴파일하는 명령어:
Terminal
stylus style.styl
GO TO FULL VERSION