Taeyoung Kim(RaccoonCode96)

Go for IT! Raccooncode’s TIL blog.

20210522 SCSS, Sass 02 : mixin(@mixin, @include), 반복문(@for), 함수(@function), 색상 내장함수, 다른파일 참조하기(@import), 데이터 종류, @each, @content

3 분 소요

SCSS 02

mixin

  • JS의 함수처럼 코드를 재활용 하고자 하는 경우, 변수와 다르게 여러개의 코드들을 @mixin 이름을 통해서 선언하고, @include 이름을 통해서 사용 가능함
  • 또한 함수처럼 매개변수를 지정하여 인수도 넣을 수 있음
  • 인수와 매개변수는 순서가 있음 (정확한 위치에 넣어야 정상적으로 인식함)
  • 매개변수의 기본 값을 넣어주는 경우 매개변수명: 기본값으로 선언부에서 매개변수를 만들어 주면 기본값을 사용할 수 있음
  • 기본값을 넣어주고 건너 띄어 순서를 맞추기 위해서는 키워드 인수 를 사용해야함
    • 매개변수명: 값 을 인자로 넣으면 해당 매개변수로 정확하게 인수가 들어감 (순서 상관 없이)
  • 주의) 함수 개념은 따로 있음

SCSS

/* scss */
/* @mixin */
@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 매개변수 사용과, 매개변수 기본값 */
@mixin box($size: 80px, $color: tomato) {
  width: $size;
  height: $size;
  background-color: $color;
}

/* @include : 호출 */
.container {
  @include center;
  @include box(200px, blue);
  .item {
    @include center;
    @include box($color: green);
  }
}

.box {
  @include center;
  @include box(100px, tomato);
}

CSS

/* css */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  background-color: blue;
}
.container .item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  background-color: green;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  background-color: tomato;
}




반복문 (loop)

  • JS 처럼 반복문을 제공함
  • @for 변수 from 시작 through 끝 {}
  • 숫자는 1부터 시작 (zero base 아님)
  • 변수는 선택자에서의 경우 보간 방법을 취해야함
  • 속성이 들어가는 부분에서는 보간을 안해도 됨

SCSS

/* scss */
@for $i from 1 through 10 {
  .box:nth-child(#{$i}) {
    width: 100px * $i;
  }
}

CSS

/* css */
.box:nth-child(1) {
  width: 100px;
}

.box:nth-child(2) {
  width: 200px;
}

.box:nth-child(3) {
  width: 300px;
}

.box:nth-child(4) {
  width: 400px;
}

/* ... 10 까지 작성 됨(길이상 생략)*/




함수

  • @mixin : 코드 재활용 용도 (스타일을 다루는 용도)
  • @function : 실제로 연산을 해서 반환된 결과를 사용하기 위함 (일반적인 값의 크기 처리)

SCSS

/* scss */
@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@function ratio($size, $ratio) {
  @return $size * $ratio;
}

.box {
  $width: 100px;
  width: $width;
  height: ratio($width, 9/16);
  @include center;
}

CSS

/* css */
.box {
  width: 100px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}




색상 내장 함수

  • color 계열의 속성의 값을 변경해주는 함수
  • mix, lighten, darken, saturate, desaturate, grayscale, invert, rgba

SCSS

/* scss */
.box {
  $color: royalblue;
  width: 200px;
  height: 100px;
  margin: 20px;
  border-radius: 10px;
  background-color: $color;
  &:hover {
    background-color: darken($color, 10%);
  }
  &.built-in {
    background-color: mix($color, red); /* 섞음 */
    background-color: lighten($color, 10%); /*밝게*/
    background-color: darken($color, 10%); /*어둡게*/
    background-color: saturate($color, 40%); /*채도 업*/
    background-color: desaturate($color, 40%); /*채도 다운*/
    background-color: grayscale($color);
    background-color: invert($color); /*반전*/
    background-color: rgba($color, 0.2); /*투명도*/
  }
}




다른 파일 가져와 참조하기

  • 기존 CSS는 @import url('경로') 사용
  • SCSS는 @import '경로' (확장자 생략 가능)
  • , 쉼표를 통해 여러개의 파일을 한번에 참조 가능

SCSS

/* scss */
/* @import url('./sub.scss'); */
@import "./sub", "./sub2";
$color: royalblue;

.container {
  h1 {
    color: $color;
  }
}




데이터 종류

  • 숫자
  • 문자
  • 색상
  • 논리
  • null
  • list(Array)
  • map(Object)

SCSS

/* scss */
$number: 1; /* .5, 100px, lem */
$string: bold; /* relative, "../images/a.png" */
$color: red; /* blue, #FFFF00, rgba(0,0,0,.1) */
$boolean: true; /* false */
$null: null;
$list: orange, royalblue, yellow; /* JS의 배열 데이터 같은 느낌 (쉼표를 순서대로 적어 놓은 배열과 유사) */
$map: (
  /* 객체 데이터와 유사함 key - value 구조 */ o: orange,
  r: royalblue,
  y: yellow
);

.box {
  width: 100px;
  color: red;
  position: null;
}




@each 반복문

list 형태 반복시

scss

/* scss */
$list: orange, royalblue, yellow;
@each $c in $list {
  .box {
    color: $c;
  }
}

css

/* css */
.box {
  color: orange;
}

.box {
  color: royalblue;
}

.box {
  color: yellow;
}


map 형태 반복시

  • key, value 형태를 활용 할수 있음

scss

/* scss */
$map: (
  o: orange,
  r: royalblue,
  y: yellow,
);
@each $k, $v in $map {
  .box-#{$k} {
    color: $v;
  }
}

css

/* css */
.box-o {
  color: orange;
}

.box-r {
  color: royalblue;
}

.box-y {
  color: yellow;
}




재활용 @content

  • mixin을 통해서 재활용 하는 경우, mixin에서 재활용 하는것에 일부 코드를 추가하고 싶을 경우
  • @mixin안에 @content 키워드를 넣고, @include 이름 {내용} 처럼 활용하면 해당 파트에서만 mixin의 내용과 합쳐져서 들어가게 된다.

scss

/*scss*/
@mixin left-top {
  position: absolute;
  top: 0;
  left: 0;
  @content;
}

.container {
  width: 100px;
  height: 100px;
  @include left-top;
}

.box {
  width: 200px;
  height: 300px;
  @include left-top {
    bottom: 0;
    right: 0;
    margin: auto;
  }
}

css

.container {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
}

.box {
  width: 200px;
  height: 300px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

태그: ,

업데이트:

참고