Question

我喜欢Sass的indented syntax（与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不支持Multiline。阅读文档时，有一个例外，当涉及到多个css选择器时，例如：

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

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

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

Answer 2

首先：不要创建包含这么多参数的mixins。将它分成许多小混合或插入一些类似的参数作为数组（Sass有数据映射）。

第二：你可以使用临时变量只是为了你的大代码的可读性。

例如：

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

这样您就可以将所有$v#个字符串与一个$var联系起来。

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

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

SASS在多行上缩进语法？

2 个答案: