변수(Variables)
$font-stack: Helvetica, sans-serif; // $로 변수 설정
$primary-color: #333; // $로 변수 설정
body {
font: 100% $font-stack; // 변수 사용
color: $primary-color; // 변수 사용
}
- '$변수명 : 값'으로 설정
- 사용하고자 하는 곳에서 '$변수명'을 입력하여 사용
중첩(Nesting)
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
- 중첩기능을 사용하여 가독성을 훨씬 높일 수 있다.
함수(Mixin)
@mixin theme($theme: DarkGray) {
background: $theme;
box-shadow: 0 0 1px rgba($theme, .25);
color: #fff;
}
.info {
@include theme;
}
.alert {
@include theme($theme: DarkRed);
}
.success {
@include theme($theme: DarkGreen);
}
- JavaScript의 함수처럼 만들어서 사용할 수 있다.
- '@mixin 함수명(인자){속성}'으로 선언하고
- '@include 함수명(파라미터)'로 함수와 같은 기능으로 사용하면 된다.
확장/상속(Extend/Inheritance)
// 예제 1)
.btn {
width: 200px;
height: 60px;
}
.login_btn {
@extend .btn;
color: aquablue;
}
.signUp_btn {
@extend .btn;
color: green;
}
// 예제 2)
%btn {
width: 200px;
height: 60px;
}
.login_btn {
@extend %btn;
color: aquablue;
}
.signUp_btn {
@extend %btn;
color: green;
}
// display 관련 속성은 확장되지 않는다.
%equal-heights {
display: flex;
flex-wrap: wrap;
}
- @extend를 사용하여 예제 1처럼 다른 속성을 상속받아 사용할 수 있다.
- 하지만 불필요한 선택자를 피하고 싶을 때 예제 2와 같이 %를 사용하면 된다.
@mixin과 @extend는 언제 사용할까?
- 선택자간의 연관성이 존재한다면 extend
- 연관성은 없고 코드가 겹치는 선택자들이라면 mixin