재활용
mixin, include = 함수
mixin, include키워드로 재활용이 가능하다.
- 함수처럼 인수를 받아올수도 있고 인수 순서 상관없이 원하는 인수에만 할당할 수 있음
@mixin section($size:40px, $end: "!!"){
font-size: $size;
&::after{
content:$end
}
}기능이 점점 많아지는걸...?🤔
arguemnts, ...args같은 가변인수도 지원한다...!?
@mixin section($a, $b...){
}...이후로 들어온 변수들을 사용할수 있음. 이거 완존 JS아니냐?
- 이런식으로 보간(템플릿 리터럴)을 이용하여 사용할수도 있다.
@media 재활용 예제
이렇게 사용할수도 있다.
참고로 @content에 인수로 전달한 값을 쓰려면 include로 넘겨주는 부분에 using()키워드를 넣어주어야한다.
확장
클래스의 extends키워드처럼 extend키워드를 사용할수도 있다...
기능이 진짜 많구나?
위의 btn은 정상적으로 사용했지만, 아래 container처럼 중첩 내부 extend를 잘못 사용한다면 선택자가 꼬이게된다.
꼭 필요한게 아니라면 extend대신 mixin을 이용하여 재활용 하자.
placeholder선택자
input내부 placeholder는 아니고 extend로만 확장하여 사용할 수 있는 선택자를 말한다.
%btn{
...
}
.btn-2{
@extend %btn
}이렇게 확장으로만 사용가능하다!
참고로 @media규칙 내부에서 확장하려면 내부에 이미 확장용 속성이 선언되어있어야 함.
함수
@function키워드로 진짜 함수를 작성할수있다...
또한 if-else문도 사용가능하고 error메시지도 던질수 있다.
@function grid($col:1, $total:12){
if($col > $total){
@error "에러입니다"
}
@return 123;
}
.box1{
width: grid(); //123
}이게 다 컴파일링되는데 속도가 빠르다니...
@list모듈을 넣으면 length프로퍼티도 사용 가능하다.
@use 'sass:list'
if(list.length)...red라는 이름의 전역함수는 rgb중 red값을 반환해준다.
조건과 반복
위에 말했듯 if-else문 사용 가능하다
for문도 사용 가능하다
@for $i from 1 to 4 {
// 1~3까지 반복됨
.item {
width: 100px * $i;
}
}또한 for-in문도 사용가능하다.
@each $size in $sizes {
$index: list.index($sizes, $size);
.icon-#{$index}{
height: $size;
width: $size;
}
}while문 도 사용 가능하다
@while($n>0){
$n : $n-2;
}JS와 비슷한 다른 언어를 배우는 기분이 드는데...배워야할게 너무 많구나ㅠㅠ
가져오기, 모듈
import로 가져올때url키워드 사용하지 않아도 됨.- SCSS의 파일명 맨 앞에 언더바
_붙어있으면 컴파일할때 필요한 파일 생성 안함(낭비없음) import할때 확장자 생략하면css,sass,scss로 인식- [모듈을 불러와서 사용중인 모듈]을 불러와서 사용할때...[모듈을 불러와서 사용중인 모듈]내부에
@forward로 선언하여 [모듈]을 불러와야함. as키워드도 사용 가능함.as로 바꾼 이름에*키워드를 사용하게되면 이렇게 사용할 수 있다.
//main.scss
@use "mixins" as mix;
@use "variables" as var;
@forward "mixins" as mix*;
@forward "variables" as var*;
...
//other.scss
@use ...
//$primary 이렇게 선언된 변수를 $varprimary 이렇게 사용할 수 있음.기본적으로 제공되는 모듈이 많다. list도 그 중 일부고...
공식 사이트들어가면 자세히 나와있음
디버그
조건문이나 변수같은게 포함되니 자연스레 디버그가 필요하다.(배보다배꼽...아닌가...?!)
@debug:console.log같은 기능@warn:console.warn과 같은 기능@error:throw new Error와 같은 기능. => 컴파일 정지
느낀점
진짜 배운게 많았다...SCSS는 JS와 CSS를 잘 버무려놓은 언어같다. 친숙하지만 다시배우는 느낌...?
그래도 거의 비슷해서 다행이다ㅋㅋ
내가 몰랐던게 정말 많구나 싶고 CSS는 진짜 기본기를 잘 다져놓아야겠음...!
