LESS-믹스 인 가드

기술

표현식의 간단한 값이나 인수 수를 일치 시키려면 가드를 사용할 수 있습니다. mixin 선언과 연결되며 mixin에 연결된 조건을 포함합니다. 각 믹스 인에는 쉼표로 구분 된 하나 이상의 가드가 있습니다. 가드는 괄호로 묶어야합니다. LESS는 대신 보호 된 믹스 인을 사용합니다.if/else 일치하는 믹스 인을 지정하는 계산을 수행합니다.

다음 표는 설명과 함께 다양한 유형의 mixin 가드를 설명합니다.

Sr. 아니.	유형 및 설명
1	가드 비교 연산자 비교 연산자 (=)를 사용하여 숫자, 문자열, 식별자 등을 비교할 수 있습니다.
2	논리 연산자 보호 및 키워드를 사용하여 가드가있는 논리 연산자를 해결할 수 있습니다 .
삼	유형 검사 기능 믹스 인 일치에 대한 값 유형을 결정하는 내장 함수가 포함되어 있습니다.
4	조건부 믹스 LESS는 기본 기능을 사용하여 mixin을 다른 믹싱 매치와 일치시킵니다.

예

다음 예제는 LESS 파일에서 mixin 가드의 사용을 보여줍니다-

<!doctype html>
   <head>
      <title>Mixin Guards</title>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <h2>Example of Mixin Guards</h2>
      <p class = "class1">Hello World...</p>
      <p class = "class2">Welcome to Tutorialspoint...</p>
   </body>
</html>

이제 style.less 파일을 작성 하십시오.

style.less

.mixin (@a) when (lightness(@a) >= 50%) {
   font-size: 14px;
}

.mixin (@a) when (lightness(@a) < 50%) {
   font-size: 16px;
}

.mixin (@a) {
   color: @a;
}

.class1 {
   .mixin(#FF0000)
}

.class2 {
   .mixin(#555)
}

다음 명령을 사용하여 style.less 를 style.css 로 컴파일 할 수 있습니다.

lessc style.less style.css

위의 명령을 실행하십시오. 다음 코드 를 사용하여 style.css 파일을 자동으로 생성합니다.

style.css

.class1 {
   font-size: 14px;
   color: #FF0000;
}

.class2 {
   font-size: 16px;
   color: #555;
}

산출

위의 코드가 어떻게 작동하는지 보려면 다음 단계를 따르십시오.

위의 HTML 코드를 mixin-guard.html 파일.
브라우저에서이 HTML 파일을 열면 다음 출력이 표시됩니다.