[DAY-33] CSS 심화 (5)

Untitled

😉 헷갈렸던 & 몰랐던 부분들만 정리하는 나만의 TIL
😯 모든 강의 내용은 적지 않아요!

오늘의 소감은?
드디어 SCSS가 끝났습니다!
처음에는 CSS를 그냥 조금 더 간편하게 작성할 수 있구나~ 라는 느낌으로 SCSS를 공부하기 시작했는데, 그냥 새로운 언어 하나 더 배우는 느낌이 더 컸던..
CSS 스타일 속성들을 SCSS를 이용하면 정말 간편하게 작성할 수 있습니다.
앞으로 프로젝트를 진행할 때 SCSS를 더 적극적으로 활용해보도록 하겠습니다.
드디어 주먹구구로 적던 CSS를 가독성 좋게 적을 수 있겠어요 흑흑

하지만 아직 스타일 속성을 분리해서 @mixin을 만들고..
객체 형태로 분리해서 사용하는 것은 조금 익숙치가 않네요

[1] SCSS 확장

@extend를 사용하여 기존의 요소에 있던 속성들을 다른 요소에 적용시킬 수 있습니다.

Untitled 1

.btn-primary에도 .btn의 속성들이 적용된 것을 확인할 수 있습니다.

또한 상속의 개념으로도 사용할 수 있습니다.

하지만 이러한 방식으로 사용할 때, 중첩에 대한 사용을 최대한 피해야 선택자 폭팔의 부작용을 방지할 수 있습니다.

.container {
  .item {
    color: red;
    .box {
      @extend .item;
      &::after {
        content: "";
        @extend .item;
      }
    }
  }
}

/* 선택자 폭팔 */
.container .item,
.container .item .box::after,
.container .item .box::after .box,
.container .item .box {
  color: red;
}
.container .item .box::after {
  content: "";
}

% (placeholder 선택자)

%는 .btn와 같이 class 선택자를 사용하지 않고, @extend를 사용할 수 있게 정의해주는 선택자입니다.

Untitled 2

.btn은 따로 정의되지 않습니다.

이때, 주의사항은 media규칙 내에서 사용할 placeholder 선택자는 그 안에서 정의되어 있어야 합니다.

@media all and (max-width: 1400px) {
  %box {
    color: red;
  }
  .box {
    @extend %box;
  }
}

여러 문제가 많기 때문에 @extend보다는 @mixin 규칙을 사용하는 것이 더 좋습니다.

[2] SCSS 함수

@function을 이용해서 함수를 작성할 수 있습니다.

Untitled 3

또한 @error을 사용하여 예외처리가 가능합니다.

Untitled 4

함수를 작성할 때 CSS에 내장되어 있는 다양한 함수와 이름을 겹치게 하지 않기 위해

두 개의 단어를 조합해서 이름을 작성하는 것이 일반적이라는 것을 주의해야 합니다.

@function my-grid($col: 1, $total: 12, $rest...) {
  @if ($col > $total) {
    @error '$col must be less then $total.';
  }
  @if (list.length($rest) > 0) {
    @error 'Unnecessary arguments include.';
  }
  @return $columns-width * $col / $total;
}

[3] SCSS 조건, 반복 구문

SCSS에서 조건, 반복문을 사용할 수 있습니다.

[3-1] 조건문

조건문에서는 @if, @else if, @else를 전부 사용할 수 있습니다.

@mixin avatar($size, $circle: false) {
  width: $size;
  height: $size;

  @if $circle {
    border-radius: $size / 2;
  }
}

.sqare-av {
  @include avatar(100px, $circle: false);
}
.circle-av {
  @include avatar(100px, $circle: true);
}

[3-2] 반복문

[1] @each

단순한 배열과 객체 순회는 @each 구문을 통해서 작성할 수 있습니다.

Untitled 5

[2] @for

우리가 흔히 알고있는 반복문 작성을 위해선 @for 구문을 사용할 수 있습니다.

Untitled 6

두 개의 형태로 작성할 수 있습니다.

for 변수 from 시작 through 끝 (끝이 포함됩니다.)
for 변수 from 시작 to 끝 (끝이 포함되지 않습니다.)

[3] @while

조건부분이 종료될 때 루프에서 빠져나오는 @while 구문이 있습니다.

Untitled 7

[4] SCSS 가져오기, 모듈

[4-1] 가져오기

@import “./variables”; 의 형태로 SCSS 파일을 가져와 사용할 수 있습니다.

확장자를 생략해서 적을 수 있으며, 파일 맨 앞에 _가 있어도 생략하고 적을 수 있습니다.

해당 파일 안에 있는 변수들의 이름을 그대로 사용할 수 있습니다.

sass scss:css(sass 지금 파일이 있는 폴더: 컴파일 된 파일들이 저장될 폴더) 명령어를 통해

SCSS파일을 CSS로 컴파일 할 수 있습니다.

이때, 파일 앞에 _가 있는 SCSS파일들은 컴파일 대상에 포함되지 않아 따로 파일이 생성되지 않습니다.

[4-2] 모듈

@use “./variables” as var; 의 형태를 SCSS 파일을 모듈화 해서 사용할 수 있습니다.

확장자를 생략해서 적을 수 있으며, 파일 맨 앞에 _가 있어도 생략하고 적을 수 있습니다.

해당 파일 안에 있는 변수들의 이름을 사용하기 위해서는 파일 이름(또는 교체된 이름).변수 이름의 형태로 사용해야 합니다.

또한 export의 역할로 @forward키워드를 사용할 수 있습니다.

as 뒤의 교체될 이름을 적을 때, *를 사용할 수 있습니다

@forward “./mixins” as mix-*;

따라서 mix-mixins의 형태로 사용할 수 있습니다.

함수 사용과 비슷하게 파일의 이름을 겹치지 않게 두 가지 단어를 조합해서 사용하는 것이 일반적입니다.

[5] SCSS 내장 모듈

이미 만들어져 내장되어 있는 기능들을 모듈로써 이용할 수 있는 내장 모듈들을 불러와 사용할 수 있습니다.

Sass-lang.com Built-in Modules

sass:color - 색상 관련
sass:list - 리스트 타입
sass:map - 객체 타입
sass:math - 계산
sass:meta - 콜백, 타입 체크 등
sass:selector
sass:string - 문자열 관련

각 모듈은 sass-lang 사이트를 참고하여 사용할 수 있습니다.

[6] 디버그

[6-1] @debug

@debug로 디버그 메세지를 남길 수 있습니다.

일종의 console.log()의 역할로써 사용할 수 있습니다.

[6-2] @warn

@warn을 사용해서 경고 메세지를 남길 수 있습니다.

console.warn()의 역할로써 사용할 수 있습니다.

[6-3] @error

@error를 사용해서 에러 메세지를 남길 수 있습니다.

에러 메세지는 컴파일이 일어나지 않게 해줍니다.

이는 console.error()의 역할 및 new Error의 역할로써 사용할 수 있습니다.

사용에 따라 적절히 메세지를 남기면 컴파일 시 어느 부분에서 에러가 일어났는지, 어떻게 컴파일 되었는지 확인하기 쉽습니다.

출처

프로그래머스

sass-lang document

Twitter Facebook LinkedIn