SASS\SCSS 避免运算的方法

最新推荐文章于 2025-04-24 15:15:29 发布

原创最新推荐文章于 2025-04-24 15:15:29 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#scss #sass #避免运算

HTML\CSS 专栏收录该内容

56 篇文章

订阅专栏

本文探讨了使用SASS编写文字描边样式时遇到的问题及解决方案，通过实例展示了如何通过改进@mixin混入语法，避免代码运算错误，并提供了优化后的代码示例，帮助开发者更高效地实现复杂效果。

今天用sass写一个样式，文字描边。因为其代码比较长，所以就用@mixin 混入。但是发现，我这样写有问题。

@mixin ts($s1:1px,$s2:1px,$color:$cff){
    text-shadow:
    $s1 $s1 $s2 $color,
    -$s1 $s1 $s2 $color,
    $s1 -$s1 $s2 $color,
    -$s1 -$s1 $s2 $color;
}

这样输出的代码，后面的两行，他运算了。得到的结果如下：

#sometext {text-shadow: 1px 1px 1px #fff,-1px 1px 1px #fff,0px 1px #fff,-2px 1px #fff;}

有点小郁闷，百度了一下没找到相关的资料。于是尝试用\来解决，结果是扯淡的。
再尝试加个括号，问题解决了~
代码如下：

@mixin ts($s1:1px,$s2:1px,$color:$cff){
    text-shadow:
    $s1 $s1 $s2 $color,
    -$s1 $s1 $s2 $color,
    $s1 (-$s1) $s2 $color,
    -$s1 (-$s1) $s2 $color;
}