SCSS는 {}
와 ;
를 사용한다.
sass | scss |
---|---|
.list width:100px | .list {width: 100px;} |
Mixins(재사용 가능한 기능을 만드는 방식)
sass | scss |
---|---|
= 과 + 기호 사용 | @mixin 과 @include 로 기능 사용 |
SASS는 좀 더 간결하고 작성하기 편리하며 {} 나 ; 를 사용하지 않아도 되니 코드가 깔끔해진다. | SCSS는 인라인코드(한 줄 작성)를 작성할 수 있고, css와 유사한 문법을 가지기 때문에 코드 통합이 훨씬 쉽다. |
(https://www.sassmeister.com/)에서 실시간으로 컴파일 변환이 가능하다.
ex)
/* a
* b
* c */
1) 숫자 : 단위가 있거나 없다.
2) 문자 : 따옴표가 있거나 없다.
3) 색상표현 :
4) Booleans
5) Nulls : 속성 값으로 null이 되면 컴파일이 안 된다.
6) Lists : 공백이나 ,
로 구분된 값 목록전체(=배열)
ex) apple, orange
- 이 때 괄호는 붙여도 되고 안 붙여도 된다.
7) Maps : Lists와 값이 유사하거나 값이 key: value
형태
ex) (apple: a, banana: b)
- 이 때 괄호는 꼭 붙여야 한다!!
1) 중첩 앞에서 &
는 상위 선택자를 참조해 치환한다.
.list{
&:last-child{
number: one;
}
}
.list:last-child{
number: one;
}
2) @at-root
(중첩 벗어나기)
- 반복되는 변수를 쓰고 중첩문에서 벗아나 독립적으로 사용이 가능하다.
3) 중첩된 속성 : x:
로 사용한다
margin: {
top: 100px;
left: 100px;
}
{
margin-top: 100px;
margin-left: 100px;
}
$변수이름 : 속성값
$color: red;
.box{
color: $color;
}
1) 변수 유효 범위
- 선언된 블록 {}
안에서만 유효하다.
2) 변수 재할당
$red: #ff0000;
$c-p: $red;
.box{
color: $c-p;
}
3) 전역설정 !global
- !global
플래그 사용시 변수의 유효범위를 전역으로 설정 가능하다.
.box1{
$color: #000 !global;
background: $color;
}
.box2{
background: $color;
}
4) 초기값 설정 !default
- 현재 설정한 변수의 값을 사용하지 않겠다는 의미다.
- Bootstrap 같은 외부 라이브러리를 연결했을때 변수 이름이 같을 경우 변수들이 overwrite 되지 않도록 할 수 있다. ( 실제로 많이 사용중 )
5) 문자 보간 #{}
$F: unquote('a');
@import url('http://... = #{$F}');
는 아래가 된다
import url('http://... = a');
@import
로 가져온 sass파일은 단일 css 출력 파일로 병합된다.http://
로 시작할때url()
이 붙었을 때@import
로 여러파일을 가져올 수 있다.@import "header" "footer"
@import
로 가져올시 *.css
파일로 컴파일하지 않는다. 즉, _style.css
파일은 컴파일하지 않는다.선언 : @Mixin
포함 : @include
@mixin 이름{
스타일;
}
@include 이름
mixin으로 선언한 것을 include로 꺼내 쓰는 개념이다.
= mixin이름
스타일
+ mixin이름
인수
1) 인수의 기본값 설정
@mixin mixin이름($매개변수: 기본값){
스타일;
}
2) 키워드 인수
@mixin mixin이름($매개변수A: 기본값, $매개변수B: 기본값){
스타일;
}
@include mixin이름($매개변수B: 인수);
필요하지 않은 변수의 값은 null로 설정할 것
3) 가변 인수
입력할 인수 갯수가 불확실할 경우 매개변수 뒤에 ...
을 붙여준다.
@mixin alpha($a, $b, $c...){
width: $a;
heigth: $b;
background: $c;
}
.box {
@include alpha(1,2,3,4,5);
}
background: 3,4,5;
@content
@extend 선택자
.btn{
p: 10px;
}
.btn-a{
@extend .btn;
b: red;
}
가 아래처럼 된다.
.btn, btn-a{
p: 10px;
}
.btn-a {
b: red;
}
확장의 부작용
※부작용이 있을 수 있으니 Mixin기능으로 대체할 것!!!
연산된 값을 @return
으로 반환
@function 함수이름($매개변수){
@return 값;
}
@include
대신 함수이름(인수)
로 사용한다.()
는 사용한다.@function width($a, $b, $c){
@return $a * ($b/ $c);
}
.container{
width: (3,2,1);
}
이름중복
extract-red()
[]
는 선택가능한 인수<참고 자료>
https://poiemaweb.com/sass-built-in-function
https://m-veloper.github.io/devlog/2020/03/22/sass-15/
if(함수)
if(조건, 표현식1, 표현식2)
div{
width: if($width>300px, $width, null);
}
$width: 500px;
@if
(지시어)
@if(조건1){}
@else if(조건2){}
@else{}
()
없이 작성 가능if(unitless($w), #{$w}px, $w)
@for
@for $변수 from 시작 through 종료{}
@for $변수 from 시작 to 종료 {}
from 1 through 3 // 1-3 반복
from 1 to 3 // 1-2 반복
each
list와 map 데이터를 반복할 때 사용한다
@each $변수 in 데이터{}
list 반복
$fruits: apple, mango;
.fruits{
@each $a in $fruits{
$index: index($fruits, $a);
li: nth-child(#{index}){
left: 50px * $index;
}
}
}
||
.fruits li:nth-child(1){ left: 50px; }
.fruits li:nth-child(2){ left: 100px; }
map 반복
$fruits: {
apple: K,
banana: J
};
@each $key, $value in $fruits{
.box-#{$key}{
background: url('#{value}.png');
}
}
@while
false로 평가될 때까지 반복한다
그러나 무한루프에 빠질 위험도 있다.
@while 조건{}
$i = 6;
@while $i>0{
.item-#{$i}{
width: 2px * $i;
}
$i: $i-2;
}
||
.item-6{width: 12px;}
.item-4{width: 8px;}
.item-2{width: 4px;}