Function 减少Sass函数中的重复代码
我正在开发一个HTML样板,它使用了大量的SAS来创建一个可维护且易于使用的代码库。其中一部分是一些功能:Function 减少Sass函数中的重复代码,function,sass,sass-maps,Function,Sass,Sass Maps,我正在开发一个HTML样板,它使用了大量的SAS来创建一个可维护且易于使用的代码库。其中一部分是一些功能: //返回在$key处找到的刻度值。 @函数获取类型比例($key){ $value:map get($type scale,$key); @如果$value!=null{ @返回$value; } @否则{ @警告“很遗憾,`$$type scale`映射中未定义`#{$key}`.”; } } //返回在$key处找到的行高度值。 @函数获取行高($key){ $value:map g
//返回在$key处找到的刻度值。
@函数获取类型比例($key){
$value:map get($type scale,$key);
@如果$value!=null{
@返回$value;
}
@否则{
@警告“很遗憾,`$$type scale`映射中未定义`#{$key}`.”;
}
}
//返回在$key处找到的行高度值。
@函数获取行高($key){
$value:map get($line heights,$key);
@如果$value!=null{
@返回$value;
}
@否则{
@警告“很遗憾,`$$line heights`映射中未定义`#{$key}`.”;
}
}
//等等。。。我还有两个类似这样的函数,其中只有$map发生更改。
我曾尝试编写一个通用函数,该函数接收映射名作为参数,但无法在map-get()中使用插值
不幸的是,根本无法从其他变量的名称(仅从其值)创建变量名。此外,变量只知道其值,而不知道其名称,这是定义变量警告消息时我们面临的另一个问题
我提出了一些改进,减少了重复代码的数量,并保持了高级函数调用的易用性。关于必须将第三个变量传递给泛型函数的批评是有道理的,但我无法找到一个干净的方法来避免它
$线高:(
0时1分,
凌晨1:2
);
$type比例:(
0时1分,
凌晨1:2
);
//返回在$key处找到的比例值。
@函数获取类型比例($key){
@返回get value或warn($type scale,$key,'type scale');
}
//返回在$key处找到的行高度值。
@函数获取行高($key){
@返回get值或warn($line heights,$key,'line heights');
}
@函数get value或warn($map、$key、$map name){
$value:map get($map$key);
@如果$value!=null{
@返回$value;
}
@否则{
@警告“很遗憾,`$\{$map name}`映射中未定义`$\{$key}`';
}
}
//基于$level设置字体大小和行高。
@混合设置类型($level:0){
字体大小:获取类型比例($level);
行高:获取行高($level);
}
您可以在嵌套映射中将行高和字体大小创建为键/值对,并使用插值在@each循环中打印属性–如:
$map:(
0 : (line-height: 1.3, font-size: 16px),
1 : (line-height: 1.3, font-size: 17px),
2 : (line-height: 1.3, font-size: 18px),
3 : (line-height: 1.4, font-size: 19px),
4 : (line-height: 1.5, font-size: 20px)
);
@mixin set-type($level: 0){
$found: map-get($map, $level);
@if not $found { @warn 'Key `#{$level}` not found in $map!'; }
@else { @each $prop, $value in $found { #{$prop} : $value; } }
}
.class { @include set-type(1); } // line-height: 1.3; font-size: 17px;
.class { @include set-type(5); } // WARN: Key `5` not found in $map!
这正是我想要的。非常感谢你!非常有用,我没有考虑在一张地图中合并行高和字体大小。很好的优化。谢谢