728x90
반응형
** 영상으로 보실분은 아래 주소를 클릭해주세요!
** CSS를 풀어서 보기위해 앞으로 스타일은 expanded를 사용
sass --watch scss파일명:css파일명 --style expanded --sourcemap=none
** D드라이브에 [sassTest]폴더에 [test.scss]와 [test.css]를 만들었다고 가정
sass --watch test.scss:test.css --style expanded --sourcemap=none
** 위의 방법들은 [VS CODE]의 [LIVE SASS COMPILER]를 사용하면 위 작업은 하지 않아도 된다.
1. CSS 선택자를 중첩하여 작성
- 태그가 자손 혹은 후손인 경우 { } 코드블록으로 중첩하여 작성할 수 있다.
1) index.html - 후손방식작성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>SASS의 중첩규칙과 속성</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="list">
<ul>
<li><a href="#">테스트링크</a></li>
<li><a href="#">테스트링크</a></li>
<li><a href="#">테스트링크</a></li>
</ul>
</div>
</body>
</html>
2) [test.scss]에서의 후손 중첩 처리
.list{
ul{
list-style: none;
margin: 0;
padding: 0;
}
li{
padding: 10px;
margin: 10px;
border: 1px solid red;
}
a{
text-decoration: none;
color: blue;
}
}
3) [test.css]에서의 결과 - 후손방식으로 알아서 작성
.list ul {
list-style: none;
margin: 0;
padding: 0;
}
.list li {
padding: 10px;
margin: 10px;
border: 1px solid red;
}
.list a {
text-decoration: none;
color: blue;
}
2. CSS선택자의 중첩의 중첩처리
1) index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>SASS의 중첩규칙과 속성</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="list">
<h1><a href="#">로고담기</a></h1>
<ul>
<li><a href="#">테스트링크</a></li>
<li><a href="#">테스트링크</a></li>
<li><a href="#">테스트링크</a></li>
</ul>
</div>
</body>
</html>
2) [test.scss]에서의 이중 중첩 처리
.list{
h1{
padding: 10px;
margin: 10px;
border: 1px solid green;
a{
text-decoration: none;
color: orange;
}
}
ul{
list-style: none;
margin: 0;
padding: 0;
}
li{
padding: 10px;
margin: 10px;
border: 1px solid red;
a{
text-decoration: none;
color: blue;
}
}
}
3) [test.css]에서의 결과 - 이중중첩에 맞게 처리
.list h1 {
padding: 10px;
margin: 10px;
border: 1px solid green;
}
.list h1 a {
text-decoration: none;
color: orange;
}
.list ul {
list-style: none;
margin: 0;
padding: 0;
}
.list li {
padding: 10px;
margin: 10px;
border: 1px solid red;
}
.list li a {
text-decoration: none;
color: blue;
}
3. CSS속성네임의 중첩처리
- 예를 들어 font-family, font-size들 처럼 앞에 붙은 속성이 같은 것들끼리 중첩이 가능하다.
1) index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>SASS의 중첩규칙과 속성</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="list">
<h1>로고담기</h1>
<ul>
<li>테스트링크</li>
<li>테스트링크</li>
<li>테스트링크</li>
</ul>
</div>
</body>
</html>
2) [test.scss]에서의 h1 폰트 설정
.list{
h1{
font:{
family: "궁서";
size: 30px;
weight: normal;
style: italic;
}
}
}
3) [test.css]에서의 결과
@charset "UTF-8";
.list h1 {
font-family: "궁서";
font-size: 30px;
font-weight: normal;
font-style: italic;
}
728x90
반응형
'웹언어 > SASS' 카테고리의 다른 글
| [SASS] 6강 SASS의 @mixin과 @include - OSSAM강좌 (0) | 2020.08.04 |
|---|---|
| [SASS] 5강 SASS의 @import - OSSAM강좌 (0) | 2020.04.09 |
| [SASS] 3강 SASS의 CSS작성스타일 설정 (0) | 2020.04.08 |
| [SASS] 2강 SASS의 변수 - OSSAM강좌 (0) | 2020.04.07 |
| [SASS] 1강 SASS소개 및 설치 - OSSAM강좌 (0) | 2020.04.07 |
