CODEWITHSUNDEEP
csssass
Tal
Tal

Reputation: 702

SASS indented syntax on multiple lines?

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? :(

Upvotes: 15

Views: 9299

Answers (2)

Даниил Пронин
Даниил Пронин

Reputation: 1316

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.

Upvotes: 5

algi
algi

Reputation: 577

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.

Upvotes: 6

Related Questions