Sass는 아래의 이미지처럼 파일을 스타일 별로 기능별로 분리하여 사용할 수 있으며 파일을 기능 별, 레이아웃 별로 분할해서 사용하기 때문에 코드를 관리하기 편리해집니다
※ css는 import할 때 파일 URL을 적어줘야 하지만, Sass에서 import할 때는 확장명을 제외하고 파일명만을 사용할 수 있습니다.
주석을 한 줄 작성할 때는 //을 사용하고, 작성한 주석 내용은 sass 내에서만 볼 수 있습니다. 여러 줄을 작성할 경우 /*을 사용하고, scss파일이 컴파일 될 때 주석 내용이 css 파일에 나타납니다.
/* 여러줄 주석은 볼 수 있습니다. */
// 한 줄 주석은 볼 수 없습니다.
Nesting(중첩)을 사용하면, html의 시각적 계층 방식과 동일하게 CSS를 중첩하여 작성할 수 있습니다. CSS코드가 구조화 되어 가독성이 높아지며 유지 보수하기 편리해집니다.
<!--HTML-->
<nav> <!--nav안에 ul이 중첩되어 있고-->
<ul> <!--ul안에 세가지 li가 중첩되어 있다.-->
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
</nav>
//Scss
//Scss에서도 HTML처럼 계층구조로 스타일을 적용할 수 있다.
nav{
background : #C39BD3;
padding : 10px;
height: 50px;
ul{
display: flex;
list-style : none;
justify-content: flex-end;
li{
color: white;
margin-right: 10px;
}
}
}
⚠️ 하지만 지나친 중첩된 코드는 삼가 해주세요.
깊이 중첩되면 코드를 보는 게 불편하고 컴파일 했을 경우 불필요한 선택자를 사용하게 됩니다.
중첩은 선택자뿐만 아니라 스타일 속성들도 가능합니다.
//Scss
.add-icon {
background : {
image: url("./assets/arrow-right-solid.svg");
position: center center;
repeat: no-repeat;
size: 14px 14px;
}
}
"&"는 상위에 있는 부모선택자를 가리킵니다.
1) "&" 을 이용하여 after, hover 등의 가상요소, 가상클래스, class나 id 셀렉터 등을 참조할 수 있습니다.
//Scss
.box {
&:focus{} // 가상선택자
&:hover{}
&:active{}
&:first-child{}
&:nth-child(2){}
&::after{} // 가상요소
&::before{}
}
/*CSS*/
.box:focus{} /* 가상선택자 */
.box:hover{}
.box:active{}
.box:frist-child{}
.box:nth-child(2){}
.box::after{} /* 가상요소 */
.box::before{}
2) "&" 를 응용하면 아래 예시와 같이 공통 클래스 명을 가진 선택자들을 중첩시킬 수 있습니다.
//Scss
.box {
&-yellow {
background: #ff6347;
}
&-red {
background: #ffd700;
}
&-green {
background: #9acd32;
}
}
//.box라는 이름이 같기 때문에 &를 사용해 중첩구조로 만들 수 있다
/*CSS*/
.box-yellow {
background: #ff6347;
}
.box-red {
background: #ffd700;
}
.box-green {
background: #9acd32;
}
3) "&" 은 자신의 부모 선택자를 참조하지만 중첩이 깊어지면, 자신의 직계 부모가 아닌 최상위 부모 선택자로부터 참조됩니다.
//Scss
.nav {
height: 60px;
font-size: 18px;
.nav-list {
background: #3e68ff;
span {
padding: 10px 13px;
a {
color: white;
.one {
& .two {
color: skyblue;
}
}
}
}
}
}
.nav {
height: 60px;
font-size: 18px;
}
.nav .nav-list {
background: #3e68ff;
}
.nav .nav-list span {
padding: 10px 13px;
}
.nav .nav-list span a {
color: white;
}
.nav .nav-list span a .one .two {
color: skyblue;
}
⚠️ 깊은 중첩을 하게 되면서 불필요한 선택자들이 사용되었습니다. 중첩을 과하게 사용하지 않도록 주의해주세요.
@at-root
키워드를 사용하면 중첩에서 벗어날 수 있습니다. 중첩에서 벗어나고 싶은 선택자 앞에 @at-root
를 작성합니다. 컴파일된 css 코드에서 @at-root
를 사용한 선택자가 중첩에서 벗어났음을 확인할 수 있습니다. 중첩된 선택자에게만 사용할 수 있습니다.
//Scss
.article {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
.article-content {
font-size: 14px;
opacity: 0.7;
@at-root i {
opacity: 0.5;
}
}
}
/*CSS*/
.article {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
}
.article .article-content {
font-size: 14px;
opacity: 0.7;
}
/*중첩을 빠져나온 것을 확인할 수 있다.*/
i {
opacity: 0.5;
}
출처 : 인프런 - [초급] 40분만에 훑어보는 Sass