SCSS：向函数发送属性和值答案

【问题标题】：SCSS: Send Attribute and Value to FunctionSCSS：向函数发送属性和值
【发布时间】：2016-05-28 05:39:06
【问题描述】：

注意：

我是 Web 开发和面向对象编程的新手。我是 SCSS 的新手，还没有对语法有深刻的理解。我对如何使用functions in SCSS有了基本的了解。

让我从定义我想要达到的结果开始。

_body.scss

body {

   background-color: red;

}

现在我知道如果我想在 Javascript 中获得这个结果，我可以：

方案一：编写一串HTML代码，替换已有的html标签。

不打算对此进行编码，因为这是编写 Javascript 的一种混乱方式，但本质上是使用 document.write() 方法。

选项2：使用“setAttribute()”方法

// assuming <head> and <body> are the only tags within <html>

var bodyTag = document.firstElementChild.lastElementChild;

bodyTag.setAttribute( "bgcolor", "red" );

我知道在 Javascript 中还有其他方法可以做到这一点，但对于本示例，我将重点介绍这两种方法。

所以我想创建一个可以返回属性和值的 SCSS 函数。

_body.scss（伪代码字符串示例）

@function makeAttribute( $attribute, $value )

{

   @return $attribute + ":" + $value + ";";

}

body {

   makeAttribute( background-color, red );

}

我还没有找到解决这个问题的内置函数（类似于 Javascript 中的“setAttribute()”方法），或者上面的字符串示例。

我知道函数可以取：数字、字符串、布尔值、颜色、列表、地图或空值；但我不知道一个属性是否适合任何这些值类型（例如：字符串）。

我觉得这篇文章：Bringing Configuration Objects To Sass 可能正在解释我正在尝试做的事情，但我很难理解这篇文章（因此它可能不是对解决方案的解释）。

我的最终目标是创建一个可以编写以下 css 的函数。我之前没有提到浏览器支持，因为它增加了另一层复杂性，可能容易解释也可能不容易解释。

body {

   background-color: red;

   -o-background-color: red;

   -ms-background-color: red;

   -moz-background-color: red;

   -webkit-background-color: red;

}

【问题讨论】：

你混淆了 CSS、Javascript 和 HTML - 它们是非常不同的语言，'setAttribute' 函数在 CSS 中没有多大意义，因为background: red; 本质上是 setAttribute。不要试图从 Javascript 或相反的方式翻译你的 CSS - 事情会很快变得混乱。
是的，我只是提供了 Javascript 和 HTML 的示例。我绝不建议从一种语言中获取代码并将其放入另一种语言中。我正在尝试找出 SASS / SCSS 是否具有内置方法/函数或编写自定义函数以产生所需输出的方法。
好吧，这是一篇很好的开始文章：thesassway.com/advanced/pure-sass-functions - 我赞成下面的答案，因为它也解释了前提。

标签： function sass mixins

【解决方案1】：

我不知道这是否必须是一个函数，我发现它更符合逻辑，而是使用 mixin：

// Option 1

@mixin makeRule($value: red, $property: background-color) {
  #{$property}: $value;
}

// Option 2:

@mixin makeRuleWithPrefixes($value: red, $property: background-color) {
  #{-ms- + $property}: $value;
  #{-o- + $property}: $value;
  #{-moz- + $property}: $value;
  #{-webkit- + $property}: $value;
  #{$property}: $value;
}


/////////

body {
  @include makeRule;
}

article {
  @include makeRule(black);
}

p {
  @include makeRule(2px solid blue, border)
}


span {
  @include makeRuleWithPrefixes;
}

我更改了名称，因为没有权利说-makeAttribute，当您创建cssRule（选择器+属性名称+属性值）时，这取决于您；）

好的，第一个，you need interpolation to use a variable as a property name。该值是第一个参数，所以现在您可以使用默认属性，只需传递不同的值（如文章 :)）

或者你现在可以设置你想要的所有属性，只需将属性作为第二个值传递（比如 p ）

body {
  background-color: red;
}

article {
  background-color: black;
}

p {
  border: 2px solid blue;
}

span {
  -ms-background-color: red;
  -o-background-color: red;
  -moz-background-color: red;
  -webkit-background-color: red;
  background-color: red;
}

我选择了第二个选项，因为你问它，但我警告你，这不是一个好方法。您可以使用构建工具（webpack、gulp、grunt.. 不管）而不是使用自动执行此前缀的 autoprefixer 包，这种方式很痛苦，因为您最终必须更新 @mixin。

【讨论】：

这正是我想要的。只是还没有发现 #{ } 语法。文档：sass-lang.com/documentation/… 感谢 Héctor León。
很高兴帮助你，继续编码 ;)