Question

我对LESS不熟悉，所以我不确定这是否可行以及如何实现。所以我的想法是：

我有一个main-stylesheet.less和十几个较小的样式表，每个样式表包含特定元素的几个版本样式，即header.less，footer.less，main-nav.less等。所以在header.less中，样式的每个变体都链接到一个条件，当你通过这个条件在main-stylesheet.less中包含这个LESS文件时，只编译那个特定的代码块而不是其他链接到其他代码的代码。条件。

我希望我已经足够彻底了解你。

这可能吗？如何？

Answer 1

我想也许你在寻找LESS mixin？


/* header.less  */

.header1 () {
    // including selector
    .header {
        position: relative; 
        z-index: 1001; 
        width: 100%; 
        margin: 0 0 20px; 
        overflow: hidden; 
    }
}
.header2 () {
    position: relative; 
    z-index: 1001; 
    width: 50%; 
    margin: 20px;  
}
.header3 () {
    position: relative; 
    z-index: 1; 
    width: 90%; 
    margin: 0 0 50px; 
    overflow: hidden; 
}

并将其包括在内：

/* main-stylesheet.less  */

@import 'header.less';

body {
   .header1();
}

你也可以聪明并使用一个mixin：

.header (@margin: 0, @width: 100%) {
    position: relative; 
    z-index: 1001; 
    width: @width; 
    margin: @margin; 
    overflow: hidden; 
}
header {
    .header(0 0 20px, 50%);
}

Answer 2

保持通用

通过使用条件mixins，main-stylesheet.less中的代码保持通用，只有变量才能控制实际编译的内容。

示例header.less

.header() when (@header = 1) {
   #header {
     your: properties;
     for: header1;
   }
}

.header() when (@header = 2) {
   #header {
     your: properties;
     for: header2;
   }
}

这可以继续，类似的代码将出现在其他footer.less文件等中。

示例main-sytlesheet.less

@import header.less;
@import main-nav.less;
@import footer.less;

/* set your variables for your conditional mixins */
@header: 1;
@main-nav: 3;
@footer: 3;

/* call the mixins */
.header();
.main-nav();
.footer();

您设置的全局变量只会选择.header() mixin来生成#header等@header变量设置为。

减少条件样式包含

2 个答案:

保持通用