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
@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
의 자식 요소가 아닌 독립적인 선택자로 컴파일 됨
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;
}
// 주석 처리
/* 주석 처리 */
.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)