2022/07/27 TIL

오늘 공부한 내용

1. $
2. @mixin + @content
3. @include
4. @use
5. @forward
6. @for
7. @each
8. @if

9. interpolate

$, @mixin, @include(같은 파일 내에서 변수 선언 및 프레임 읽고 쓰기)

어느 개념이든, 적절하게 묶일 수 있는 개념은 묶어서 공부를 해야하기에, 같이 사용해야하는 상호 관계 혹은 유사성에 대해서 이야기하면 다음과 같습니다

@mixin으로 프레임(frame)을 만들어두면, @include를 이용하여 사용할 습니다.

@mixin mobile {
  @media (max-width:(768px - 1)) {
    @content;
  }
}
.className {
	@include mobile{
		
	}
}

처음 코드를 보는 사람은 768px라고 써두면 의미를 알 수 없기 때문에 $를 이용하여 변수화 시켜야 합니다. 그렇다면 다음과 같이 사용할 수 있습니다.

$mobile-size = 768px
@mixin mobile {
  @media (max-width:($mobile-size - 1)) {
    @content;
  }
}
.className {
	@include mobile{
		color:white;
	}
}

여기서 사용되는 @content는, mobile의 조건을 성립하면 @content를 사용하겠다라는 의미입니다.

즉 현재 모바일창이 768px 이하가 되면 글자가 흰색으로 바뀝니다.

변수를 사용하고 싶다면?

@mixin pos($pos: absolute, $t: initial, $l: initial) {
  position: $pos;
  top: $t;
  left: $l;
}

다음과 같이 :을 사용하면 값을 안넣었을 때, 기본 값으로 들어갈 값을 넣어줄 수 있다.

요약 : $로 변수를 선언하고 @mixin을 이용하여 재사용 가능한 class를 만들고, 반복될 때 @include를 이용하여 값들을 읽어온다.

@use, @forward (다른 파일에서 $나 @mixin의 값을 불러오기)

@use "./utils" as *;
.a11yHidden {
	color : $white
  @include a11yHidden
	//$나 mixin상관없이 모두 @use로 불러 올 수 있다.
}

앞에서 사용한 @mixin과 @include는 import를 사용하지 않는다면, 모두 같은 파일 내에서만 사용할 수 있다. 코딩을 하다보면, 조금 더 접근성이나 생산성 혹은, 협업에 도움이 되기 위하여 파일을 분리하는 일이 잦다. use, forward는 바로 이 파일분리를 도와준다.

@use를 이용하면, 현재 파일을 기준으로 파일을 불러올 수있다.

@use "./utils" as *;

뒤에있는 as *는, utils 에서 변수를 불러올 때 사용할 수 있다. 지금 과같은 * 과 같은 경우에는, 불러들인 값을 모두 이 파일에 있는 것처럼 사용한다. 파일이 많고 변수가 많은 경우에는

@use "./var" as var;
body{
  font-size : var.$font
}

다음과 같이 이름을 준다면, 파일마다 변수를 구별 할 수 있기 때문에, 좀 더 코드가 명료해질 수 있습다.

@forward 같은 경우에는,

//_index.scss
@forward "./a11y"; //_a11y.scss
@forward "./reset";//_reset.scss
@forward "./color";//_color.scss
@forward "./variable";//_variable.scss
@forward "./flexbox";//_flexbox.scss
@forward "./media-query";//_media-query.scss
@forward "./unit";//_unit.scss
@forward "./mixin";//_mixin.scss
@forward "./sprites";//_sprites.scss
//_index에 묶여있는 파일을 use를 하면 한번에 모든 파일이 불어들여진다
//_index.scss같은 경우에는 그 위치에 있는 폴더이름을 대변하기에
//folder1/_index.scss 같은 경우에는 @use "./folder1" as *와 같이 불러들일 수 있다.

utils와 같은 폴더에 _index.scss파일에, @forwrd를 이용하여 같은 폴더에 다른 폴더들을 묶어주는 역활을 한다.

@for, @each, @if, # (반복 및 조건문)

$colors: (
  "Green": $green,
  "Yellow": $yellow,
  "Brown": $brown,
  "Orange": $orange,
  "Blue": $blue,
);

@each $color, $color-value in $colors {
  .theme#{$color} {
    color: $color-value;
  }
}
@for $i from 0 through 5{
  .number_#{$i}{
    font-size:0 ($i * 1px);
  }
}

each와 같은 경우, Javascript에서의 for each처럼, iterator를 순회하는 기능을 가지고 있다

@each [key값] [key값의 value] in [순회할 목록]과 같은 모양으로 사용될 수 있다. interpolate(#)를 사용한 이유는, 괄호 안에서 변수를 사용하기 위해 사용하였다.

for문 같은 경우는 자바스크립트와 같다. 0부터 5까지(5를 제외하고) 숫자를 반복한다.

if같은 경우에는, else와 같이 다음과 같이 사용한다

$is-mobile : true;

body {
    @if $is-mobile ==true{
        background-color:red;
    }@else{
        background-color:blue;
    }
}

공부하면서 호기심이 생긴 부분

default값이 initial인 @mixin들을 다루면서, 굳이 cascading한 mixin을 사용해야하나? 라고 생각하고, if문을 이용하여 cascading을 막을 수 있는지 궁금해서 몇 가지 실험을 해봤다.

test.sass

@mixin center($top:initial, $bottom:initial, $left:initial, $right:initial){
    top : $top;
    bottom:$bottom;
    left : $left;
    right :$right;    
}
@mixin improvedCenter($top:initial, $bottom:initial, $left:initial, $right:initial){
    @if top!= initial {
    top : $top; }
    @if bottom!=initial{
    bottom:$bottom;}
    @if left!=initial{
    left : $left;}
    @if right!=initial{
    right :$right;    
    }
}

.class1{
    @include center
}
.class2{
    @include improvedCenter
}

test.css

.class1 {
  top: initial;
  bottom: initial;
  left: initial;
  right: initial;
}

.class2 {
  top: initial;
  bottom: initial;
  left: initial;
  right: initial;
}

실패했다. 안된 이유를 검색하기 위하여, if의 조건문에 검색을 해보니 @if var≠이 아니라 @if not을 사용한다는 것을 알고 다음과 같이 수정하였다

test.sass

@mixin center($top:initial, $bottom:initial, $left:initial, $right:initial){
  top : $top;
  bottom:$bottom;
  left : $left;
  right :$right;    
}
@mixin improvedCenter($top:initial, $bottom:initial, $left:initial, $right:initial){
  @if not top== initial {
  top : $top; }
  @if not bottom==initial{
  bottom:$bottom;}
  @if not left==default{
  left : $left;}
}

.class1{
  @include center
}
.class2{
  @include improvedCenter
}

test.css

.class1 {
  top: initial;
  bottom: initial;
  left: initial;
  right: initial;
}

성공하였다! 만일, initial의 값 초기화 혹은, 불필요한 cascading으로 인한 성능저하를 이로 막을 수 있을 것 같다(아주 미비하겠지만)

느낀점

sass보다 tailwind를 사용해서 그런지, 뭔가 익숙하면서 익숙하지 않은 느낌이 들었다. 단지, sass를 이용하여 간단하게 자주 사용하는 값들을 불러들이고, 클래스 안의 클래스를 컨트롤을 쉽게 할 수 있기 때문에, 상당히 편했다. 단지, 내가 직접 작성하지 않은 @mixin같은 경우에는 그 값이 뭐였더라 혹은 언제 무엇을 써야할지 빠르게 연상이 되지 않기 떄문에 이를 빠르게 연상할 수 있는 방법을 생각하는 것이 중요하다고 생각했다. 또, 반대로 내가 @mixin을 사용한다면, 다른 사람들도 쉽게 이 이름을 기억하고 사용할 수 있게 제목을 잘짓는것이 중요하다고 생각이 들었다.