CSS/SASS
쓸만한 SASS 기본 기능들
Socratone
2020. 6. 10. 00:23
1. 주석
css에서는 // 이 주석을 사용할 수 없지만
sass에서는 가능하다.
2. Nesting
아래처럼 중첩해서 사용할 수 있어 보기도 좋고 코드량도 줄어든다.
div {
font-size: 20px;
div {
font-size: 10px;
}
}
3. 변수
손쉽게 변수를 사용할 수 있다.
$login-color: rgb(215, 215, 215);
div {
background-color: $login-color;
}
4. 상위 선택자
.block {
&__element {
}
}
위와 아래는 동일하다.
.block {
}
.block__element {
}
5. Import
다른 scss 파일을 가져온다.
@import "variables"; // variables.scss 파일의 내용을 가져온다.
6. Mixins
@mixin red {
color: red;
}
p {
@include red;
}
위와 아래는 동일하다.
p {
color: red;
}
함수 형태로도 쓸 수 있으니 아래 링크를 참고하자.