언어/css
[SCSS, SASS] 기본 문법
홍시_코딩기록
2023. 10. 26. 22:59
1. 중첩, 상위선택자 참조
.container {background: yellow;
h1{background:none; color: #000;
&:hover{color:#fff}
}
p{color:tomato;
font: {
size: 20px;
weight:bold;
}
span{background:burlywood;}
}
}
- &가 상위선택자를 가리키는 일을 함.
- font-size, font-weight와 같이 중복되는 속성도 묶어서 스타일 주기 가능.
.container {
background: yellow;
}
.container h1 {
background: none;
color: #000;
}
.container h1:hover {
color: #fff;
}
.container p {
color: tomato;
font-size: 20px;
font-weight: bold;
}
.container p span {
background: burlywood;
}
2. 변수
$main_color: orange;
.btn_box {
button:nth-child(1) {width: 100px; background:$main_color;}
button:nth-child(2) {width: 200px; background:$main_color;}
button:nth-child(3) {width: 300px; background:$main_color;}
}
- 변수명으로 색깔을 정해놓으면 활용성이 높음
3. 믹스인 @mixin
@mixin box_style($bg_color:yellow, $font_color:green) { //인자에 기본값을 주면 해당 값에 인자를 넣지 않아도 오류 안남
width: 100px;
height: 100px;
display:flex;
justify-content:center;
align-items:center;
background:$bg_color;
border: 1px solid #ccc;
color: $font_color;
}
.one {@include box_style;}
.two {@include box_style(purple, #000)}
%myPlaceholder {
color: blue;
font-weight: bold;
}
.myClass {
@extend %myPlaceholder;
font-size: 16px;
}
- mixin을 사용해서 반복되는 속성을 정의하고 include해서 사용하면 됨.
- mixin과 %가 헷갈려서 찾아봤는데 같은 기능을 하지만 인자를 이용해서 속성을 바꾸고 싶으면 mixin을 같은 속성을 여러개에 사용하려면 %을 사용하는 것 같음.