SCSS

🍈 @mixin

해당 지정한 코드내용을 @include를 통해 사용한다.
이때 지정한 대상은 매개변수가 없을 수도 있고 있을 수도 있고 있어도 default값이 존재할 수도 있다.

• SCSS

// 매개변수가 없는 @mixin
@mixin noArgument{
    font : {
        size:100px;
        weight:bold;
        family :sans-serif;
    };
}

.box1{
    width:100px;
    height:200px;
    @include noArgument;
}

// 매개변수가 있는 @mixin
@mixin Argument($size){
    font : {
        size:$size;
        weight:bold;
        family :sans-serif;
    };
}

.box2{
    width:100px;
    height:200px;
    @include Argument(1000px);
}

@mixin noArgumentValue($size : 3000px){
    font : {
        size:$size;
        weight:bold;
        family :sans-serif;
    };
}

//매개변수는 기존에 설정되어 있으나 쓰지않아 default value로 처리
.box3{
    width:100px;
    height:200px;
    @include noArgumentValue;
}

//매개변수는 기존에 설정되어 있으나 쓰지않아 default value로 처리
.box4{
    width:100px;
    height:200px;
    @include noArgumentValue();
}

---

• CSS

.box1 {
  width: 100px;
  height: 200px;
  font-size: 100px;
  font-weight: bold;
  font-family: sans-serif;
}

.box2 {
  width: 100px;
  height: 200px;
  font-size: 1000px;
  font-weight: bold;
  font-family: sans-serif;
}

.box3 {
  width: 100px;
  height: 200px;
  font-size: 3000px;
  font-weight: bold;
  font-family: sans-serif;
}

.box4 {
  width: 100px;
  height: 200px;
  font-size: 3000px;
  font-weight: bold;
  font-family: sans-serif;
}

---

@mixin 특징

1. @mixin은 다른 @mixin에 중첩이 가능하다.
2. 가변인수를 통해 여러개를 이어서 사용할 수 있다.
3. { }를 통해서 스타일 블럭을 추가한 내용을 mixin에 전달이 가능하고 이를 받기 위해서 mixin에서는 @content를 써야한다.
4. 매개변수로 전달할 때 기존에는 순서에 따라 전달하지만 키워드 인수를 통해 순서가 다르더라도 키워드에 따라 각각 값이 전달된다.
5. mixin에서 값이 없는 때에 에러를 방지하기 위해 :null 내용을 추가하여 만약 값이 없을 경우 null로 처리한다.
6. null로 값을 처리할 경우 해당 내용은 컴파일이 되지않는다.
7. @content에서 ()괄호로 값을 받을 수 있고 이를 사용하는 곳에서는 using을 이용해 사용할 수 있다.

---

전개연산자 예시 1

• SCSS

//$width, $height를 제외한 나머지 값을 $marginRest에 몰아 넣는다. 
@mixin content($width , $height, $marginRest...){
    width : $width;
    height : $height;
    margin : $marginRest;
}

.box{
    @include content(
        100px,
        200px,
        50px,
        100px,
        150px,
        200px
    );
}

---

• CSS

.box {
  width: 100px;
  height: 200px;
  margin: 50px, 100px, 150px, 200px;
}

전개연산자 예시 2

• SCSS

@mixin spread($t, $r, $b, $l){
    margin-top : $t;
    margin-right : $r;
    margin-bottom : $b;
    margin-left : $l;
}

.box{
    $m : 10px 20px 30px 40px;
    @include spread($m...)
}

---

• CSS

.box {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}

만약 spread($m)으로 처리한다면 $m의 배열 전부가 $t로 들어간다
그로인해 $r $b $l은 값이 존재하지않아 오류가 뜸으로 배열인것처럼 이것을 전개로 풀어쓰는 전개연산자를 뒤에 ...을 통해 써야한다.

• @mixin spread($t, $r:500px, $b:30px, $l:70px)이렇게 하면 $t로 배열이 전부 가서 오류는 안나긴 하지만 원하는 결과는 아니다.

---

전개연산자 예시 3(+보간)

• SCSS

@mixin spread($p,$t, $r, $b, $l){
    #{$p}: {
    top : $t;
    right : $r;
    bottom : $b;
    left : $l;
    }
}

.box{
    $m : 10px 20px 30px 40px;
    @include spread(margin, $m...);
    @include spread(padding, 10px 20px 30px 40px...)
}

---

• CSS

.box {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
}

선택자나 속성은 일반 변수로는 처리가 불가능하여 #{$p}를 통해 처리했고 나머지 배열은 ...을 이용해 분해하여 개별로 넣어주었다.

---

@content 예시

• SCSS

@mixin icon($url){
    &::after{
        content : url($url);
        @content;
    }
}

.box{
    @include icon("/images/icon.png"){
        position:absolute;
        top : 0;
        left : 50px;
    }
}

---

• CSS

.box::after {
  content: url("/images/icon.png");
  position: absolute;
  top: 0;
  left: 50px;
}

---

키워드 인수 예시

• SCSS

@mixin pos($p , $t:null,$b:null){
    position : $p;
    top : $t;
    bottom : $b;
}

.absolute{
    @include pos( $b : 150px, $p:absolute, $t : 2000px)
}

---

• CSS

.absolute {
  position: absolute;
  top: 2000px;
  bottom: 150px;
}

순서에 맞지 않게 매개변수를 전달해도 키워드에 따라값이 전달되어 처리된다.

---

🍈 @mixin 총 정리

• SCSS

@mixin pass($a:null,$b:null,$c:null){
    &:hover{
                color:blue;
                font-size : $a;
                width : $b;
                height : $c;
                @content (1000px, 2000px);
    }
    @content(10px,20px);
}

.div{
    @include pass ($a:10,$b:20,$c:30) using($t , $b){
        margin-top : $t;
        margin-bottom : $b;
    }
}

---

• CSS

.div {
  margin-top: 10px;
  margin-bottom: 20px;
}
.div:hover {
  color: blue;
  font-size: 10;
  width: 20;
  height: 30;
  margin-top: 1000px;
  margin-bottom: 2000px;
}

1. include를 통해 pass에 해당하는 @mixin을 받아 각각의 값에 따라 매개변수를 처리하고 만약 값이없다면 null로 처리한다.
2. using을 통해 각각의 컨텐츠의 추가된 매개변수가 @mixin의 처리된 값으로 전환되어 함께 추가된다.
3. 만들어진 .div:hover와 .div를 각각 CSS 결과로 나타낸다.

• @include 대상 찾고 거기에 쓰일 using부터 {} 내용까지 옮긴 후 이를 @mixin에 맞춰서 받아온 매개변수($a $b $c)와 받아온 using {}(margin-top , margin-bottom) 내용을 처리를 하고 다시 반환하여 계산

---

🍈 삼항연산자

if( check , check가 true일 경우 , check가 false일 경우)

• SCSS

@mixin content($size){
    // @if($size < 30px){
    //     font-size : 30px;
    // }
    // @else{
    //     font-size : $size;
    // }
    font-size : if($size < 30px , 30px , $size);
}

.box100px{
    @include content(100px);
}

.box20px{
    @include content(20px);
}

---

• CSS

.box100px {
  font-size: 100px;
}

.box20px {
  font-size: 30px;
}

$size가 30px이하이면 30px로 처리하고 30px 초과면 해당 사이즈로 처리한다. 주석부분의 if else는 같은 결과이다.

---

🍈 map.get

Map에서 key값에 따라 해당하는 대상을 가져온다.
@use "sass:map"을 위에 추가하여야 한다.

• SCSS

@use "sass:map";

$bootstrap-colors : (
    primary : #0275d8,
    success : #5cb85c
);

.notice{
    color : map.get($bootstrap-colors, success);
}

• CSS

.notice {
  color: #5cb85c;
}

---

🍈@extend

확장을 추가하는 것으로 선택자 폭발이나 중첩상속 같은 문제로 인해
실제 @mixin이 해당 @extend를 전부 적용이 가능하여 잘 쓰지는않는다.

---

🍈 @function @return @error

js와 유사하게 사용한다
@error의 경우 SCSS에서 오류가 나타난다. (JS의 throw와 유사)
함수를 작성할 때 기존에 작성된 함수(url , repeat ...)를 피하기 위해 A-B(my-func) 형태로 작성을 하기도 한다.
확장성을 위해서 어떤 변수값에 대해서는 이미 작성되었던 내용이 있는 경우를 대비하고 뒤에 !default를 작성한다.

---

🍈 @each

List와 Map에 처리가 가능하다

---

🍈 @for

$i from a through b => a부터 b까지
$i from a to b => a부터 b-1까지

---

🍈 @while

@while $i > 0 { ... }