CSS
Cascading Style Sheets - 종속형 시트
CSS 전처리기
- CSS 전처리기는 전처리기가 가진 특별한 구문으로 CSS를 생성하도록 하는 프로그램이다.
- 프로젝트가 커질 수록 유지 보수 측면에서 힘들어진다. 이를 해결하기 위해 CSS 전처리기를 사용한다.
- 인기있는 CSS 전처리기에는 SASS, LESS, Stylus, PostCSS가 있다.
Sass vs SCSS?
Sass 전처리기는 SCSS와 Sass 두 가지 구문을 지원한다.
문법적인 차이가 있을 뿐이다.
SASS(Syntactically Awesome Style Sheets), SCSS(Sassy CSS)
- CSS를 더 효율적으로 작성할 수 있게 도와준다.
- SASS, SCSS로 작성된 파일들은 곧바로 웹에 적용될 수 없기 때문에 컴파일 과정을 거쳐 CSS 파일로 변환해 사용하게 된다.
제공하는 기능 (SCSS 구문 사용)
- 변수 할당: 색깔, 폰트, 어느 CSS 값이든 재사용하고 싶은 값을 저장할 수 있다.
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}- 중첩 구문: 가독성이 좋아진다.
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}- 모듈화:
@use룰에 따라 파일을 나눌 수 있다.
// _base.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}// styles.scss
@use 'base';
.inverse {
background-color: base.$primary-color;
color: white;
}- 믹스인: 믹스인은 재사용하고 싶은 CSS 선언의 그룹을 만들어준다. 함수처럼 dafault parameter를 지정할 수 있고, parameter를 받아서 속성을 부여할 수 있다.
@mixin theme($theme: DarkGray) {
background: $theme;
box-shadow: 0 0 1px rgba($theme, .25);
color: #fff;
}
.info {
@include theme;
}
.alert {
@include theme($theme: DarkRed);
}
.success {
@include theme($theme: DarkGreen);
}- 확장, 상속:
@extend를 사용해 CSS 속성 집합을 상속받을 수 있다.
/* This CSS will print because %message-shared is extended. */
%message-shared {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
// This CSS won't print because %equal-heights is never extended.
%equal-heights {
display: flex;
flex-wrap: wrap;
}
.message {
@extend %message-shared;
}
.success {
@extend %message-shared;
border-color: green;
}
.error {
@extend %message-shared;
border-color: red;
}
.warning {
@extend %message-shared;
border-color: yellow;
}- 연산자: 여러 수학적 기능을 사용할 수 있다.
@use "sass:math";
.container {
display: flex;
}
article[role="main"] {
width: math.div(600px, 960px) * 100%;
}
aside[role="complementary"] {
width: math.div(300px, 960px) * 100%;
margin-left: auto;
}참고
