SCSS：将属性和值发送到函数

Question

注：

我是网络开发和面向对象编程的新手。我是 SCSS 的新手，还没有完全理解语法。我对如何使用 functions in SCSS.

有了基本的了解

让我先定义我想要达到的结果。

_body.scss

body {

   background-color: red;

}

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

方案1：编写一串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 中还有其他方法可以做到这一点，但对于这个例子，我将重点介绍这两个。

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

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

@function makeAttribute( $attribute, $value )

{

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

}

body {

   makeAttribute( background-color, red );

}

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

我知道函数可以采用：number、string、bool、color、list、map 或 null；但我不知道的是属性是否适合这些值类型中的任何一种（例如：字符串）。

我觉得这篇文章：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;

}

Answer 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.. 等等）而不是使用自动执行此前缀的自动前缀程序包，这种方式很痛苦，因为您最终必须更新@mixin。

SCSS：将属性和值发送到函数

SCSS: Send Attribute and Value to Function

function

sass

mixins