WEB/CSS
SASS(SCSS)문법 정리
잿꽃
2022. 5. 26. 16:08
SASS(SCSS)문법을 정리했다.
SASS(SCSS)는 최종에는 표준 CSS로 동작해야 하며 전처리기로 작성 후 CSS로 컴파일 해야 한다.
1. 중첩 : 자식 요소를 부모 요소 내부에 작성이 가능
.box{
h2{
color: red;
}
}
2. & : 바로 상위의 요소를 선택할 수 있음
.box{
/* .box:hover */
&:hover{
color: red;
}
}
3. @at-root : 하위 요소는 범위 밖에서 사용할 수 없기 때문에 중첩에서 벗어 날 때 사용
.box{
@at-root h2{
color: red;
}
}
/* CSS
.box{
}
h2{
color: red;
}
*/
4. 속성 중첩 : 중복되는 속성의 이름을 중첩
.box{
margin: {
left : 5px;
bottom : 10px;
}
}
5. 변수 : 자주 사용하는 값을 변수로 지정하여 사용 가능
@import 'main.css';
/* 전역 변수로 어디든 사용 가능 */
$box-bgcolor: #232323;
/* overwrite 방지, 기존의 변수가 있을 경우 사용하지 않음 */
$box-color: red !default;
.box{
background-color: $box-bgcolor;
/* background-color: $box2-bgcolor; 불가능 */
}
.box2{
$box2-bgcolor: #252525;
color: $box-color /* blue */
h1{
background-color: $box2-bgcolor;
}
}
6. Mixins : 재활용 할 내용을 작성한다.
기본사용 - 1단계 : 선언(Mixins) > 2단계 : 사용(include)
/* SCSS */
@mixin main-text{
font{
size: 20px;
weight: bold;
}
color: red;
}
.box{
@include main-text;
}
/* SASS */
=main-text
font-size: 20px
font-weight: bold
color: red
.box
+main-text
인수전달 - Mixins으로 매개변수를 전달한다.
@mixin box-border($pixel, $color){
border: $pixel solid $color;
}
.box{
@include box-border(2px, red);
}
@mixin position($state:relative, $l:null, $r:null, $t:null, $b:null){
position: $state;
left: $l;
right: $r;
top: $t;
botton: $b;
}
.box{
@include position(absolute, $l:10px, $t:25px);
}
7. 논리적용이 가능하다.
$width: 50px;
@function border-style($pixel){
@if($pixel >= 1px and $pixel <= 5px){
return $pixel solid red;
}@else{
return $pixel dashed blue;
}
}
.box{
h2{
@if($width > 100px){
height: 200px;
}
color: @if($width > 200px, red, :blue);
border: border-style(2px);
}
}
출처
Sass(SCSS) 완전 정복!
Style(CSS) 작업 시 필수가 되어버린 CSS Preprocessor(전처리기) Sass(SCSS)에 대해서 이해하고, CSS로 컴파일하는 방법부터 자세한 SCSS 문법까지 살펴봅니다.
heropy.blog
728x90