SASS 코드 종류 2 (재활용, 함수, 연산자, 조건문, 반복문, 내장함수)

1. 코드의 종류

 

인수	인수설정
	인수의 기본값 설정
	가변 인수
재활용	@mixin	재활용
	@include	불러오기
	@content	속성 등 추가
함수	@function, @return	함수
연산	==	동등
	!=	부등
	<	보다 작은
	>	보다 큰
	<=	보다 작거나 같은
	>=	보다 크거나 같은
	and	그리고
	or	또는
	not	부정
조건문	if	3항연산자
	@if	if문
	@else if	if문
반복문	@for $i from 1 through 3	for문
	@each $list in $lists	for in 문
	@while	while문

2. 코드 예시문

 

1. 인수

함수의 인자를 생각하면 쉽다.

인수설정 - $변수명

@mixin test($color) {
  background: $color;
}
header {
  width: 100%;
  ul {
    width: 50%;
    li {
      float: left;
      @include test(red);
    }
  }
}

  

인수의 기본값 설정 - $변수명: 값

@mixin test($color: black) {
  background: $color;
}
header {
  width: 100%;
  ul {
    width: 50%;
    @include test;
    li {
      float: left;
      @include test(red);
    }
  }
}

 

가변 인수 - $변수명...

@mixin test($width, $height, $color...) {
  width: $width;
  height: $height;
  background: $color;
}
header {
  width: 100%;
  ul {
    width: 50%;
    li {
      float: left;
      @include test(
      100px,
      200px,
      red,
      black,
      blue
      );
    }
  }
}

  

2. 재활용

재활용 설정 - @mixin 재활용명

재활용 불러오기 - @@include 재활용명

@mixin test($color) {
  padding: 10px;
  background: $color;
}
header {
  width: 100%;
  ul {
    width: 50%;
    li {
      float: left;
      @include test(red);
    }
  }
}

속성 등 추가 - @content

@mixin test($color) {
  padding: 10px;
  background: $color;
  @content;
}
header {
  width: 100%;
  ul {
    width: 50%;
    li {
      float: left;
      @include test(red){
        margin: 10px;
      };
    }
  }
}

3. 함수

함수 설정 - @function 함수명

                @return

함수 불러오기 - 함수명()

@function test($num_1: 1, $num_2: 10) {
  @return $num_1 * $num_2;
}
header {
  width: 100%;
  ul {
    width: 50%;
    margin: test();
    li {
      float: left;
      margin: test(2, 2);
    }
  }
}

4. 조건문

조건문 1 - if(조건, true값, false값)

※3항연산자라고 생각하면 된다.

header {
  width: 100%;
  ul {
    width: 50%;
    li {
      float: if(10 > 1, left, null);
    }
  }
}

조건문 2 - @if 조건{true값} @else if{true값} @else{true값}

※일반적인 if문이라 생각하면 된다.

$float: left;
header {
  width: 100%;
  ul {
    width: 50%;
    li {
      @if $float == left {
        float: left;
      } @else if $color == right {
        float: right;
      } @else {
        float: none;
      }
    }
  }
}

5. 반복문

반복문 1 - @for 변수 from 시작값 to 끝값 {}

※일반적인 for문이라 생각하면 된다.

header {
  width: 100%;
  ul {
    width: 50%;
    li {
      float: left;
      @for $i from 1 to 4 {
        &:nth-child(#{$i}) {
          width : 10px * $i
        }
      }
    }
  }
}

반복문 2 - @each 변수 in 변수 {}

※for in문 이라 생각하면 된다.

$colors: (
1: red,
2: black,
3: blue
);
header {
  width: 100%;
  ul {
    width: 50%;
    li {
      float: left;
      @each $num, $color in $colors {
        &:nth-child(#{$num}) {
          background-color: $color;
        }
      }
    }
  }
}

반복문 3 - @while 조건 {}

※while문 이라 생각하면 된다.

$i: 1;
header {
  width: 100%;
  ul {
    width: 50%;
    li {
      float: left;
      @while $i < 3 {
        &:nth-child(#{$i}) {
          width: 10px * $i;
        }
        $i: $i + 1;
      }
    }
  }
}

6. 내장함수

SASS 내장 함수 관련 웹페이지

SASS 내에도 내장함수가 있어 불러 사용할수있다.