LESS-믹스 인에 규칙 세트 전달

기술

분리 된 규칙 세트는 속성, 중첩 된 규칙 세트, 변수 선언, 믹스 인 등과 같은 규칙 세트를 포함합니다. 이는 변수에 저장되고 다른 구조에 포함됩니다. 규칙 세트의 모든 속성이 해당 구조에 복사됩니다.

예

다음 예제는 LESS 파일에서 mixin에 규칙 세트를 전달하는 방법을 보여줍니다.

passing_ruleset.htm

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

   <body>
      <div class = "cont">
         <h2>Welcome to TutorialsPoint</h2>
         <p>The largest Tutorials Library on the web.</p>
      </div>
   </body>
</html>

다음으로 style.less 파일을 만듭니다 .

style.less

@detached-ruleset: {
   .mixin() {
      font-family: "Comic Sans MS";
      background-color: #AA86EE;
   }
};

.cont {
   @detached-ruleset();
   .mixin();
}

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

lessc style.less style.css

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

style.css

.cont {
   font-family: "Comic Sans MS";
   background-color: #AA86EE;
}

산출

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

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

범위 지정

분리 된 규칙 세트의 모든 변수와 믹스 인은 규칙 세트가 호출되거나 정의 된 모든 곳에서 사용할 수 있습니다. 그렇지 않으면 기본적으로 호출자와 정의 범위를 모두 사용할 수 있습니다. 선언 범위는 두 범위가 동일한 믹스 인 또는 변수를 포함 할 때 우선 순위를 갖습니다. 분리 된 규칙 세트 본문은 선언 범위에 정의됩니다. 분리 된 규칙 세트가 한 변수에서 다른 변수로 복사 된 후에는 범위가 변경되지 않습니다.

다음 표는 범위의 모든 유형을 나열합니다-

Sr. 아니.	유형 및 설명
1	정의 및 발신자 범위 가시성 변수와 믹스 인은 분리 된 규칙 세트 내에 정의됩니다.
2	참조는 분리 된 규칙 집합 범위를 수정하지 않습니다. 참조 만 제공하면 규칙 세트는 새 범위에 액세스하지 않습니다.
삼	잠금 해제하면 분리 된 규칙 세트 범위가 수정됩니다. 분리 된 규칙 세트는 범위로 가져 와서 액세스 할 수 있습니다.