SCSS 함수

HTML & CSS / Sass & SCSS

자신의 함수를 정의하여 사용할 수 있다. 함수와 Mixins는 거의 유사하지만, 반환되는 내용이 다르다.

함수

함수는 @include 같은 별도의 지시어 없이 사용하기 때문에 내가 지정한 함수와 내장 함수(Built-in Functions)의 이름이 충돌할 수 있기 때문에 내가 지정한 함수에는 별도의 접두어를 붙여주는 것이 좋다.

내장함수
응용 프로그램에 내장되어 있으며 최종 사용자가 액세스 할 수 있는 기능. 이미 색의 빨강 성분을 가져오는 내장 함수로 red( )가 있다. 같은 이름을 사용하면 충돌하기 때문에 별도의 접두어를 붙여서 extract-red( )같은 이름을 사용할 수 있다.


Mixin과 함수의 차이

  • Mixin
    • 지정한 스타일(속성값)을 반환
    • @include 지시어 사용
  • 함수
    • 연산된 특정 값을 @return 지시어를 통해 반환
    • 함수 이름으로 바로 사용
    • 인수가 없더라도 소괄호를 열고 닫아 주어야 함
1
2
3
4
5
6
7
8
9
// Mixins
@mixin 믹스인이름($매개변수) {
  스타일;
}

// Functions
@function 함수이름($매개변수) {
  @return 값
}
1
2
3
4
5
// Mixin
@include 믹스인이름(인수);

// Functions
함수이름(인수)

SCSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@function columns($number: 1, $columns: 12, $width: 1200px){
  @return $width * ($number/$columns);
}
// columns와 width는 똑같은 인수로 넣을 것이기 때문에
// 굳이 인수로 집어넣지 않는다.
.container {
  $width: 1200px;
  .item:nth-child(1){
    width: columns();
  }
  .item:nth-child(2){
    width: columns(8);
  }
  .item:nth-child(3){
    width: columns(3);
  }
}

Compiled CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.container {
  /* 총 너비 */
  width: 1200px;
}
.container .item:nth-child(1) {
  width: 100px;
}
.container .item:nth-child(2) {
  width: 800px;
}
.container .item:nth-child(3){
  width: 300px;
}
}

조건과 반복(Control Directives / Expressions)

if(함수)

조건의 값(true, false)에 따라 두 개의 표현식 중 하나만 반환. 조건부 삼항 연산자(conditional ternary operator)와 비슷하다.

조건의 값이 true면 표현식1을, 조건이 값이 false면 표현식2를 실행한다.

1
if(조건, 표현식1, 표현식2)

if (지시어)

@if 지시어는 조건에 따른 분기 처리가 가능하며 if문 (if statements) 과 유사하다.

  • 같이 사용할 수 있는 지시어는 @else, if가 있다.
  • 추가 지시어를 사용하면 더 복잡한 조건문을 작성할 수 있다.
  • 조건에 ( )는 생략 가능하다.
  • 조건에는 논리 연산자 and, or, not을 사용할 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// @if
@if (조건) {
  /* 조건이 참일 때 구문 */
}

// @if @else
@if (조건) {
  /* 조건이 참일 때 구문 */
} @else {
  /* 조건이 거짓일 때 구문 */
}

// @if @else if
@if (조건1) {
  /* 조건1이 참일 때 구문 */
} @else if (조건2) {
  /* 조건2가 참일 때 구문 */
} @else {
  /* 모두 거짓일 때 구문 */
}

for

@for는 스타일을 반복적으로 출력 한다. for문과 유사 하다. :nth-child()에서 유용하게 사용되는 @for는 through를 사용하기를 권장한다.

  1. through를 사용하는 형식: 1부터 해당 숫자까지 반복
  2. to를 사용하는 형식: 1부터 해당 숫자 직전까지 반복
1
2
3
4
5
6
7
8
9
10
11
// through
// 종료 만큼 반복
@for $변수 from 시작 through 종료 {
  // 반복 내용
}

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

each

@each는 List와 Map 데이터를 반복 할 때 사용한다. for in 문과 유사 하다.

  1. 매번 반복마다 Index 값이 필요하다면 index( ) 내장 함수를 사용할 수 있다.
  2. 동시에 여러개의 List 데이터를 반복 처리할 수도 있다. (단, 각 데이터의 Length가 동일해야 함)
  3. Map 데이터를 반복할 겨우 하나의 데이터에 두 개의 변수가 필요하다.
1
2
3
@each $변수 in 데이터 {
  // 반복 내용
}

while

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

1
2
3
@while 조건 {
  // 반복 내용
}

REFERENCE
https://heropy.blog/2018/01/31/sass/

  • © 2020-2025 404 Not Found
  • Powered by Hexo Theme Ayer