Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

SASS indented syntax on multiple lines?

Tags:

css

sass

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

like image 252
Tal Avatar asked Nov 23 '11 20:11

Tal


People also ask

Does Sass follow strict indentation?

SASS follows strict indentation, SCSS has no strict indentation. SASS has a loose syntax with white space and no semicolons, the SCSS resembles more to CSS style and use of semicolons and braces are mandatory.

What is indentation in sass?

SASS Indented SyntaxIt uses indentation rather than { and } to delimit blocks. To separate statements, it uses newlines instead of semicolons(;). Property declaration and selectors must be placed on its own line and statements within { and } must be placed on new line and indented.

What does #{} syntax refer in sass?

Interpolation can be used almost anywhere in a Sass stylesheet to embed the result of a SassScript expression into a chunk of CSS. Just wrap an expression in #{} in any of the following places: Selectors in style rules. Property names in declarations. Custom property values.

Why Sass is better than less?

SASS is a CSS preprocessor that assists with reducing redundancies in CSS and in the end saves time. They are extensions of CSS, which helps in saving time. It gives a few features which can be utilized to make stylesheets and assist with keeping up with the code.


1 Answers

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.

like image 198
algi Avatar answered Nov 15 '22 22:11

algi