[SCSS] 작성법 13 - 연산하는 값 사용하기

[CSS/SASS] - [SCSS]작성법 12 - 중첩안에 선언하지만 중첩밖에서 사용해야하는경우 @at-root (중첩에서 벗어나기)

 

 

보통 css에서 연산하는 값을 사용하기 위해서는 calc()함수를 사용해야합니다.

 

SCSS에서는 연산하는 값을 사용가능합니다. 

 

 

div{
  $wid : 100px;
  width: $wid;
  height: $wid * 2;
  font-size: $wid/4 + 3;
}

아래와 같이작성후 컴파일 한다면 아래와 같다. 

div{
  width: 100px;
  height: 200px;
  font-size: 28px;
}

 

 

[CSS/SASS] - [SASS/SCSS]작성법 1 - 변수 사용하기

[CSS/SASS] - [SCSS]작성법 2 - 선택자 중첩하여 작성하기

[CSS/SASS] - [SCSS]작성법 3 - mixin 이용하기 (@mixin @include)

[CSS/SASS] - [SCSS]작성법 4 - 조건문 사용하기 (@if)

[CSS/SASS] - [SCSS]작성법 5 - 반복문 이용하기 (@for)

[CSS/SASS] - [SCSS]작성법 6 - 배열을 이용해 맵핑하기 (@each)

[CSS/SASS] - [SCSS]작성법 7 - 반복문 사용하기 (@while)

[CSS/SASS] - [SCSS]작성법 8 - 다른 .scss파일 가져오기 (@ import)

[CSS/SASS] - [SCSS]작성법 9 - 다른 선택자에 적용한 속성 그대로가져와 적용하기 (@ extend)

[CSS/SASS] - [SCSS]작성법 10 - 주석

[CSS/SASS] - [SCSS]작성법 11 - 상위선택자 &

[CSS/SASS] - [SCSS]작성법 12 - 중첩안에 선언하지만 중첩밖에서 사용해야하는경우 @at-root (중첩에서 벗어나기)