我正在尝试使用mixin来创建不同类型的填充和边距类。他们应该做出回应。
基本上，“我的公式”，例如：
@base-top-space * @space-medium * @space-xs
公式应该在类中给出一个值，具体取决于它所在的媒体查询。
现在，我对less很新，我正试图解决这个问题，但我非常困难，我需要有人帮忙。也许整个功能概念是错误的？
//Global variables for space calculation in a mixin
// Variables for padding and margin sections - also refered to as mixin-space-value
@base-top-space: 100px;
@base-right-space: 100px;
@base-bottom-space: @base-top-space;
@base-left-space: @base-right-space;
// Variables for different types of sizes of space - also refered to as mixin-space-size
@space-small: 0.75;
@space-medium: 1;
@space-large: 1.75;
@space-xlarge: 2.5;
// Variables for different types of devices - also refered to as mixin-space-device
@space-xs: 0.5;
@space-sm: 1;
@space-md: 1.25;
@space-lg: 1.5;
//Variables of types of space in mixin
@space-type-padding-top: escape('padding:');
@space-type-padding-top: escape('padding-top:');
@space-type-padding-right: escape('padding-right:');
@space-type-padding-bottom: escape('padding-bottom:');
@space-type-padding-left: escape('padding-left:');
@space-type-margin: escape('margin:');
@space-type-margin-top: escape('margin-top:');
@space-type-margin-right: escape('margin-right:');
@space-type-margin-bottom: escape('margin-bottom:');
@space-type-margin-left: escape('margin-left:');
// Mixin of padding space
// mixin-space-type: eg. padding-top, margin-right...
//
// Mixin variables Global variables
// =============== ================
// Eg.: mixin-space-type = @space-type-padding-top
// Eg.: mixin-space-value = @base-top-space
// Eg.: mixin-space-size = @space-small, space-medium, @space-large, @space-large
// Eg.: mixin-space-device = @space-xs, @space-sm, @space-md, @space-lg
.mixin-space(@mixin-space-type, @mixin-space-value, @mixin-space-size, @mixin-space-device) {
@mixin-space-type; abs(@mixin-space-value * @mixin-space-size * @mixin-space-device);
}
@media (max-width: @screen-xs-max) {
.lg-md-content-margin {
margin-top: 0px;
}
.pad {
// Generates different types of padding sizes. Eg: .pad-top-s, .pad-top-m, .pad-top-l, .pad-top-xl
&-top {
&-s {
.mixin-space(@space-type-margin-top, @base-top-space, @space-small, @space-xs)
}
}
&-m {
}
&-l {
}
&-xl {
}
}
// Generates different types of padding sizes. Eg: .pad-bot-s, .pad-bot-m, .pad-bot-l, .pad-bot-xl
&-bot {
&-s {
}
&-m {
}
&-l {
}
&-xl {
}
}
}
}