Use of Sass indented syntax

[whatyouhide]

I recently tried to organize my stylesheets workflow which has always been somehow messy. I stumbled upon some posts which promoted the idea of using SCSS for non-CSS-outputting code (@mixins, %placeholders, $variables) while using Sass (indent syntax) for everything that ouputs CSS.

So the logically resulting project structure I used has been this:

stylesheets/
  modules/
    header/
    main-nav/
    footer/
      _mixins.scss
      _variables.scss
      _footer.sass
  _variables.scss
  _placeholders.scss
  _mixins.scss
  application.scss # only @import statements

This is nice since I can write mixins, functions and placeholders more carefully and in a more structured way. For example, I can use one line blocks like

@mixin box-sizing($type) {
  -webkit-box-sizing { box-sizing: $type }
  -mox-box-sizing { box-sizing: $type }
  box-sizing { box-sizing: $type }
}

which is way clearer then using three lines per vendor prefix.

Writing actual CSS-outputting code in Sass has its advantages too.
For example I can @include mixins using using just +. Without having to write {}; everywhere, I feel more proficent and the resulting code looks cleaner to me.

Also, this helps with separation of logic (.scss) and presentation (.sass).

What do you think? I'm curious about this technique.

[jferris]

Anybody from @thoughtbot/design have an opinion on this?

[kaishin]

I have briefly tried the other way around: .sass for logic and .scss for styles.
The first problem I faced was how hard refactoring got. Most of my mixins are created from previously existing stylesheet code once a pattern starts forming. With this multi-syntax approach it makes that harder.

There is also the problem of context switching. In many cases, I have both open side by side and I end up typing ; or + in the wrong file.

[joshuaogle]

This seems like such a strange idea, I'd love to see that blog post.

I agree with kaishin that refactoring and abstracting code out of existing styles is going to be your main problem. Separating out mixins, variables and extends is a good idea, but I would stick to whichever syntax you are using in the rest of your project.

[whatyouhide]

I believe this was the essay I was talking about.

[jferris]

Any further thoughts here? Is there an action-item here? Close until we get a pull request?

ping @thoughtbot/design

[joshuaogle]

I personally prefer .sass syntax, but I think mixing them would create much more confusion than it's worth. Closing for now.