LESS循环复制属性

时间:2017-05-16 17:22:02

标签: css loops sass less

我无法从SASS过渡到LESS。循环对我来说特别麻烦。我试图在LESS中重写我的垂直节奏代码但是我在输出上获得了重复的属性。我确信这是一件很简单的事情我会忽略,但任何建议和/或方向都会受到赞赏。

输入:

@type-elements: p, h4, h3, h2, h1;

@type-length: length(@type-elements);

@font-base: 16;

@font-scale: 1.2;

@line-height: 1.5;

@base-line-height: @font-base * @line-height;

@font-family-headings: sans-serif;

@font-family-body: serif, monospace;

@preferred-unit: "em";

//Set Vertical Rythym
//-----------------------------
.setType(@type-elements; @index) when (@index <= @type-length) { // set loop parameters
 .setType(@type-elements; (@index + 1)); // set loop increment

  @e: extract(@type-elements, @index);
  @scale-value: @index - 1;
  @fs: @font-base * pow(@font-scale, @scale-value);
  @lh: @font-base * @line-height / @fs;

  // mixin for basic font properties
  //-----------------------------
  .font(@e) when (@e = p) {
    font-family: @font-family-body;
    font-weight: normal;
  }
  .font(@e) when not (@e = p) {
    font-family: @font-family-headings;
    font-weight: bolder;
  }

  // mixin for type setting properties
  //-----------------------------
  .size(@index) {
     font-size: @fs;
  }

  .marginBottom(@e) when (@e = h1) {
    margin-bottom: @base-line-height / @fs * 2 * 1em;
  }
  .marginBottom(@e) when (@e = h2), (@e = p) {
    margin-bottom: @base-line-height / @fs * 1em;
  }
  .marginBottom(@e) when (@e = h3), (@e = h4) {
    margin-bottom: 0;
  }

   @{e} {
     .font(@e);
     .size(@index);
     .marginBottom(@e);
   }

}
.setType(@type-elements; 1);

输出:

h1 {
  font-family: sans-serif;
  font-weight: bolder;
  font-size: 33.1776;
  margin-bottom: 1.44675926em;
}
h2 {
  font-family: sans-serif;
  font-weight: bolder;
  font-size: 27.648;
  margin-bottom: 0.72337963em;
  margin-bottom: 0.86805556em;
}
h3 {
  font-family: sans-serif;
  font-weight: bolder;
  font-size: 23.04;
  margin-bottom: 0;
}
h4 {
  font-family: sans-serif;
  font-weight: bolder;
  font-size: 19.2;
  margin-bottom: 0;
}
p {
  font-family: serif, monospace;
  font-weight: normal;
  font-size: 16;
  margin-bottom: 0.72337963em;
  margin-bottom: 0.86805556em;
  margin-bottom: 1.04166667em;
  margin-bottom: 1.25em;
  margin-bottom: 1.5em;
}

我的期待:

h1 {
  font-family: sans-serif;
  font-weight: bolder;
  font-size: 33.1776;
  margin-bottom: 1.44675926em;
}
h2 {
  font-family: sans-serif;
  font-weight: bolder;
  font-size: 27.648;
  margin-bottom: 0.86805556em;
}
h3 {
  font-family: sans-serif;
  font-weight: bolder;
  font-size: 23.04;
  margin-bottom: 0;
}
h4 {
  font-family: sans-serif;
  font-weight: bolder;
  font-size: 19.2;
  margin-bottom: 0;
}
p {
  font-family: serif, monospace;
  font-weight: normal;
  font-size: 16;
  margin-bottom: 1.5em;
}

0 个答案:

没有答案