SCSS: SCSS Ep.5

20 Dec 2022 • TIL

반복문

@for $i from 1 through 10 {
	.box:nth-child() {
		width: 100px;
	}
}
  • ‘@for’을 통해서 반복문을 시작한다.
  • 내부에서 사용할 반복 변수는 통상적으로 ‘$i’로 사용한다.
  • through 앞에는 시작할 숫자, 뒤에는 끝날 숫자를 작성한다.
    1 through 10이라면 1부터 시작해서 10까지 반복된다. 총 10번 반복.
    css는 js과 달리 제로 베이스가 아니기 때문에 1부터 시작을 해준다.
@for $i from 1 through 10 {
	.box:nth-child(#{$i}) {
		width: 100px * $i;
	}
}

단순하게 박스 클래스만 반복하는 것은 유용하게 사용이 불가능하기 때문에 nth-child를 추가하여 유용하게 사용할 수 있도록 해본다.

  • nth-child() 가상 클래스 추가하기
    소괄호에 몇번째인지 표시할 수 있게 된다.
  • .box:nth-child()는 css 선택자로, i라는 변수가 가지고 있는 숫자를 그대로 명시할 수 가 없다.
  • 문자 보간 방식을 통해 숫자를 명시할 수 있도록 한다.
    JS에서 백틱기호 사이에 문자 데이터에다가 자바스크립트 데이터를 채우기 위해서 보간이라는 특수한 문법 사용했었다.
    SCSS 또한 보간을 지원한다.
  • SCSS에서 보간은 ‘${ }’이 아닌 ‘#{ }’을 통해서 괄호 안에 데이터를 채워넣는 방식이다.
  • 추가로, 연산할때에는 보간을 사용할 필요가 없다!
    위에서 보간처리를 한 것은 값을 적는 부분이 아니기 때문에 해준 것이다.
    연산에서는 값을 작성하기 때문에 보간을 할 필요가 없다.

함수

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

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

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

.box {
  width: 100px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
  • @function 키워드는 지정한 이름(ratio)의 함수를 만들어 낸다.
  • @return 키워드는 해당하는 값($ratio * $size)을 함수 밖으로 내보내는 역할을 한다.

  • mixin과 function 키워드의 차이점

    mixin은 css코드의 모음집이라고 보면 된다.
    css의 속성과 값을 나열해서 재활용이 가능한 부분들을 재활용하기 위해서 사용하는 용도이다.

    function은 어떤 값을 따로 연산을 해서 반환된 결과로 사용하기 위해서 만드는 용도이다.
    function 키워드가 우리가 익히 아는 JS의 함수 개념과 훨씬 유사하다.

색상 내장 함수

<div class="box"></div>
<div class="box built-in"></div>

.box {
  $color: royalblue;
  width: 200px;
  height: 100px;
  margin: 20px;
  border-radius: 10px;
  background-color: $color;
  &.built-in {
    background-color: $color;
  }
}

  • mix()

    첫번째 인수의 색상과 두번째 인수의 색상을 섞어서 새로운 색상을 만들어 낸다.

    .box {
  $color: royalblue;
  background-color: $color;
  &.built-in {
    background-color: mix($color, red);
  }
}

  • lighten()

    첫번째 인수에는 색상을, 두번째 인수에는 수치(%)를 넣는다.
    첫번째 인수의 색상이 해당 수치만큼 밝아진다.

    .box {
  $color: royalblue;
  background-color: $color;
  &.built-in {
    background-color: lighten($color, 10%);
  }
}

  • darken()

    첫번째 인수에는 색상을, 두번째 인수에는 수치(%)를 넣는다.
    첫번째 인수의 색상이 해당 수치만큼 어두워진다.

    .box {
  $color: royalblue;
  background-color: $color;
  &.built-in {
    background-color: darken($color, 10%);
  }
}

    • 사용 예제

      hover시 박스의 색상을 약간 더 어둡게 변경하고 싶을 때 사용하기 유용하다.
      특히, 버튼을 만들 때 굉장히 유용하게 사용이 가능하다.

      .box {
  $color: royalblue;
  background-color: $color;
  &:hover {
    background-color: darken($color, 10%);
  }
}

  • saturate()

    첫번째 인수에 해당하는 색상을 두번째 인수의 수치만큼 채도를 높여준다.

    .box {
  $color: royalblue;
  background-color: $color;
  &.built-in {
    background-color: saturate($color, 60%);
  }
}

  • desaturate()

    첫번째 인수에 해당하는 색상을 두번째 인수의 수치만큼 채도를 낮춰준다.

    .box {
  $color: royalblue;
  background-color: $color;
  &.built-in {
    background-color: desaturate($color, 60%);
  }
}

  • grayscale()

    인수의 색상을 회색으로 변경시켜준다. (두번째 인수는 필요하지 않다.)

    .box {
  $color: royalblue;
  background-color: $color;
  &.built-in {
    background-color: grayscale($color);
  }
}

  • invert()

    인수의 색상을 반전 시켜준다. (두번째 인수는 필요하지 않다.)

    .box {
  $color: royalblue;
  background-color: $color;
  &.built-in {
    background-color: invert($color);
  }
}

  • rgba()

    첫번째 인수로는 원하는 색상, 두번째 인수로는 색상의 투명도를 넣어준다.
    기존 css에서는rgba(0,0,0, .5) 형식으로 작성해야 했다.
    css에서는 쓸대없이 길어서 불편했던 것이 인수 2개만 넣어주면 되는 것으로 간편해 졌기에 많이 사용하게 된다.

    .box {
  $color: royalblue;
  background-color: $color;
  &.built-in {
    background-color: rgba($color, .5);
  }
}

가져오기

@import

@import url("./sub.scss");

$color: royalblue;

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

css의 선언방식에서 import 키워드는 css가 css를 가져올 수 있도록 해준다.
url 함수를 통해서 연결하기를 원하는 scss 파일의 경로를 넣어준다.

  • 더 간편하게 줄이기 (SCSS)

    scss에서는 url 함수를 사용하지 않아도 해당하는 내용이 정상적으로 작동한다.

    @import "./sub.scss";

    추가로, scss에서는 확장자를 명시하지 않아도 작동한다.

    @import "./sub";

  • 쉼표를 통해서 다른 파일도 가져올 수 있다.

    @import "./sub", "./sub2";
 TIL  SCSS

Comments

Related Posts