Preprocesadores

_index.scss

@import 'foo';    // requires _foo.scss

$string: ".foo"
$list: ()


@mixin foo($color: blue) {
  color: $color;
}

#{$string} {      // .foo {
  color: red
}       
  
  
if($suf, "-#{$suf}", "");

%placeholder {
  color: blue;
}
  

index.styl

@import 'foo'  // requires foo.styl

$string = ".foo"
$list= ()
push($list, foo)

foo($color = blue)
  color: $color
  
{$string}       // .foo {
  color: red
  
$suf ? {'-' + $suf} : ""

for $item in $items

placeholder = 
  width: 20px
  height: 20px
  
width 'calc(100% - %s)' % ($tratamientos-padding * 2)