Sass-创建动态属性及其值的Mixins [英] Sass - Mixins which create dynamic property and its valuse

问题描述

我正在尝试通过使用mixins使用SASS创建动态CSS属性.

I'm trying to create a dynamic css property using SASS by using mixins.

@mixin setProperty($property,$value,$unit:null){

 #{$property} :$value$unit;

}
.class{
  @include setProperty(position,relative);
}

这将创建一个输出

.class {
   position: relative;
}

我很好.但是，当我创建一些用于边距或填充的属性时，我们应该包含 PX .所以我尝试了这样的事情

I'm fine with this. But when i create some property for margin or padding we should include PX. So i tried something like this

.class{
  @include setProperty(margin,10,px);
 }

如下所示在中间有一个空格的输出中.我如何摆脱这些空间.

which creates output with a space in the middle as follows. How do i get rid of these space.

.class{
  margin: 10 px
}

推荐答案

您应该使用插值来连接值而不是添加值，您可以尝试以下操作:

You should use interpolation to concatenate the values instead of adding, you can try this:

@mixin setProperty($property,$value,$unit:null){

   #{$property} :#{$value}$unit;

}

当两个不同的值彼此相邻时，Sass总是在它们之间添加一个空格.使用插值不会发生这种情况，Sass尝试将所有内容解析为无引号的字符串.

When two distinct values are next to one another, Sass always adds a whitespace between them. With the interpolation it does not happen, Sass try to parse everything as an unquoted string.

这篇关于Sass-创建动态属性及其值的Mixins的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！