선택자 중첩(Nesting)
- SCSS의 가장 기본적이면서 필수적인 기능으로 상위 선택자의 반복을 최소화하면서 복잡한 CSS 구조를 단순화 함.
- SCSS 코딩 방식은 CSS와 동일
- 선택자 선언 후 중괄호 사용
- 자식 요소 선택자의 경우 부모 요소 선택자의 중괄호 안에 선택자를 선언하고 다시 중괄호로 묶어주면 됨
- body 선택자 중괄호 안에서 다른 선택자를 선언하면 이후 모든 선택자에 body가 붙기 때문에 body의 경우 반드시 독립적으로 선언할 것!!
예시
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01.중첩(Nesting)</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<ul class="sns">
<li><a href="#none">facebook</a></li>
<li><a href="#none">twitter</a></li>
<li><a href="#none">instagram</a></li>
<li><a href="#none">youtube</a></li>
</ul>
</body>
</html>style.scss
body {
font-size: 15px;
background-color: #eee;
}
.sns {
width: 600px;
list-style: none;
li {
float: left;
width: 25%;
border: 1px solid #000;
border-radius: 10px;
padding: 10px;
a {
text-decoration: none;
text-transform: capitalize;
}
}
}style.css
body {
font-size: 15px;
background-color: #eee;
}
.sns {
width: 600px;
list-style: none;
}
.sns li {
float: left;
width: 25%;
border: 1px solid #000;
border-radius: 10px;
padding: 10px;
}
.sns li a {
text-decoration: none;
text-transform: capitalize;
}
중첩 벗어나기 - @at-root
- 중첩(Nesting) 되어 있는 자손 요소를 해당 중첩에서 벗어나서 독립적인 선택자로 만들기 위해서는 키워드
@at-root를 사용한다.
@at-root 사용하지 않을 경우
style.scss
.frame {
padding: 20px;
margin: auto;
.heading {
font-size: 42px;
text-transform: uppercase;
font-weight: normal;
}
}style.css
.frame {
padding: 20px;
margin: auto;
}
.frame .heading {
font-size: 42px;
text-transform: uppercase;
font-weight: normal;
}.heading이 .frame의 자식 요소로 중첩되어 컴파일 됨
@at-root 사용할 경우
style.scss
.frame {
padding: 20px;
margin: auto;
@at-root .heading {
font-size: 42px;
text-transform: uppercase;
font-weight: normal;
}
}style.css
.frame {
padding: 20px;
margin: auto;
}
.heading {
font-size: 42px;
text-transform: uppercase;
font-weight: normal;
}.heading이 .frame의 자식 요소가 아닌 독립적인 선택자로 컴파일 됨
CSS 속성 단축형
- 선택자 내에서 사용
- 선택자 내에 속성에서 공통된 앞 글자를 사용해서 단축 속성을 만듦 (접두어 형태로 자동 생성)
style.scss
.portfolio {
text: {
align: center;
overflow: hidden;
transform: uppercase;
shadow: 2px 2px 20px yellowgreen;
}
}style.css
.portfolio {
text-align: center;
text-overflow: hidden;
text-transform: uppercase;
text-shadow: 2px 2px 20px yellowgreen;
}주석 (Comments)
- SCSS의 주석은 개별 라인을 주석 처리하는 줄 주석, 여러 러인을 주석 처리하는 블록 주석을 사용함
- 줄 주석
// 주석 처리
- 블록 주석
/* 주석 처리 */
- 줄 주석은
.css로 컴파일 되면서.css에서 사라지지만, 블록 주석은 컴파일 후.css에서 유지됨
style.scss
body {
font-size: 15px;
background-color: #eee;
}
.sns {
width: 600px;
list-style: none;
/* padding: 0;
margin: 0; */
li {
float: left;
width: 25%;
border: 1px solid #000;
// border-radius: 10px;
padding: 10px;
a {
text-decoration: none;
text-transform: capitalize;
}
}
}style.css
body {
font-size: 15px;
background-color: #eee;
}
.sns {
width: 600px;
list-style: none;
/* padding: 0;
margin: 0; */
}
.sns li {
float: left;
width: 25%;
border: 1px solid #000;
padding: 10px;
}
.sns li a {
text-decoration: none;
text-transform: capitalize;
}실습 전체 코드
https://github.com/mjieun0956/TIL/tree/master/SCSS/01_%EC%A4%91%EC%B2%A9(Nesting)
코드로 꿈을 펼치는 개발자의 이야기, 노력과 열정이 가득한 곳 🌈