1. sass basic - Nesting (=Tree)
// 주석
scss는 위와 같이 한줄 주석을 작성할 수 있다.
하지만 위와 같은 한줄 주석은 컴파일 될 때 css 파일에는 안들어간다.
scss
#box1 {
font-size: 40px;
a {
color: #a22;
text-decoration: none;
}
}
css
#box1 {
font-size: 40px;
}
#box1 a {
color: #a22;
text-decoration: none;
}
& : 앰퍼센트
scss
#box1 {
font-size: 40px;
&, &-title {
border-radius: 20px;
border: 3px solid #f00;
}
&-title {
font-style: italic;
text-decoration: underline;
}
&:hover {
background-color: #ccc;
}
& > a {
color: #a22;
text-decoration: none;
&:hover {
color: #000;
text-decoration: underline;
}
}
.class-box {
color: #000;
}
}
css
#box1 {
font-size: 40px;
}
#box1, #box1-title {
border-radius: 20px;
border: 3px solid #f00;
}
#box1-title {
font-style: italic;
text-decoration: underline;
}
#box1:hover {
background-color: #ccc;
}
#box1 > a {
color: #a22;
text-decoration: none;
}
#box1 > a:hover {
color: #000;
text-decoration: underline;
}
#box1 .class-box {
color: #000;
}