我无法从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;
}