SASS indented syntax on multiple lines?

Question

I love Sass's indented syntax (as opposed to SCSS, which is whitespace agnostic and uses brackets and semicolons). I think it's much cleaner.

There's one issue I have with it. If I have a really long line, there's no way to split it into multiple lines (obeying the 80 character limit, for example)

Take this example of a really long mixin declaration, first written in 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;
}

I'm able to split up one long declaration in to multiple lines. With the indented syntax, I don't think there's a way. I have to put the declaration on one line, which is way less readable.

@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

Is there some way I don't know of? :(

http://stackoverflow.com/questions/2389797/is-there-a-multiline-in-sass is marked as a duplicate, but it has a better answer. To summarize: there's no multiline in Sass, there is multiline in SCSS though. See also https://github.com/sass/sass/issues/216. — Daniel Darabos, Nov 19 '15 at 16:37

score 6 · Answer 1 · answered Nov 24 '11 at 09:21

6

Multiline is not supported by sass. Reading the doc, there is one exception, when it comes to multiple css selectors like in this example:

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

Read the doc here: http://sass-lang.com/docs/yardoc/file.INDENTED_SYNTAX.html#multiline_selectors

So, sadly: There is no possibility to get multi-line support for an argument list in sass.

answered Nov 24 '11 at 09:21

algi

567
5
13

users coming from [stylus](http://stylus-lang.com/) beware: unlike stylus, line 1 does need a trailing comma, otherwise you get silent failure (aka: a useless line) – Frank N Mar 15 '17 at 12:31

score 5 · Answer 2 · edited Nov 11 '14 at 11:49

First: do not create mixins with so many arguments. Divide it to many small mixins or insert some similar arguments as arrays (Sass have data maps for it).

Second: you can use temporary variables just for readability of your large code.

For example:

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

This will get you mixin with all your $v# strings joined to one $var.

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

If someone knows better way to join many strings into one in indented Sass syntax, I will be happy to know. Because I write complex gradients and inline generated SVG with this.

This answer really deserves more the zero upvates! In general, if lines get too long, just storing parts of it into variables with help. — Ideogram, Mar 10 '20 at 09:02

SASS indented syntax on multiple lines?

2 Answers2

Linked

Related