Frontend

[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 50회차 미션

두바이유 2020. 9. 28. 23:12

패스트캠프 프론트엔드 인강 50일차 지난시간에 이어 Sass(SCSS)의 @while과 내장함수에 대해 알아보았다.

@while

@while은 조건이 false로 평가될 때까지 내용을 반복합니다.
while문과 유사하게 잘못된 조건으로 인해 컴파일 중 무한 루프에 빠질 수 있어서 사용을 권장하지않는다. 

@while 조건{ 
	//반복내용 
}
$i:6;

@while $i > 0{
	.item-#{$i}{
		width:2px * $i;
	}
	$i: $i-2;
}

 

무한루프에 빠질위험이있기때문에 for each로 권장된다.

내장함수(Built-in Functions)

Sass에서 기본적으로 제공하는 내장 함수에는 많은 종류가 있다.
모두 소개하지 않고, 강의에서는 주관적인 경험에 의해 필요하거나 필요할수 있는 함수만 정리하였다.
Sass Built-in Functions에서 모든 내장함수를 확인할 수 있다.

[]는 선택가능한 인수(argument)이다.
Zero-based numbering을 사용하지않는다.

 

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

 

문자(String)함수
unquote($tring):문자에서 따옴표를 제거한다.
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):문자를 소문자로 변환.

.div{
	width:str-insert("abcd", "xxx", 4);
	height:str-index("abcd", "c");
	position:str-slice("abcd", 3); //cd
	//position:str-slice("abcd", 2, 3);//bc
}

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

일일이 다 외울필요는없고
특정한색을 반전하는 내장함수가있었는데? 라고 기능들을 기억한다음에 내장함수를 쉽게찾을수있다.

 

 

반응형