14_SCSS_함수

함수(Functions)
자신의 함수를 정의하여 사용할 수있다.
Mixins과 거의 유사하지만 반환하는 내용이 다르다.

mixin은 지정한 스타일을 반환하는 반면, 함수는 연산된 특정 값을 반환하는 개념이다.

즉 보통 언어에서 사용되는 함수의 개념과 같다.

함수 사용 예시

사용 방법은 위와 같으니 간략하게 보고 넘어가보자.

함수 이름 중복

함수는 함수이름을 그대로 사용하기 때문에 SCSS의 내장함수와 이름이 겹치는 경우가 발생할 수 있다.
예를들어 SCSS안에 이미존재하는 red()를 만들었다면 문제가 생길 수 있으며 extract-red()이런식으로 별도의 접두어를 두어서 사용해야 한다.

내장함수를 다 외우는것은 불가능하기에 my_red() 이런식으로 프로젝트마다 정해두는것도 방법이다.



if(함수)

조건의 값(bool)에 따라 두개의 표현식 중 하나만 반환한다

문법중에 
조건 ? a : b 
이것과 상당히 유사하다. 나는 아직 js는 공부를 안했고, soc의 베릴로그를 공부하면서 접해보았는데 이해가 쉽게 되었다.

조건이 참이냐 거짓이냐에 따라 표현식을 지정한며 문법은
if(조건, 표현식1,표현식2)와 같다.

if사용방법

@if (지시어)
if조건문과 유사하다!

@else와 @else if를 사용하여 조금더 복잡한 구조를 짤 수 있다.
조건에 ()는 생략이 가능하니 ()없이 조금더 간략하게 적을수도 있다.

@if와 if를 사용한 예시

 

반복문

@for
일반적 언어의 for문과 유사하다.

through를 사용하는 형식과 to를 사용하는 형식으로 나뉘게 된다.

// through
// 종료 만큼 반복
@for $변수 from 시작 through 종료 {
  // 반복 내용
}

// to
// 종료 직전까지 반복
@for $변수 from 시작 to 종료 {
  // 반복 내용
}

thorugh과 to는 반복횟수에서 마지막 횟수를 포함할껀지 아닌지가 차이점이다.

// 1부터 3번 반복
@for $i from 1 through 3 {
  .through:nth-child(#{$i}) {
    width : 20px * $i
  }
}

// 1부터 3 직전까지만 반복(2번 반복)
@for $i from 1 to 3 {
  .to:nth-child(#{$i}) {
    width : 20px * $i
  }
}

through과 to의 차이

@each
List와 Map 데이터를 반복하게 사용되며
for in 문과 굉장히 유사하다

나는 파이썬에서 사용했기에 익숙했는데 JS의 문법도 같다고 하니 배울때 조금 더 쉽게 배울 수 있을 것 같다.

list길이가 같다면, 여러개의 list를 반복처리할수도 있다.

$apple: (apple, korea);
$orange: (orange, china);
$banana: (banana, japan);

@each $fruit, $country in $apple, $orange, $banana {
  .box-#{$fruit} {
    background: url("/images/#{$country}.png");
  }
}

each

index()를 활용한 each

map반복 추출할때 내장함수로 map-keys나 map-values라는 내장함수를 쓸 수 있다. 파이썬의 딕셔너리에서 키값과 value값을 빼내는것과 유사하다고 생각하면 되겠다.

 

map-key를 활용

while

 일반언어의 while문과 유사하며 무한루프에 빠지지 않게 조심해야 한다.

@while (조건문) 으로 선언하여 사용한다.


내장함수(Built-in Funtions)
SCSS안에는 굉장히 많은 내장함수가 있지만 꽤 중요하거나 자주 사용한 함수들만 몇개 소개해보겠다.

http://sass-lang.com/documentation/Sass/Script/Functions.html

아래 링크에서 전체 함수를 확인할 수 있다.

[]는 쓰면 옵션처럼 쓸수있고 없어도 함수가 구동하는데는 문제가 없는 인자들이다.
특히, 함수들에서 보통 0부터 숫자를 세는데 이 아이들은 1부터 사용하니 주의하고 보면 되겠다.


색상 함수
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) : 색상을 더 투명하게 만듭니다.

문자 함수
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) : 문자를 소문자로 변환합니다.

문자함수 중 사용예시

숫자 함수
percentage($number) : 숫자(단위 무시)를 백분율로 변환합니다.

round($number) : 정수로 반올림합니다.

ceil($number) : 정수로 올림합니다.

floor($number) : 정수로 내림(버림)합니다.

abs($number) : 숫자의 절대 값을 반환합니다.

min($numbers…) : 숫자 중 최소 값을 찾습니다.

max($numbers…) : 숫자 중 최대 값을 찾습니다.

random() : 0 부터 1 사이의 난수를 반환합니다.

list함수
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-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) : 두 개의 숫자가 연산 가능한지 여부를 반환합니다.


이렇게 SCSS 문법을 공부하여 보았다.