📝 오늘 한 것

1. SCSS - variables / nesting / mixins / @extend / responsive mixins - @content

📚 배운 것

1. SCSS

1) variables

src/scss 폴더에 _variables.scss 파일을 만든다.
파일 이름 앞에 밑줄을 추가한 것은 해당 파일은 scss로 남을 뿐 css 파일로 변환하지 않을 것임을 나타내기 위한 것이다.

// _variables.scss

$bg: red;

// styles.scss

@import "_variables";

body {
  background: $bg;
}

2) nesting

h1 {
  color: red;
  &:hover: blue;
  span {
    color: orange;
    &:hover: green;
  }
}

3) mixins

mixin에 인자를 넣어줌으로써 기본적으로 적용할 CSS style에 변경을 가하거나 scss 파일에서 @if ~ @else 구문과 같은 프로그래밍을 사용하기 위해 mixins를 사용할 수 있다.

<!-- index.html -->

<a>첫 번째 타이틀</a>
<a>두 번째타이틀</a>
<a>세 번째 타이틀</a>
<a>네 번째 타이틀</a>

// _variables.scss

$red-color: red;
$blue-color: blue;

(1) mixin argument

// _mixins.scss

@mixin link($color) {
  display: block;
  margin-bottom: 10px;
  font-size: 50px;
  color: $color;
}

link는 $color를 인자로 받을 수 있다.$color는 임의로 정해준 이름일 뿐 얼마든지 다른 이름을 쓸 수 있다.

// styles.scss

@import "_mixins";

a {
  &:nth-child(odd) {
    @include link(blue);
  }
  &:nth-child(even) {
    @include link(red);
  }
}

실제로 link의 인자로 blue와 red를 넣어줬다.

(2) @if ~ @else

다음과 같이 작성해도 결과는 (1)과 같다.

// _mixins.scss

@mixin link($word) {
  display: block;
  margin-bottom: 10px;
  font-size: 50px;
  @if $word == "odd" {
    color: blue;
  } @else {
    color: red;
  }
}

이때 == 를 사용해야 한다. (=== 는 유효하지 않다.)

// _styles.scss

@import "_mixins";

a {
  &:nth-child(odd) {
    @include link("odd");
  }
  &:nth-child(even) {
    @include link("even");
  }
}

link의 인자로 color 대신 문자열을 넣어줬다.

4) @extend

기존의 CSS style을 변경 없이 재사용 하고자 할 때 @extend를 사용한다.
재사용 하고자 하는 선택자 앞에 %를 붙여야 한다.

💡 mixins은 상황에 따라 다르게 코딩하고 싶을 때 사용하는 반면, extends는 같은 코드를 중복해서 사용하고 싶지 않을 때 사용한다.

// _buttons.scss

%button {
  border-style: none;
  border-radius: 10px;
  margin: 10px;
  padding: 20px;
  color: white;
  background: darkcyan;
  font-size: 20px;
}

@import "_buttons";

a {
  @extend %button;
  text-decoration: none;
}

button {
  @extend %button;
  cursor: pointer;
}

5) responsive mixins

(1) @content

@content를 사용하면 mixin의 content를 지정할 수 있다.
이는 mixin에 인자를 전달하는 것과는 다르다.

mixin argument와 @content를 함께 사용하면 반응형 디자인을 구현할 때 매우 유용하다.

여기서는 간단하게 브라우저의 크기를 변경하면 지정한 경계를 기준으로 H1 텍스트의 색상이 바뀌도록 코드를 작성해보려고 한다.

<h1>타이틀</h1>

// _mixins.scss

// 임의로 아무렇게나 지정한 값들이다
$minIphone: 320px;
$maxIphone: 480px;
$minIpad: $maxIphone + 1;
$maxIpad: 640px;
$minTablet: $maxIpad + 1;
$maxTablet: 960px;

@mixin responsive($device) {
  @if $device == "iphone" {
    @media screen and (min-width: $minIphone) and (max-width: $maxIphone) {
      @content;
    }
  }

  @if $device == "ipad" {
    @media screen and (min-width: $minIpad) and (max-width: $maxIpad) {
      @content;
    }
  }
  
  @if $device == "tablet" {
    @media screen and (min-width: $minTablet) and (max-width: $maxTablet) {
      @content;
    }
  }
}

responsive mixin의 인자로 iphone, ipad, tablet이 전달된 경우를 나눠서 각각 다른 미디어 쿼리를 만들도록 했다.
미디어 쿼리의 표현식 부분은 @content로 작성하여 styles.scss에서 경우에 따라 설정할 수 있도록 했다.

// styles.scss

@import "_mixins";

h1 {
  font-size: 50px;
  color: indianred;
  
  @include responsive("iphone") {
    color: yellowgreen;
  }
  
  @include responsive("ipad") {
    color: gray;
  }
  
  @include responsive("tablet") {
    color: darkmagenta;
  }
}

responsive mixin의 인자로 iphone이 전달하여 생성된 미디어 쿼리의 조건(min/max-width 크기)에 맞는 경우 color를 yellowgreen으로 바꾼다.

responsive mixin의 인자로 ipad이 전달하여 생성된 미디어 쿼리의 조건(min/max-width 크기)에 맞는 경우 color를 gray으로 바꾼다.

responsive mixin의 인자로 tablet이 전달하여 생성된 미디어 쿼리의 조건(min/max-width 크기)에 맞는 경우 color를 darkmagenta으로 바꾼다.

✨ 내일 할 것

1. 프로토타입, 해쉬 테이블

2. CSS PROJECTS