// 주석 /* 주석 */
외부에서 scss, sass파일을 불러와서 현재 파일에서 같이 사용
@import test.scss
다음과 같은 경우는 css파일형태로 불러옴
확장자가 css일때
ex) @import 'test.css';파일 이름이 http로 시작할 때
ex) @import 'http://test.com/test';url()을 사용할 때
ex) @import url(test);미디어쿼리가 있을 때
ex) @import 'test' screen;
','를 이용해 여러 파일 import 가능
@import 'test1', 'test2'
부모 선택자의 속성 안에서 속성을 정의해서 간단하게 표현 가능
.test{ width: 100%; div{ padding: 20px; li{ font-size: 20px; } } }
위와 아래는 같은 내용
.test{ width: 100%; } .test div{ padding: 20px; } .test div li{ font-size: 20px; }
부모 선택자의 속성 안에서 속성을 정의해서 간단하게 표현 가능
.test{ width: 100%; &.active{ color: red; } } .list{ li{ &:last-child{ color: red; } } }
위와 아래는 같은 표현
.test{ width: 100%; } .test.active{ color: red; } .list li:last-child{ color: red; }
부모 선택자의 안에서 정의는 했지만 부모 선택자 밖에서도 사용하고 싶을 때 사용
.test{ $w: 100px; @at-root box{ width: $w; } }
font나 margin같은 속성을 하나로 묶어서 정의할 수 있음
.test{ font{ weight: bold; size: 10px; } margin{ top: 10px; bottom: 10px; } padding{ left: 10px; right: 10px; } }
위와 아래는 같은 표현
.test{ font-weight: bold; font-size: 10px; margin-top: 10px; margin-bottom: 10px; padding-left: 10px; padding-right: 10px; }