$
기호를 사용$ 변수명 : 값
선택자 {
속성: $변수명
}
index.html
<div class="btns">
<button class="btn primary">primary button</button>
<button class="btn confirm">confirm button</button>
<button class="btn danger">danger button</button>
</div>
style.scss
$primary: royalblue;
$confirm: yellowgreen;
$danger: crimson;
$btn-padding: 10px 30px;
.btns {
text-align: center;
.btn {
border: none;
text-transform: capitalize;
font-size: 15px;
padding: $btn-padding;
border-radius: 3px;
color: #fff;
}
.primary {
background-color: $primary;
}
.confirm {
background-color: $confirm;
}
.danger {
background-color: $danger;
}
}
style.css
.btns {
text-align: center;
}
.btns .btn {
border: none;
text-transform: capitalize;
font-size: 15px;
padding: 10px 30px;
border-radius: 3px;
color: #fff;
}
.btns .primary {
background-color: royalblue;
}
.btns .confirm {
background-color: yellowgreen;
}
.btns .danger {
background-color: crimson;
}
변수명의 제약은 크게 없지만 가독성을 높이기 위해 2개의 단어가 합쳐진 경우 대시 또는 언더바를 통해 구분 지어 주는 것이 좋음
속성과 값을 직관적으로 표현하는 단어를 사용하는 것이 바람직
예시로 제목의 색상을 변수로 지정한다면
$heading-color
$heading-color: #000;
$sub-heading-color: #555;
$body-color: #222;
$heading-padding: 10px;
body {
color: $body-color;
}
.items h1 {
color: $heading-color;
padding: $heading-padding
}
.items h2 {
color: $sub-heading-color;
}
.news h1 {
color: $heading-color;
padding: $heading-padding;
}
.news h2 {
color: $sub-heading-color;
}
$color-primary: #222;
$color-secondary: #333;
$bgc-item: #eee;
$portfolio-item-w: 300px;
$portfolio-item-h: 300px;
$portfolio-images-url: "images/portfolio/";
.portfolio {
padding: 20px;
.portfolio-items {
width: 1200px;
margin: auto;
.portfolio-item {
border: 1px solid #000;
width: $portfolio-item-w;
height: $portfolio-item-h;
background: $bgc-item url($portfolio-images-url + "bg-01.jpg");
}
}
}
$crimson: crimson;
$black: #202020;
$color-primary: $crimson;
$color-secondary: $black;
// 전역 변수
$crimson: crimson;
$black: #202020;
.portfolio {
color: $crimson;
h1 {
color: $black;
}
}
// 지역 변수
.portfolio {
$crimson: crimson;
$black: #202020;
h1 {
color: $black;
}
}
.headline {
color: $crimson; // 오류 발생
}
!default
!default
는 할당되지 않은 변수의 초기값을 설정함!default
를 사용해서 최초에 할당된 변수 값을 사용!important
는 최우선 순위 속성으로 !default
와 다름!important
는 SCSS 에서도 동일하게 사용됨$bgc-color
에 있는 red를 .frame
의 배경색으로 사용
style.scss
$bgc-color: red;
.frame {
background-color: $bgc-color;
}
style.css
.frame {
background-color: red;
}
$bgc-color
에 있는 red를 .frame
의 같은 이름의 변수 선언으로 배경색은 blue
style.scss
$bgc-color: red;
.frame {
$bgc-color: blue;
background-color: $bgc-color;
}
style.css
.frame {
background-color: blue;
}
!default
에 의해 최초에 선언된 $bgc-color
사용
style.scss
$bgc-color: red;
.frame {
$bgc-color: blue !default;
background-color: $bgc-color;
}
style.css
.frame {
background-color: red;
}
:root
라고 된 선택자 안에 --
로 시작하는 이름을 주고 콜론 다음에 값을 준다.var(--변수명)
을 사용한다.:root {
--primary: skyblue;
}
.btn.secondary {
background-color: var(--secondary);
}