sass는 기존 css에 약간의 기능을 더한 것이며, 컴파일 하여 CSS를 사용할 수 있게 하는 일종의 도구라고 볼 수 있다. 이 글에서는 기본적인 문법 및 컴파일 방법에 대해 알아보도록 한다.
1. 셀렉터 중첩
1
2
3
4
5
6
7 | .content {
p { font-size: 7rem; }
}
.content p {
font-size: 7rem;
}
|
2. 속성 중첩
1
2
3
4
5
6
7
8
9 | .content {
p {
font: {
family: "Nanum Gothic", serif;
size: 9.814rem;
weight: 400;
}
}
}
|
3. 속성중첩 및 의사요소선택
&를 하기와 같이 사용하면 각 속성이 중첩되는 경우 및 hover, active 등의 의사선택을 통한 진행이 가능하다.
1
2
3
4
5
6
7
8
9
10
11
12 | a {
color: blue;
&:active, /* a:active 로 선택자가 컴파일된다 */
&:hover{
color: green;
}
&.anyClassName{
color: purple;
}
}
|
4. 상위요소 참조
&를 하기와 같이 작성하며 자신의 부모로 표현할 수 있는 selector를 붙일 수 있다. 그러나 본인의 상위까지 같이 선택되므로 잘 사용하지 않는다.
1
2
3
4
5
6
7
8
9 | a {
color: blue;
html & .otherClassName{ /* html a .otherClassName 로 선택자가 컴파일된다 */
color: purple;
}
}
|
4. @at-root
@at-root를 사용할 경우 현재 중첩에 상관 없이 컨텍스트를 바로 전역으로 올려 사용할 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 | .item {
background: #333;
@at-root {
.item-wrapper {
color: #666;
}
}
.item-child {
background: #555;
}
}
/* 결과 */
.item { background: #333; }
.item-wrapper { color: #666; }
.item .item-child { background: #555; }
|
덧글