@navBarHeight와 같은 Less 변수를 주제화할 수 있나요?

The Art of Thematization in Less

앱을 개발할 때 고객 검증을 위해 노력하기 때문에 잦은 시각적 수정은 불가피합니다. 빠른 고객 프레젠테이션을 위해 특정 페이지 미학(테마)을 유지하는 것이 바람직합니다.

한 가지 접근 방식은 본문 요소에 적용되는 모양 클래스를 만들어 신속한 페이지 변환이 가능하도록 하는 것입니다. @navBarHeight와 같은 Less 변수를 테마화할 수 있습니까?

Less를 사용한 사용자 정의 테마 설정

이 가능성은 스타일 및 변수 변형의 정도에 따라 달라집니다. 테마 사이. 간단한 시작점:

@themes: (
    blue   rgb( 41, 128, 185),
    marine rgb( 22, 160, 133),
    green  rgb( 39, 174,  96),
    orange rgb(211,  84,   0),
    red    rgb(192,  57,  43),
    purple rgb(142,  68, 173)
);

#navBar {
    .themed(background-color);
}

.themed(@property) {
    .for(@themes); .-each(@theme) {
        @name:  extract(@theme, 1);
        @color: extract(@theme, 2);

        .theme-@{name} & {
            @{property}: @color;
        }
    }
}

기본 이상: 향상된 사용자 정의

패턴 일치 및 규칙 세트 인수와 같은 기술을 사용하면 복잡한 테마 계층 구조를 자동으로 생성할 수 있습니다. 다음 예를 고려하십시오.

#navBar {
    .themed({
        color:            @fore-color;
        background-color: @back-color;
    });
}

.theme(@name: green) {
    @fore-color: green;
    @back-color: spin(@fore-color, 180);
    .apply();
}

.theme(@name: blue) {
    @fore-color: blue;
    @back-color: (#fff - @fore-color);
    .apply();
}

.theme(@name: black-and-white) {
    @fore-color: black;
    @back-color: white;
    .apply();
}

이를 통해 특정 디자인 요구 사항에 맞춰 적응력이 뛰어난 테마 시스템을 사용할 수 있습니다. Less를 사용하면 유연한 테마화 가능성이 무궁무진합니다.

위 내용은 @navBarHeight와 같은 Less 변수를 주제화할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!