我正在寻找一种方法来创建一个函数/mixin，从sass映射生成字体样式，同时使其具有响应能力。我有两个地图设置，我正在努力找出一种从地图中输出值的方法。
第一个映射是断点，我已经在需要的地方构建了这些断点。第二个是一个包含h1、h2、h3等的所有scs值的映射，我想要它，这样我就可以将mixin包含在一个文件中，它将根据映射创建所有需要的样式
我已经设置的地图如下：
$breakpoints: (
small: 0,
medium: 640px,
large: 1024px,
xlarge: 1200px,
xxlarge: 1440px,
);
$heading-styles: (
small: (
'h1': (
font-size: 24,
line-height: 1.6,
margin: 0 0 0.9375rem 0,
letter-spacing: 0
),
'h2': (
font-size: 20,
line-height: 1.6,
margin: 0 0 0.9375rem 0,
letter-spacing: 0
),
'h3': (
font-size: 19,
line-height: 1.6,
margin: 0 0 0.9375rem 0,
letter-spacing: 0
),
'h4': (
font-size: 18,
line-height: 1.6,
margin: 0 0 0.9375rem 0,
letter-spacing: 0
),
'h5': (
font-size: 20,
line-height: 1.6,
margin: 0 0 0.9375rem 0,
letter-spacing: 0
),
'h6': (
font-size: 20,
line-height: 1.6,
margin: 0 0 0.9375rem 0,
letter-spacing: 0
),
), medium: (
'h1': (
font-size: 48,
line-height: 1.6,
margin: 0 0 0.9375rem 0,
letter-spacing: 0
),
'h2': (
font-size: 40,
line-height: 1.6,
margin: 0 0 0.9375rem 0,
letter-spacing: 0
),
'h3': (
font-size: 31,
line-height: 1.6,
margin: 0 0 0.9375rem 0,
letter-spacing: 0
),
'h4': (
font-size: 25,
line-height: 1.6,
margin: 0 0 0.9375rem 0,
letter-spacing: 0
),
'h5': (
font-size: 20,
line-height: 1.6,
margin: 0 0 0.9375rem 0,
letter-spacing: 0
),
'h6': (
font-size: 16,
line-height: 1.6,
margin: 0 0 0.9375rem 0,
letter-spacing: 0
),
), large: (
'h1': (
font-size: 60,
line-height: 1.6,
margin: 0 0 0.9375rem 0,
letter-spacing: 0
),
'h2': (
font-size: 50,
line-height: 1.6,
margin: 0 0 0.9375rem 0,
letter-spacing: 0
),
'h3': (
font-size: 41,
line-height: 1.6,
margin: 0 0 0.9375rem 0,
letter-spacing: 0
),
'h4': (
font-size: 35,
line-height: 1.6,
margin: 0 0 0.9375rem 0,
letter-spacing: 0
),
'h5': (
font-size: 24,
line-height: 1.6,
margin: 0 0 0.9375rem 0,
letter-spacing: 0
),
'h6': (
font-size: 16,
line-height: 1.6,
margin: 0 0 0.9375rem 0,
letter-spacing: 0
),
),
);
Sass具有2不同类型的循环。一个是@each循环，另一个是@for循环——你可能会读到这一点。
@每个，@用于
并且Sass还具有从$map或$list获得value的不同功能。
映射函数，列表函数(您也可以在映射上执行列表函数，就像我在下面的示例中所做的那样(。
我做的第一件事是，我缩小了嵌套的$maps，映射中的重复内容在这种情况下更容易这样声明：(如果这是有意的，也可以通过做一些小的更改来轻松实现(
而不是：
$heading-styles: (
small: (
'h1': (
font-size: 24,
line-height: 1.6,
margin: 0 0 0.9375rem 0,
letter-spacing: 0
),
'h2': (
font-size: 20,
line-height: 1.6,
margin: 0 0 0.9375rem 0,
letter-spacing: 0
),
...
),
);
我这样做了：
$headings: (
"sm": (
"h1": 24,
"h2": 20,
"h3": 19,
"h4": 18,
"h5": 20,
"h6": 20,
),
"md": (
"h1": 48,
"h2": 40,
"h3": 31,
"h4": 25,
"h5": 20,
"h6": 16,
),
...
);
h1, h2, h3, h4, h5, h6 {
margin-bottom: .9375rem;
line-height: 1.6;
letter-spacing: 0
}
整个代码：
$breakpoints: (
"sm": 0,
"md": 640,
"lg": 1024,
"xl": 1200,
"xxl": 1440,
);
$headings: (
"sm": (
"h1": 24,
"h2": 20,
"h3": 19,
"h4": 18,
"h5": 20,
"h6": 20,
),
"md": (
"h1": 48,
"h2": 40,
"h3": 31,
"h4": 25,
"h5": 20,
"h6": 16,
),
"lg": (
"h1": 60,
"h2": 50,
"h3": 41,
"h4": 35,
"h5": 24,
"h6": 16,
),
);
h1, h2, h3, h4, h5, h6 {
margin-bottom: .9375rem;
line-height: 1.6;
letter-spacing: 0
}
// loop through "$breakpoints"
@for $i from 1 through length($breakpoints) {
// loop through breakpoints inside "$headings" ["sm", "md" ...]
@for $j from 1 through length($headings) {
// "@if" headings and breakpoint matches... [sm == sm, md == md ...]
@if nth(nth($headings, $j), 1) == nth(nth($breakpoints, $i), 1) {
// create "@media querie"
@media (min-width: #{nth(nth($breakpoints, $i), 2)}px) {
// loop through headings inside "$headings" ["h1", "h2" ...]
@for $k from 1 through length(nth(nth($headings, $j), 2)) {
// generate CSS class
#{nth(nth(nth(nth($headings, $j), 2), $k), 1)} {
font-size: #{nth(nth(nth(nth($headings, $j), 2), $k), 2)}px;
}
}
}
}
}
}
退货：
h1, h2, h3, h4, h5, h6 {
margin-bottom: .9375rem;
line-height: 1.6;
letter-spacing: 0;
}
@media (min-width: 0px) {
h1 {
font-size: 24px;
}
h2 {
font-size: 20px;
}
h3 {
font-size: 19px;
}
h4 {
font-size: 18px;
}
h5 {
font-size: 20px;
}
h6 {
font-size: 20px;
}
}
@media (min-width: 640px) {
h1 {
font-size: 48px;
}
h2 {
font-size: 40px;
}
h3 {
font-size: 31px;
}
h4 {
font-size: 25px;
}
h5 {
font-size: 20px;
}
h6 {
font-size: 16px;
}
}
@media (min-width: 1024px) {
h1 {
font-size: 60px;
}
h2 {
font-size: 50px;
}
h3 {
font-size: 41px;
}
h4 {
font-size: 35px;
}
h5 {
font-size: 24px;
}
h6 {
font-size: 16px;
}
}