Scss #5. 확장 (Extend)
Scss에서는 확장이라는 개념이있는 다른 프로그래밍 언어에서 사용되는 상속의 개념과 비슷하다.
Scss 상단에서 특정한 클래스를 만들어두고 아래쪽에서 그대로 가져와서 사용이 가능하다.
Scss는 많이 알면 알수록 확실히 편한부분이 눈에 띄는거 같다.
상속은 @extend selecter 방식으로 사용하면 된다.
// scss file
.sample {
color: red;
font-size: 3.5em;
background: green;
margin: auto;
}
.sample2 {
color: blue;
padding: 15px 0;
margin: -15px 0;
}
.sample3 {
@extend .sample;
box-sizing: border-box;
@extend .sample2;
}
위의 scss파일을 컴파일하게 되면 아래와같이 나타난다.
// css file
.sample, .sample3 {
color: red;
font-size: 3.5em;
background: green;
margin: auto;
}
.sample2, .sample3 {
color: blue;
padding: 15px 0;
margin: -15px 0;
}
.sample3 {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
'HTML > Scss' 카테고리의 다른 글
Scss #6_2. mixin & include (0) | 2020.04.08 |
---|---|
Scss #6_1. mixin & include (0) | 2020.04.01 |
Scss #4. 선택자 (Seleter) (0) | 2020.03.30 |
Scss #2. 변수 (Variable) (0) | 2020.03.30 |
Scss #1. 네스팅 (Nesting) (0) | 2020.03.30 |
댓글
이 글 공유하기
다른 글
-
Scss #6_2. mixin & include
Scss #6_2. mixin & include
2020.04.08 -
Scss #6_1. mixin & include
Scss #6_1. mixin & include
2020.04.01 -
Scss #4. 선택자 (Seleter)
Scss #4. 선택자 (Seleter)
2020.03.30 -
Scss #2. 변수 (Variable)
Scss #2. 변수 (Variable)
2020.03.30