Sass on Raspberry Pi

Sass also known as Syntactically Awesome Stylesheets is a stylesheet scripting language that is interpreted into Cascading Style Sheet also known as CSS. Sass consists of two syntaxes, The original syntax, called “the indented syntax”, uses a syntax similar to Haml, It uses indentation to separate code blocks and newline characters to separate rules, it uses a .sass extension, The newer syntax uses block formatting that is similar to CSS, It uses braces to denote code blocks and semicolons to separate lines within a block, the new syntax uses a .scss extension.

Sass is really useful when you have to write a lot of stylesheet for a large project or when you want to write maintainable stylesheet library. Sass offers the following features variables, nesting and mixin.

Raspberry Pi can be a really good dedicated hardware to build and manage Sass based projects.

Installing Sass on you Raspberry Pi is really simple.

Installing Ruby.

(Raspbian/PiBang)

sudo apt-get install ruby  

(Arch Linux ARM)

pacman -S ruby  

Exporting Ruby path (Only for Arch Linux ARM), place this in your .bashrc.

PATH="$(ruby -e 'puts Gem.user_dir')/bin:$PATH"  
export PATH  

Installing the Sass gem.

gem install sass --no-ri --no-rdoc  

We can now write our first Sass file.

touch style.scss  

If you prefer SASS then.

touch style.sass  

Once you have added these lines to the file, we can now use sass to compile it.

sass style.scss:style.css  

or

sass style.sass:style.css  

If you have chosen SCSS view the code below. We are creating a mixin and using it.

@mixin bg($bg-color, $bg-fonts) {
    background-color: $bg-color;
    font-family: $bg-fonts;
}

If you have chosen SASS view the code.

=bg($bg-color, $bg-font)
 background-color: $bg-color
 font-family: $bg-font

body  
 +bg(#ddd, sans-serif)

The CSS output would look something like this for both files.

body {  
  background-color: #dddddd;
  font-family: sans-serif; }

If you want the Sass compiler to actively watch the file changes and update the output this can be done by a simple command.

sass --watch style.scss:style.css  

or

sass --watch style.sass:style.css  

Now you have Sass installed and setup on your Raspberry Pi.

Happy Coding!