大佬教程收集整理的这篇文章主要介绍了css – 对可变参数Sass mixins进行数学运算，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
@mixin font-size($size) {
font-size: $size + px;
font-size: ($size / 10) + rem;
}
但是对于填充,边距等,mixin需要接受可变参数,这可以根据Sass文档http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variable_arguments进行
然而,使用以下mixin,而不是除以10,mixin只是在数字之间添加斜杠.就是这样：
@mixin padding($padding...) {
padding: $padding + px;
padding: ($padding / 10) + rem;
}
.class {
@include padding(24);
}
输出：
.class {
padding: 24px;
padding: 24/10rem;
}
而不是这样,像我所期望的：
.class {
padding: 24px;
padding: 2.4rem;
}
有没有办法确保Sass将变量识别为数字,从而正确地使用除法运算符？
此外,在进行了更多测试之后,我意识到连接只发生在最后一个变量上.
我首先尝试使用@each指令,但无法弄清楚如何在声明中使用它.这会引发错误：
@mixin padding($padding) {
padding: @each $value in $padding { $value + px };
padding: @each $value in $padding { ($value / 10) + rem };
}
所以我最终写了一些更详细的东西,分别处理四种可能的情况(即通过1,2,3或4个参数).看起来像这样,按照我想要的方式工作：
@mixin padding($padding) {
@if length($padding) == 1 {
padding: $padding+px;
padding: $padding/10+rem;
}
@if length($padding) == 2 {
padding: nth($padding,1)+px nth($padding,2)+px;
padding: nth($padding,1)*0.1+rem nth($padding,2)*0.1+rem;
}
@if length($padding) == 3 {
padding: nth($padding,2)+px nth($padding,3)+px;
padding: nth($padding,2)*0.1+rem nth($padding,3)*0.1+rem;
}
@if length($padding) == 4 {
padding: nth($padding,3)+px nth($padding,4)+px;
padding: nth($padding,3)*0.1+rem nth($padding,4)*0.1+rem;
}
}
我收集了包括这个作为Gist这里的rem mixins https://gist.github.com/doughamlin/7103259
以上是大佬教程为你收集整理的css – 对可变参数Sass mixins进行数学运算全部内容，希望文章能够帮你解决css – 对可变参数Sass mixins进行数学运算所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。