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!

Darryl Dias

I’m Darryl. I’m a 3D Artist, Programmer and Linux enthusiast. On this site I share my insights, tips and tricks, tutorials, methods and best practices.

Leave a comment

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