与Sass功能一起使用时,Sass分割不起作用

用户名

我有将px转换为em的此功能:

  @function em($pixels, $context: 16px) {
      @return #($pixles/$context)em
    }

我有使用此功能的变量:

$margin: em(60px);

现在,我试图像这样使用它:

div {
 margin: 0 -#{$margin / 2}; 
}

但这是无效的CSS。devtools中的输出为:

margin: 0 -3.75em / 2

当我删除该函数并仅使用em值时,它就起作用了。我怎样才能做到这一点?

哈里

首先,我认为您的函数代码中有一个错字,但我忽略了这一点,因为您的函数根据您的输出可以正常工作。真正的问题在于函数正在输出的值的类型既然你只是串联em使用插值计算的值时,输出是一个字符串,而不是一个号码,所以不能对其执行数学运算。

不用串联em而是通过乘以1em附加单位,现在您的原始代码可以正常工作了。

@function em($pixels, $context: 16px) {
  @return ($pixels/$context) * 1em;
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Python Pandas:与apply()一起使用时功能不起作用

与 Gooey 模块一起使用时功能不起作用

与ThrowsA一起使用时,TypeMatcher不起作用

let 与 -XRankNTypes 一起使用时不起作用

与apache Alias一起使用时,htaccess文件存在的检查似乎不起作用

将UpdateOne与MongoDB Golang驱动程序一起使用时Upsert不起作用

自定义授权器与AWS Chalice一起使用时不起作用

htmlentities()与表中的数据一起使用时不起作用

与 python3 一起使用时,ConfigParser 库不起作用

与Google App Engine和Flask一起使用时,角线路线不起作用

Laravel 5-与重定向一起使用时withInput不起作用

与Ionic Framework一起使用时,Charset UTF 8不起作用

Ansible 设置模块的过滤器在与 playbook 一起使用时不起作用

与Onsen UI一起使用时,Videogular控制器不起作用

与plt.show一起使用时cv2.imshow不起作用

与popen python一起使用时,输入命令似乎不起作用

Bootstrap切换chechkbox与html helper chechkboxfor一起使用时不起作用?

:selected与rails形式的collection_select一起使用时不起作用

与“手表”一起使用时,“ awk”不起作用

与Radium和Material-UI一起使用时,React悬停样式不起作用

PHP if else 在将多变量与 OR 一起使用时不起作用

cat命令:与文件一起使用时,stdin重定向不起作用

修饰符与 .apply 一起使用时不起作用

与 Plus/Min 按钮一起使用时,innerHTML 不起作用

与客户拦截器一起使用时,Axios捕获不起作用

与导航抽屉一起使用时,工具栏的后退按钮不起作用

在Powershell中与正则表达式一起使用时,Leftpad不起作用

与我的应用程序一起使用时,codeScanner不起作用

与Boostrap .form-control一起使用时,过渡持续时间不起作用