SASS在多行上缩进语法？

Question

我喜欢Sass的缩进语法(与SCSS相反,SCSS是空白不可知的并且使用括号和分号).我觉得它更清洁.

我有一个问题.如果我的行很长,则无法将其拆分为多行(例如,遵守80个字符的限制)

以这个非常长的mixin声明为例,首先用SCSS编写.

@mixin col($cols, $mleft: 0, $mright: 0, $include-margin: false, $border: 0,
           $pleft: 0, $pright: 0, $include-padding: true, $extra: 0, 
           $clear: false, $lead: true, $container: false) {
    color: red;
    display: block;
}

我能够将一个长的声明分成多行.使用缩进语法,我认为没有办法.我必须将声明放在一行,这样的可读性较差.

@mixin col($cols, $mleft: 0, $mright: 0, $include-margin: false, $border: 0, $pleft: 0, $pright: 0, $include-padding: true, $extra: 0, $clear: false, $lead: true, $container: false)
    color: red
    display: block

有什么方法我不知道吗？:(

Answer 1

sass 不支持多行。阅读文档，有一个例外，当涉及到多个 css 选择器时，如本例所示：

.users #userTab,
.posts #postTab
  width: 100px
  height: 30px

在此处阅读文档：http : //sass-lang.com/docs/yardoc/file.INDENTED_SYNTAX.html#multiline_selectors

所以，遗憾的是：在 sass 中不可能获得对参数列表的多行支持。

Answer 2

第一：不要创建带有这么多参数的 mixin。将其分成许多小的 mixin 或插入一些类似的参数作为数组（Sass 有数据映射）。

其次：您可以使用临时变量只是为了提高大型代码的可读性。

例如：

=mixin($argument)
    body::before
        content: $argument
$v1: 'foo-'
$v2: 'bar-'
$v3: 'baz.'
$var: $v1+$v2+$v3
+mixin($var)

这将使您将所有$v#字符串连接到一个mixin $var。

body::before {
    content: 'foo-bar-baz';
}

如果有人知道用缩进 Sass 语法将多个字符串连接成一个的更好方法，我将很高兴知道。因为我用它编写了复杂的渐变和内联生成的 SVG。