Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
498 views
in Technique[技术] by (71.8m points)

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...