Sass --style mirror

readme.md

A test to play with output style that allows line 33 in .scss to be the same in a compiled css.

Inspired by this post: http://jeffcroft.com/blog/2012/mar/20/css-preprocessors-view-source-output-readability/

file structure

style.scss
_foo.scss
_bar.scss

would compile to the following with css @import rules applied

style.css
_foo.css
_bar.css

mixins

Mixins would simply be ignored and white space inserted. Then flattened to one line when called into a stylesheet.

scss:

@mixin foo {
  width: 100px;
  height: 100px;
  display: block;
}

foo {
  @import foo;
}

css:

foo {
  width: 100px; height: 100px; display: block; /* @mixin foo line 1 */
}

@extend

This is where things get tricky. Simply treating @extend as a mixin without variables should work in some cases but it ruins the cascade.

%foo {
  width: 100px;
  height: 100px;
  display: block;
}

.foo {
  width: 100px;
  height: 100px;
  display: block;
}

bar {
  @extend .foo;
}

css:

bar {  /* @extend bar line 15 */
  width: 100px;
  height: 100px;
  display: block;
}

.foo, bar {  /* @extend bar line 14 */
  width: 100px;
  height: 100px;
  display: block;
}

bar {
  /* @extend .foo line 6 */
  /* @extend %foo line 1 */
}

Functions

Simply add blank lines when functions are declared, comment in the function in the output.

scss

@function foo($var) {
  @return $var;
}

.bar {
  width: foo(100px);
}

css

.bar {
  width: 100px; /* @function foo(100px) line 1 */
}

Control directives

The output would be stacked on the first line of the loop.

scss

@for $i from 1 through 5 {
  .w-#{$i} {
    width: $i * 100px ;
  }
}

css

.w-1 {width: 100px;} .w-2 {width: 200px;} .w-3 {width: 300px;} .w-4 {width: 400px;} .w-5 {width: 500px;}

Fair enough. Yeah I would never use this but have heard many people complain about debugging CSS for line X when using Sass. Thinking if it is even possible to output styles that match up.