728x90
반응형
2019/05/07 - [퍼블리싱/SASS] - [SCSS]작성법 8 - 다른 .scss파일 가져오기 (@ import)
아래와 같이 panel클래스에 적용한 css코드가 있다.
.panel{
background-color: red;
height: 70px;
border: 2px solid green;
}
/*
big-panel이라는 클래스에 .panel과 똑같은 코드를 적용하기 위해서 @extend를 이용하여 불러온다.
*/
.big-panel{
@extend .panel;
width: 150px;
font-size: 2em;
}
아래와 같이 적용된다.
.big-panel{
background-color: red;
height: 70px;
border: 2px solid green;
width: 150px;
font-size: 2em;
}
[CSS/SASS] - [SCSS]작성법 10 - 주석
2019/05/07 - [퍼블리싱/SASS] - [SCSS]작성법 1 - 변수 사용하기
2019/05/07 - [퍼블리싱/SASS] - [SCSS]작성법 2 - 선택자 중첩하여 작성하기
2019/05/07 - [퍼블리싱/SASS] - [SCSS]작성법 3 - mixin 이용하기 (@mixin @include)
2019/05/07 - [퍼블리싱/SASS] - [SCSS]작성법 4 - 조건문 사용하기 (@if)
2019/05/07 - [퍼블리싱/SASS] - [SCSS]작성법 5 - 반복문 이용하기 (@for)
2019/05/07 - [퍼블리싱/SASS] - [SCSS]작성법 6 - 배열을 이용해 맵핑하기 (@each)
2019/05/07 - [퍼블리싱/SASS] - [SCSS]작성법 7 - 반복문 사용하기 (@while)
2019/05/07 - [퍼블리싱/SASS] - [SCSS]작성법 8 - 다른 .scss파일 가져오기 (@ import)
728x90
반응형
'CSS > SASS' 카테고리의 다른 글
| [SCSS]작성법 11 - 상위선택자 & (0) | 2019.06.17 |
|---|---|
| [SCSS]작성법 10 - 주석 (0) | 2019.06.17 |
| [SCSS]작성법 8 - 다른 .scss파일 가져오기 (@ import) (0) | 2019.05.07 |
| [SCSS]작성법 7 - 반복문 사용하기 (@while) (0) | 2019.05.07 |
| [SCSS]작성법 6 - 배열을 이용해 맵핑하기 (@each) (2) | 2019.05.07 |
댓글