Question

注意：

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

让我首先定义我想要实现的结果。

_body.scss

body {

   background-color: red;

}

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

选项1：编写一串HTML代码并替换现有的html标记。

不打算对此进行编码，因为这是编写Javascript的一种混乱方式，但主要使用document.write（）方法。

选项2：使用＆＃34; setAttribute（）＆＃34;方法

// 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中的＆＃34; setAttribute（）＆＃34;方法），或上面的字符串示例。

我知道函数可以采用：number，string，bool，color，list，map或null;但我不知道的是，属性是否适合任何这些值类型（例如：string）。

我觉得好像文章：Bringing Configuration Objects To Sass可能正在解释我想要做的事情，但我很难理解这篇文章（所以它可能不是对解决方案的解释）。< / p>

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

body {

   background-color: red;

   -o-background-color: red;

   -ms-background-color: red;

   -moz-background-color: red;

   -webkit-background-color: red;

}

Answer 1

我不知道这是否必须是一个函数，我发现更多逻辑使用mixin代替：

{{date('F d, Y', strtotime($po->due_date))}}

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

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

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

// 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;
}

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

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

1 个答案: