#100DaysOfCode의 14일차!

오늘의 진행 상황

SASS에 대한 작업을 계속하고 SASS의 주요 기능 중 하나인 @mixins 및 @include에 대해 조금 배웠습니다.

내가 배운 것

@mixin를 사용하면 재사용할 수 있고 구문 @mixin을 사용하여 정의되는 CSS 코드를 생성할 수 있습니다. 그들은 또한 자신의 스타일을 포함할 수 있습니다. @include는 mixin를 사용하기 위해 생성됩니다.

어떻게 생겼는지 보자...

@mixin red-color{
  color: red;
}

h1{
  @include red-color;
}

위의 예에서 우리는 @mixin 이름red-color을 만들고 값이 color인 속성red을 부여했습니다.

그런 다음 태그 이름h1을 잡고 정의된 mixin@include에서 red-color를 사용합니다.

이제 SASS를 CSS로 컴파일하면 CSS 파일의 h1 태그가 색상red이 됩니다.
@mixin 및 @include 구문을 사용하는 간단한 예입니다. 앞에서 mixin CSS 코드를 재사용할 수 있으며 arguments 를 전달하여 이를 수행한다고 언급했습니다.

예를 들어, 웹 페이지 전체에 서로 다른 크기의 제목 요소h1 , h2 , h3가 있으며 각각에 대해 다른 색상을 원합니다. mixins 를 사용하고 다른 color argument 를 전달하여 이 문제를 해결할 수 있습니다.

여기 그 예가 있습니다.

@mixin some-color($pick-color){
    color: $pick-color;
}

h1{
   @include some-color(red);
}

h2{
   @include some-color(blue);
}

스타일.scss


SASS를 CSS로 컴파일하면 SASS 파일에 할당한 속성 값이 있는 h1 및 h2 태그가 생성됩니다.

h1{
   color: red;
}

h2{
   color: blue;
}

스타일.css

결론적으로

물론 이들은 SASS 코드를 CSS 코드로 컴파일하고 @mixin 및 @include의 기능을 사용하여 재사용 가능한 코드를 생성하는 매우 기본적인 예였습니다. 동일한 mixin 를 사용하는 동안 전달되는 다른 속성 값을 가질 수 있도록 @mixin 와 함께 인수를 전달하는 데 도움이 됩니다.