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

(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 a simple command can do this.

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!

Leave a Reply

Your email address will not be published. Required fields are marked *

Up Next:

OpenNTPD on Raspberry Pi (Arch Linux ARM)

OpenNTPD on Raspberry Pi (Arch Linux ARM)