이미지 보기

[SCSS] 조건문, 반복문, 함수

22.06.30 작성

읽는 데 7분

조건문

@if

특정 조건의 T/F 여부에 따라 스타일을 다르게 적용

@if (조건) {
  // 조건이 참일 때 실행될 구문
}

// circle이 false면 사각형을, true이면 원형으로 스타일함
@mixin avatar($size, $circle: false) {
  width: $size;
  height: $size;

  @if $circle {
    border-radius: $size / 2;
  }
}

.square-av {
  @include avatar(100px, $circle: false);
}
.circle-av {
  @include avatar(100px, $circle: true);
}

@else

@if 문에서 조건이 F인 경우 실행할 구문 추가

@if (조건) {
  // 조건이 참일 때 실행될 구문
} @else{
  // if문의 조건이 거짓일 때 실행될 구문
}

// true이면 밝은 색, false면 어두운 색을 스타일
$light-background: #f2ece4;
$light-text: #036;
$dark-background: #6b717f;
$dark-text: #d2e1dd;

@mixin theme-colors($light-theme: true) {
  @if $light-theme {
    background-color: $light-background;
    color: $light-text;
  } @else {
    background-color: $dark-background;
    color: $dark-text;
  }
}

.banner {
  @include theme-colors($light-theme: true);
  body.dark & {
    @include theme-colors($light-theme: false);
  }
}

@else if

여러 조건을 사용하는 경우 사용

if (조건){
  // 조건이 참일 때 실행될 구문
} @else if(조건){
  // else if 조건이 참일 때 실행될 구문
} @else{
  // 위에 모든 조건이 거짓일 때 실행될 구문
}

// 조건에 해당하는 방향에 맞춰서 border-bottom 컬러를 스타일함
@mixin triangle($size, $color, $direction) {
  height: 0;
  width: 0;

  border-color: transparent;
  border-style: solid;
  border-width: ($size/2);


  @if $direction == up {
    border-bottom-color: $color;
  } @else if $direction == right {
    border-left-color: $color;
  } @else if $direction == down {
    border-top-color: $color;
  } @else if $direction == left {
    border-right-color: $color;
  } @else {
    @error "Unknown direction #{$direction}.";
  }
}

.next {
  @include triangle(5px, black, right);
}

반복문

@for

for ($변수) from (시작) through(끝){
  // 반복할 내용
}

scss for 문

// Scss - for문
// for문을 이용해 nth-선택자에게 각각의 image를 배경에 넣어준다.
@for $i from 1 through 5 {
  .photo-box:nth-child(#{$i}) {
    background-image: url("../assets/phoster#{$i}.png");
  }
} 
// 범위 1이상 5이하
// for문에서 1부터 5까지 반복하라는 의미입니다. 총 5번 반복되면서 코드가 실행된다.
// 만약 from 3 throught 8 이라면 3에서 8까지 6번 실행된다.

css 컴파일 결과

/*CSS*/
.photo-box:nth-child(1) {
  background-image: url("../assets/phoster1.png");
}

.photo-box:nth-child(2) {
  background-image: url("../assets/phoster2.png");
}

.photo-box:nth-child(3) {
  background-image: url("../assets/phoster3.png");
}

.photo-box:nth-child(4) {
  background-image: url("../assets/phoster4.png");
}

.photo-box:nth-child(5) {
  background-image: url("../assets/phoster5.png");
}

여러 반복되는 것들을 한 번에 지정 가능
시작점과 도착점을 모두 포함
ex. from 1 through 5라면 1 이상 5 이하 범위

@each

list나 map의 내부 요소를 순회할 때 사용

@each ($변수) in (리스트나 맵){ 
  // 반복할 내용
}

// color-palette 리스트에 들어있는 색상을 each문을 사용하여 background에 색상값을 넣어준다.
$color-palette: #dad5d2 #3a3532 #375945 #5b8767 #a6c198 #dbdfc8;

@each $color in $color-palette {
  $i: index($color-palette, $color); //index는 list의 내장함수
  .color-circle:nth-child(#{$i}) {
    background: $color;
    width: 20px;
    height: 20px;
    border-radius: 50%;
  }
}

$space: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 20, 30;

@each $value in $space {
  .p-#{$value} {
    padding: $value + px;
  }

  .m-#{$value} {
    margin: $value + px;
  }
}

@while

특정 조건을 만족하는동안 코드를 무한 반복

@while 조건 {
  // 반복할 내용
}

// value값이 base보다 작을 때까지 일정한 값으로 계속 나눠준다.
@function scale-below($value, $base, $ratio: 1.618) {
  @while $value > $base {
    $value: ($value/$ratio);
  }
  @return $value;
}

$normal-font-size: 16px;
.sup {
  font-size: scale-below(20px, 16px);
}

/*CSS*/
.sup {
  font-size: 12.36094px;
}

빠져나오는 조건을 만드는 경우가 거의 없어서 사용 빈도 적음

function(+ 내장함수)

@function

python의 def 처럼 함수 정의
return을 이용해 값 반환
mixin과 비슷하지만 mixin은 스타일 코드 반환, function은 값 반환

@function 함수이름($매개변수) {
  // 실행 코드
  @return 값
}

// 거듭제곱을 구하는 함수
@function pow($base, $exponent) { 
  $result: 1;
  // 의미 없는 변수를 선언할 때에는 $_
  @for $_ from 1 through $exponent {
    // 등호 대신 colon(:) 사용
    $result: $result * $base;
  }
  @return $result;
}

.sidebar {
  float: left;
  margin-left: pow(4, 3) * 1px;
}


/*CSS*/
.sidebar {
  float: left;
  margin-left: 64px;
}

내장함수

lighten(color, amount) : 기존 색상의 밝기를 높임( 0%-100% 사이의 값 )
darken(color, amount) : 기존 색상의 밝기를 낮춤( 0%-100% 사이의 값 )
mix(color1, color2, weight) : 2개의 색상 혼합해 새로운 색상을 제작

max(number, ..) : 괄호에 넣은 값 중에 가장 큰 수 반환
min(number, ..) : 괄호에 넣은 값 중에 가장 작은 수 반환
parcentage(number) : 퍼센트로 숫자 변경
comparable(num1,num2) : 숫자1과 숫자2가 비교 가능한지 확인 후 T/F 반환

srt-insert(string,insert,index) : 문자열에 원하는 위치(index)에 문자를 넣은 후(insert), 새로운 문자열 반환
str-index(string,substring) : 문자열에서 해당 문자의 index 값 반환
to-upper-case(string) : 문자열 전부를 대문자로 변경
to-lower-case(string) : 문자열 전부를 소문자로 변경

unit(number) : 숫자의 단위를 반환
unitless(number) : 단위를 가지고 있는지 판단하여 T/F 반환
variable-exists(name) : 변수가 현재 범위에 존재하는지 판단하여 T/F 반환. 인수는 $ 없이 사용

FE Developer 박승훈

노력하는 자는 즐기는 자를 이길 수 없다

Github

[SCSS] 조건문, 반복문, 함수

TOC

조건문

@if

@else

@else if

반복문

@for

@each

@while

function(+ 내장함수)

@function

내장함수