[SASS] 8강 SASS의 @function - OSSAM강좌

 

 

 

 

** 영상으로 보실 분은 아래 주소를 클릭해주세요.

https://youtu.be/0x_OI9twdRs

 

 

 

 

 

 

 

 

 

 

 

1. @function 문법

- 사용자가 함수를 직접 정의하여 사용할 수 있습니다.

- @mixin과 비슷해보이지만 반환되는 내용이 다릅니다. 

- @mixin은 지정한 스타일을 반환하지만 @function(함수)는 연산된 값을 @return키워드로 반환합니다. 

 

 

 

 

1) 문법

## 선언 문법

@mixin 믹스인명($매개변수){
	스타일
}


==============================================================


@function 함수명($매개변수){
	@return 값;
}

 

 

 

## 호출문법

/* @mixin 호출 */
@include 믹스인이름(인수);


===========================================


/* @function 호출 */
함수명(인수);

 

 

 

 

 

 

 

 

 

 

 

 

 

2) 기본 예제

- 1180px의 박스안에 12컬럼을 지정하고 각각의 박스에 몇컬럼을 차지할지 지정해보도록 하겠습니다.

 

 

## HTML코드

<div class="boxwrap">
  <div class="box01"></div>
  <div class="box02"></div>
  <div class="box03"></div>
</div>

- 전체를 묶는 [boxwrap]이 있고 그 안에 각각의 클래스를 준 div를 작성해주세요.

 

 

 

## SASS코드

//boxwrap의 가로 사이즈를 담을 변수
$max-width : 1180px;

//12컬럼그리드
//박스가 가지는 컬럼수에 따라 가로사이즈가 지정되는 함수
@function columns($number: 1, $all: 12){
    @return $max-width * ($number / $all);
}

.boxwrap{
    width: $max-width;
    margin: 0 auto;
    border: 3px solid black;

    .box01{
        width: columns(); //1개 - 1/12
        height: 100px;
        background-color: red;
    }
    .box02{
        width: columns(6); //6개 - 6/12
        height: 100px;
        background-color: green;
    }
    .box03{
        width: columns(12); //12개 - 12/12
        height: 100px;
        background-color: blue;
    }
}

 

 

 

## CSS코드

.boxwrap {
  width: 1180px;
  margin: 0 auto;
  border: 3px solid black;
}

.boxwrap .box01 {
  width: 98.33333px;
  height: 100px;
  background-color: red;
}

.boxwrap .box02 {
  width: 590px;
  height: 100px;
  background-color: green;
}

.boxwrap .box03 {
  width: 1180px;
  height: 100px;
  background-color: blue;
}

- 각각의 box들에 width가 각각 적용되어 잘 들어가는 것을 확인할 수 있습니다.

- 위의 예제와 같이 @function은 계산을 통한 값을 반환하는 키워드입니다.

 

 

 

## 브라우저 결과

- 빨간박스(.box01)은 1/12를 차지하고 있습니다.

- 녹색박스(.box02)은 6/12를 차지하고 있습니다. 결과적으로 반을 차지 합니다.

- 파란박스(.box03)은 12/12를 차지하고 있습니다. 결과적으로 전체를 차지 합니다. 

 

 

 

 

 

 

 

 

 

 

 

 

2. @function - 함수명 지정시 유의 사항

1) 내장함수

- SASS에 미리 내장되어 있는 함수를 내장함수라고 합니다. 그 함수들은 이름이 미리 지정되어 있습니다.

- 전부 볼수는 없으므로 예시만 보고 나올때 따로 설명드리겠습니다.

- 전부 확인해보고 싶은 분은 아래 주소를 클릭하세요.

https://sass-lang.com/documentation/modules

Sass: Built-In Modules

 

 

 

 

 

 

2) @function함수명 지정시 유의사항

- 내장함수명을 개발자가 가져다가 사용하면 안됩니다.

- 같은 이름을 사용하면 이름이 충돌하기 때문에 같이 사용하지 않도록 앞에 접두어를 사용하는 것이 좋습니다. 

 

 

## lighten() - 원래 색상보다 밝게 처리하는 함수

$mainColor: #0099ff;

button{
    border: none;
    padding: 5px 20px;
    border-radius: 5px;
    background-color: $mainColor;

    &.btn02{
        background-color: lighten($mainColor, 20%);
    }
}

 

 

 

## 브라우저 결과

 

 

 

 

## 접두어를 붙여 lighten()을 사용하지 않기

$mainColor: #0099ff;

button{
    border: none;
    padding: 5px 20px;
    border-radius: 5px;
    background-color: $mainColor;

    &.btn02{
        background-color: lighten($mainColor, 20%);
    }
    
}

@function my-lighten($num){
    @return 0.1 * $num;
}

.btn03{
    opacity: my-lighten(2);
}

 

 

 

## 브라우저 결과