업데이트: January 02, 2023

SASS 문법

@at-root

ul{
  @at-root [class name] {
    여기 정의된 css는 ul 밖에 정의됨
  }
}
/* 예) */
ul{
  li{font-size:1.4rem;}
  @at-root .layer li {font-size:1.6rem;}
}

/* CSS 출력 */
ul li{font-size:1.4rem;}
.layer li{font-size:1.6rem;}

#{$변수명} (변수 문자 보간)

$left:left;

.test{
  /* {}괄호 안에 변수값은 문자열로 인식함. 숫자의 경우에도 문자열로 처리 */
  border-#{$left}:1px solid red;
}

산술식에서 ‘/’ 연산을 정상으로 사용하는 법

나눌 대상을 변수에 담아 나눈다
괄호를 이용하여 연산을 수행
기타 다른 연산과 함께 혼용

$width1 : 100px;
width : $width1 / 2;
height: (100% / 4);
padding-top: 50px + 20px / 2;

논리연산

인라인 if

$width: 300px;
.box{border:if($width > 500, "200px", $width);}

@if [and / or / not]

@if(조건){  // ()를 생략가능
}

@if(조건){
}@else{
}

@if(조건){
}@else if(조건){
}@else{
}

/* and | or | not 연산 */
$width1 : 150px;
@if ($width1 < 100 and $width1 > 300){
  height : 100px;
} @else {
  height : 200px;
}

@for

@for $변수 from 시작 through 종료{}, through는 종료포함
@for $변수 from 시작 to 종료{}, to는 종료직전

$colors : (red, blue, green, yellow);

/* $colro3 까지 출력 */
@for $num from 1 through 3 {
	.test li:nth-child(#{$num}){
		background-color:nth($colors, $num);
	}
}

/* $colro2 까지 출력 */
@for $num from 1 to 3 {
	.test li:nth-child(#{$num}){
		background-color:nth($colors, $num);
	}
}

/* $colors 길이만큼 반복 */
@for $num from 1 through length($colors) {
	.test li:nth-child(#{$num}){
		background-color:nth($colors, $num);
	}
}

@each

@each는 List와 Map 데이터를 반복할 때 사용

$colors : (red, blue, green, yellow);
.test {
  @each $color in $colors{
      $i : index($colors, $color);
      li:nth-child(#{$i}){
          background-color:$color;
      }
  }
}

Map 사용법

$icon-arrow: (up: up01, down:down01, left:left01, right:right01);
.test{
  @each $key, $icon in $icon-arrow{
      li.icon.#{$key}{
          background-image:url("../img/icon/arrow_#{$icon}.png");
      }
  }
}

mixin

재사용 할 css 선언 그룹을 정의

선언 : @mixin, 사용 : @include

@mixin bgcenter($img){
background:url('../img/bg/#{$img}.png') no-repeat 50% 50%;
}
.bg1{@include(vs1);}
.bg2{@include(vs2);}

function 함수

인수가 없어도 괄호 필요 ```scss @function 함수이름($매개변수) { @return 값 }

/* 예) */ $max-width: 980px; @function columns($number: 1, $columns: 12) { @return $max-width * ($number / $columns) } .box1 { width: columns(8); } ```

색상(RGB / HSL / Opacity) 함수

mix($color1, $color2) : 두 개의 색을 섞는다.
lighten($color, $amount) : 더 밝은색을 만든다.
darken($color, $amount) : 더 어두운색을 만든다.
saturate($color, $amount) : 색상의 채도를 올린다.
desaturate($color, $amount) : 색상의 채도를 낮춘다.
grayscale($color) : 색상을 회색으로 변환한다.
invert($color) : 색상을 반전시킨다.
rgba($color, $alpha) : 색상의 투명도를 변경한다.
opacify($color, $amount) / fade-in($color, $amount) : 색상을 더 불투명하게 만든다.
transparentize($color, $amount) / fade-out($color, $amount) : 색상을 더 투명하게 만든다.

문자(String) 함수

unquote($string) : 문자에서 따옴표를 제거한다.
quote($string) : 문자에 따옴표를 추가한다.
str-insert($string, $insert, $index) : 문자의 index번째에 특정 문자를 삽입한다.
str-index($string, $substring) : 문자에서 특정 문자의 첫 index를 반환한다.
str-slice($string, $start-at, [$end-at]) : 문자에서 특정 문자(몇 번째 글자부터 몇 번째 글자까지)를 추출한다.
= 세번째 인수를 기재하지 않으면, 마지막 순서까지 출력
to-upper-case($string) : 문자를 대문자를 변환한다.
to-lower-case($string) : 문자를 소문자로 변환한다.

숫자(Number) 함수

percentage($number) : 숫자(단위 무시)를 백분율로 변환한다.
round($number) : 정수로 반올림한다.
ceil($number) : 정수로 올림한다.
floor($number) : 정수로 내림(버림)한다.
abs($number) : 숫자의 절대 값을 반환한다.
min($numbers…) : 숫자 중 최소 값을 찾는다.
max($numbers…) : 숫자 중 최대 값을 찾는다.
random() : 0 부터 1 사이의 난수를 반환한다.

List 함수

모든 List 내장 함수는 기존 List 데이터를 갱신하지 않고 새 List 데이터를 반환한다. 모든 List 내장 함수는 Map 데이터에서도 사용할 수 있다.

length($list) : List의 개수를 반환한다.
nth($list, $n) : List에서 n번째 값을 반환한다.
set-nth($list, $n, $value) : List에서 n번째 값을 다른 값으로 변경한다.
join($list1, $list2, [$separator]) : 두 개의 List를 하나로 결합한다.
zip($lists…) : 여러 List들을 하나의 다차원 List로 결합한다.
index($list, $value) : List에서 특정 값의 index를 반환한다.

Map 함수

모든 Map 내장 함수는 기존 Map 데이터를 갱신하지 않고 새 Map 데이터를 반환한다.

map-get($map, $key) : Map에서 특정 key의 value를 반환한다.
map-merge($map1, $map2) : 두 개의 Map을 병합하여 새로운 Map를 만든다.
map-keys($map) : Map에서 모든 key를 List로 반환한다.
map-values($map) : Map에서 모든 value를 List로 반환한다.

관리(Introspection) 함수

variable-exists(name) : 변수가 현재 범위에 존재하는지 여부를 반환한다. (인수는 $없이 변수의 이름만 사용한다.)
unit($number) : 숫자의 단위를 반환한다.
unitless($number) : 숫자에 단위가 있는지 여부를 반환한다.
comparable($number1, $number2) : 두 개의 숫자가 연산 가능한지 여부를 반환한다.

주의사항

while 조건문은 무한루프에 빠질 가능성이 있어 비추천

박은정