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 useful when you must 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 good dedicated hardware to build and manage Sass based projects.

Installing Sass on you Raspberry Pi is simple.

Installing Ruby.

(Raspbian/PiBang)

sudo apt-get install ruby  
Code language: JavaScript (javascript)

(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  

Code language: JavaScript (javascript)

Installing the Sass gem.

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

We can now write our first Sass file.

touch style.scss  
Code language: CSS (css)

If you prefer SASS then.

touch style.sass  
Code language: CSS (css)

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

sass style.scss:style.css  
Code language: CSS (css)

or

sass style.sass:style.css  
Code language: CSS (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;
}

Code language: SCSS (scss)

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)

Code language: SCSS (scss)

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

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

Code language: CSS (css)

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

sass --watch style.scss:style.css  
Code language: CSS (css)

or

sass --watch style.sass:style.css  
Code language: CSS (css)

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

Happy Coding!