Interpolation: Roole vs Sass

_roole_sass_interpolation.md

This was more or less a mential exersize in seeing what the differences are between Sass and Roole when it comes to interpolation. A conversation sparked from the Twitters.

As a result, I didn't come to the conclusion that Roole's supoprt of interpolation isn't any 'better' then Sass. In most cases, it is a simple syntatical difference. Sass simply adheres to Ruby's interpolation syntax.

But this review presented me with the opportuntiy to dig deeper into a few other features like scoping and extends.

Scoping

Another point brought up in this Tweet was Roole's support of scoping variables within selector rules. This is interesting to me. Not sure yet how I feel about it. On one hand this is handy to have, on the other this can lead to somewhat chaotic code. Sass leans heavily on the cascade, simply I assume because this is how CSS works.

Sass somewhat supports this feature in the context of mixins. To me that makes a little more sense.

Extends

Roole's @extend feature isn't all that dissimilar from Sass, but I have to give a thumbs up to their exact selector matching feature.

.icon
  font-family: icon-font
	
.button .icon
  font-family: button-font
	
.button .edit-icon
  @extend .icon
  content: 'i'

Returns

.icon, .button .edit-icon {
  font-family: icon-font;
}
	
.button .icon {
  font-family: button-font;
}
	
.button .edit-icon {
  content: 'i';
}

Whereas the same code in Sass returns

.icon, .button .edit-icon {
  font-family: icon-font;
}
	
.button .icon, .button .edit-icon {  <-- the diff
  font-family: button-font;
}
	
.button .edit-icon {
  content: "i";
}

SassMeister Gist

Play with the code

input.sass

// Sass v3.2.5

// Interpolation
// ---------------------------------
// Roole
// $number = 12
// .heading::before
//   content: "Chapter $number: "

// Sass
$number: 12
.heading::before
  content: "Chapter #{$number}: "

// Roole
//$name = star
//.icon-$name
//  width: 20px
//  height: 20px

// Sass
$name: star
.icon-#{$name}
  width: 20px
  height: 20px
 
// Roole 
//$position = left
//.sidebar
//  padding-$position: 20px
//  border-$position: 1px solid

// Sass 
$position:left
.sidebar
  padding-#{$position}: 20px
  border-#{$position}: 1px solid
  
// Roole
//$chapter = 4
//.figcaption::before
//  content: "Figure {$chapter}-12: "
  
// Sass
$chapter: 4
.figcaption::before
  content: "Figure #{$chapter}-12: "

// Roole
//$position = left
//.sidebar
//  border-{$position}-width: 1px
  
// Sass
$position: left
.sidebar
  border-#{$position}-width: 1px

// Extends 
// ---------------------------------
.icon
  font-family: icon-font

.button .icon
  font-family: button-font

.button .edit-icon
  @extend .icon
  content: 'i'

// Scoping
// ---------------------------------
// Roole
//$width = 200px
//.mini-menu
//  $width = 100px
//  width: $width

//.menu
//  width: $width

// Sass
$width: 200px
.mini-menu
  $width: 100px
  width: $width

.menu
  width: $width

output.css

.heading::before {
  content: "Chapter 12: ";
}

.icon-star {
  width: 20px;
  height: 20px;
}

.sidebar {
  padding-left: 20px;
  border-left: 1px solid;
}

.figcaption::before {
  content: "Figure 4-12: ";
}

.sidebar {
  border-left-width: 1px;
}

.icon, .button .edit-icon {
  font-family: icon-font;
}

.button .icon, .button .edit-icon {
  font-family: button-font;
}

.button .edit-icon {
  content: "i";
}

.mini-menu {
  width: 100px;
}

.menu {
  width: 100px;
}