CSS 클래스를 사용하여 전역 Less 변수를 어떻게 동적으로 주제화할 수 있습니까?-CSS 튜토리얼-php.cn

CSS 클래스를 사용하여 전역 Less 변수를 어떻게 동적으로 주제화할 수 있습니까?

Susan Sarandon

풀어 주다： 2024-11-06 05:47:02

원래의

751명이 탐색했습니다.

How Can I Dynamically Thematize Global Less Variables Using CSS Classes?

전역 적은 변수 주제화

앱을 개발하는 과정에서 고객에게 다양한 시각적 테마를 신속하게 제시해야 할 필요성이 발생할 수 있습니다. 페이지 시각적 개체를 변경하기 위해 본문에 대해 별도의 모양 클래스를 정의하는 것이 접근 방식이지만, 전역 변수를 적게 주제화하려고 합니다.

변수 정의가 적음

Less를 사용하면 다음을 수행할 수 있습니다. 다음과 같이 전역 변수를 정의합니다:

@variable-name: value;

로그인 후 복사

변수 주제화

외관 CSS 클래스에 따라 변수를 주제화하려면 Less의 @mixin을 사용하여 다음과 같은 믹스인을 정의할 수 있습니다. 변수를 가져와 모양 클래스에 따라 재정의합니다. 기본 예는 다음과 같습니다.

<code class="less">@navBarHeight: 50px;

@mixin theme($name) {
  if ($name == "white") {
    @navBarHeight: 130px;
  } else if ($name == "black") {
    @navBarHeight: 70px;
  }
}</code>

로그인 후 복사

사용

이 믹스인은 다음과 같이 사용할 수 있습니다.

<code class="less">.appearanceWhite {
  @include theme("white");
}
.appearanceBlack {
  @include theme("black");
}</code>

로그인 후 복사

고급 예

보다 사용자 정의 가능한 접근 방식을 위해 패턴 일치 및 규칙 집합 인수를 사용할 수 있습니다.

<code class="less">@themes: (
  (
    blue,
    rgb(41, 128, 185)
  ),
  (
    marine,
    rgb(22, 160, 133)
  ),
  ...
);

@mixin themed(@style) {
  @each $theme in @themes {
    .theme-@{nth($theme, 1)} & {
      @style();
    }
  }
}</code>

로그인 후 복사

사용

<code class="less">#navBar {
  @include themed({
    color: green;
    background-color: orange;
  });
}</code>

로그인 후 복사

다음을 사용하여 이러한 기술을 사용하면 CSS 클래스를 기반으로 전역 변수를 동적으로 주제화하여 런타임 시 다양한 시각적 테마 간에 쉽게 전환할 수 있습니다.

위 내용은 CSS 클래스를 사용하여 전역 Less 변수를 어떻게 동적으로 주제화할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!