1

我对LESS有点陌生，所以我不确定这是否可能以及如何。所以我的想法是这样的：

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

我希望我已经足够透彻，让你最好地理解我。

这可能吗？如何？

4

2 回答 2

3

我想也许您正在寻找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%);
}
于 2013-11-07T10:26:42.510 回答
2

保持通用

通过使用条件混合，代码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设置为的 等。

于 2013-11-07T10:56:13.320 回答