SASS / SCSS

SASS : 중괄호와 ;가 존재하지않아 가독성은 좋지만 들여쓰기가 중요하다
SCSS : 중괄호와 ;가 존재하고 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합이다.

• SCSS에서 @mixin은 SASS에서 =로 바뀌고
  SCSS에서 @include는 SASS에서 +로 바뀐다. (서로간의 차이)

---

🍉 주석

SCSS는 중괄호를 통해 비교적 주석에서 자유롭지만
SASS는 중괄호가 없어 /* */는 단에 맞춰서 신경써야한다

SCSS의 경우 //는 컴파일이 안되어 CSS에는 아예 내용이 나오지않으나
/* */는 컴파일이 되어 CSS에서도 해당 내용이 존재한다.

---

🍉 SCSS의 중첩기능(Nesting)과 &(상위선택자)

SCSS의 중첩이 CSS에 각각에 적용이 된다.
&의 경우 상위선택자를 참조한다.

• SCSS

.container{
    display : flex;
    .item {
        flex-grow : 1;
        > span {
            color : red;
            &:hover{
                color:blue;
            }
        }
    }
}

---

• CSS

.container {
  display: flex;
}
.container .item {
  flex-grow: 1;
}
.container .item > span {
  color: red;
}
.container .item > span:hover {
  color: blue;
}

&:hover는 상위 선택자인 >span에 영향을 받은 > span:hover가 만들어진다.

• 상위선택자 앞에 어떤값이 있다면 CSS는 어떤값 상위선택자부분 형태로 만들어진다.
  .banner { body.dart & {...}} => body.dart .banner{...}

---

🍉 변수 사용하기 , @at-root 키워드

기본적으로 변수는 유효범위내에 변수의 사용이 가능하다
@at-root의 경우 루트 경로로 대상이 이동되어 CSS에 처리된다.

• SCSS

.container{
    .item{
        $size : 200px;
        width : $size;
        height : $size;
        @at-root .box{
            width:$size;
        }
    }
}

---

• CSS

.container .item {
  width: 200px;
  height: 200px;
}
.box {
  width: 200px;
}

변수 $size에 의해 width height에 영향을 주고 @at-root로 인해 기존에 .container .item .box의 width가 200px인 것이 아닌
.box의 width가 200px로 처리된다.

---

🍉 반복되는 키워드 생략

반복되는 부분에 대해 반복되는 부분 : { .. }로 처리를 한다.

• SCSS

.container{
    flex : {
        grow:1;
        shrink:0;
        basis:auto;
    };
}

---

• CSS

.container {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
}

---

🍉 변수 사용하기 (+a)

let size = 100 => $size : 100

---

flag 설정

변수의 값 바로 뒤에 !flag형태로 추가를 한다.
ex1) 지역변수에 있던 값이 !global로 인해 기존의 전역변수에 새롭게 재정의 된다. => 기존의 전역변수를 영향을 끼칠 수 있다.
ex2) !default 이미 변수값이 지정된 것이 존재한다면 그것으로 처리한다.

• bootStrap의 github 코드에는 !default를 사용하는데 기존에 만든 전역변수들을 bootStrap에서 덮어쓰지않게 하려고 쓴다.

---

🍉 보간 ( JS의 백틱과 비슷)

변수를 #{변수}로 묶어서 값을 처리한다.
선택자나 속성은 일반 변수로는 처리가 불가능하다.
이를 처리하기 위해서 문자보간을 사용하는데, #{}를 사용하면 코드의 어디든지 변수값을 넣을 수 있다.

• SCSS

$name : "github";
$path : "~assets/images";

.box{
    background-image:url("#{$path}/#{$name}.png");
}

.box-#{$name}{
    font-size:12px;
}

---

• CSS

.box {
  background-image: url("~assets/images/github.png");
}

.box-github {
  font-size: 12px;
}

---

🍉 SCSS 변수의 종류

1. Numbers
   1) 1
   2) .82
   3) 20px
   4) 2fr
2. Strings
   1) bold
   2) absolute
   3) "as/ss"
3. Colors
   1) yellow
   2) rgba( , , , )
   3) #ffff00
4. Boolean
   1) true
   2) false
5. Null
   1) null
6. Lists
   1) (10px, 20px, 30px)
   2) 10px, 20px, 30px
   3) 10px 20px 30px
7. Maps
   1) (a : apple , b : banana , c : chill )

• Maps의 경우 Lists와 다르게 괄호 생략이나 , 생략이 불가능하다

---

🍉 연산자

1. 산술연산자
2. 비교연산자
3. 논리연산자

---

1. 산술연산자

+ - * / % 사용

• 주의 : /의 경우 앞쪽값과 뒤쪽값을 구분하는 역할로도 쓰여서 제대로 나누기의 의미를 사용하려면 3가지 방법이 있다.

1) 나누기 연산을 괄호로 묶는다 ( 20px / 2 )
2) 변수에 담아 처리한다 $a = 20px; ... $a/2
3) 다른 연산자를 추가한다. 20px / 2 + 1px

• 연산의 단위가 다를 경우 calc함수를 사용한다.
  100%-50px => calc(100%-50px)

---

2. 비교연산자

@if
@else

---

3. 논리연산자

기존의 js에서 사용하던 && || !를 대신해서
SCSS에서는 and or not으로 사용한다.