Tutorial

How To Set Up Sass on your VPS Running on Ubuntu

Published on August 14, 2013
How To Set Up Sass on your VPS Running on Ubuntu

Introduction

Sass is a CSS preprocessor that lets you create stylesheets in a much more efficient and intelligent manner than using simple flat CSS. It provides a number of dynamic components that will make your code smaller, more reusable and more scalable. Its syntax is fairly easy to understand and rather adds on top of regular CSS than replaces it.

In this tutorial, we will see how you can install Sass and get started using it. For this, it assumes you are already running your own VPS with Ubuntu and a web server installed on it if you want to see something in the browser (but not necessary at this level).

Please note though that you can install Sass also on other operating systems like Windows and OS X.

You can check out this article for getting you up and running with your VPS.

Installing Sass

In order to install Sass, we’ll need to first have Ruby on the system, so we’ll have to get that installed first. In addition, we’ll have to install rubygems (the package management system for Ruby). Let’s do both of these tasks with the following commands:

sudo apt-get update
sudo apt-get install ruby-full rubygems

Next up, we can use the gem command to install Sass:

sudo gem install sass

Now that Sass is installed, we can get started.

Using Sass

Let’s create a stylesheet to play with. Navigate to your web server’s root folder (for Apache it should be /var/www) and create a file called style.scss:

cd /var/www
nano style.scss

Inside this file, paste in the following css rule:

.box {
  padding:20px;
  background-color:red;
}

As you can see, this is some basic css. Save the file and exit. Now, we’ll need to tell Sass to translate this file into a regular css format file (ending with the .css extension):

sass --watch style.scss:style.css

With this command, Sass will generate the .css file and watch over the .scss file for any changes. If they occur, the .css file will get automatically updated.

When running this command for the first time, you get this error:

[Listen warning]:
  Missing dependency 'rb-inotify' (version '~> 0.9')!
  Please run the following to satisfy the dependency:
    gem install --version '~> 0.9' rb-inotify

You can run the following command to satisfy the dependency:

gem install --version '~> 0.9' rb-inotify

This will do trick. Now, if you are dealing with multiple Sass files, you can run the --watch command and make it compile an entire folder of .scss files:

sass --watch stylesheets/sass:stylesheets/css

This will make it keep track of all the .scss files in the stylesheets/sass folder, automatically compiling them and turn them into their equivalent in the stylesheets/css folder. Once you run one of these commands though, Sass will be in this "watch mode" until you tell it to stop.

You can press Ctrl+C to make it stop watching over the files. After that, changes you make to the .scss file(s) will not be automatically reflected in the .css file(s) until you run again the --watch command.

So what’s the deal? All we did was write some css into a file and then have it copied into another. But there is more to Sass and this is why you should use it. So let’s see what else you can do.

Nesting

Nesting is a great way to avoid having to write the same selector over and over. Say for instance you have 3 selectors that begin with the same thing: ".box ul", ".box li" and ".box li a". Normally, you’d have to create three different rules for these:

.box ul {
  ...
}
.box li {
  ...
}
.box li a {
  ...
}

But with Sass, you can nest them like so:

.box {
  padding:20px;
  background-color:red;
  ul {
    margin:10px;
  }
  li {
    float:left;
    a {
      color:#eee;
    }
  }
}

As you can see, this way you avoided having to repeat writing the .box part of the selector all 3 times. Additionally, it looks very simple and logical. Now if you use the --watch command to generate the .css equivalent, it will automatically create all 3 of those css blocks for you:

.box {
  padding: 20px;
  background-color: red;
}
.box ul {
  margin: 10px;
}
.box li {
  float: left;
}
.box li a {
  color: #eee;
}

In addition, you can nest proprieties using the same logic. For instance, you can write something like this:

.box {
  padding: {
    top:20px;
    right:10px;
    bottom:15px;
    left:10px;
  }
}

This saves you the time of having to write 4 times the word "padding".

Variables

Another time saving and simply awesome feature of Sass is the use of variables. Similar to programming languages like PHP or javascript, this allows you to declare a variable once and use it later in your code as many times as you want. For instance you can do something like this:

$color: #eee;

a {
  color: $color;
}

Sass will then replace all instances of the $color variable in the entire file with the actual color code you declared once: #eee.

Mixins

These are probably the most powerful Sass feature and they behave basically like functions. You can reuse entire style declarations and even pass them arguments. Similar to a function, first you declare them. So let’s declare 2 slightly different mixins.

@mixin box-size {
  width:200px;
  height:200px;
  padding:10px;
  margin:0px;
}

@mixin border($width) {
  border: $width solid #eee;
}

As you can see, the first one does not take any arguments. We can make use of it like so:

.box {
  @include box-size;
}

This will output the following css:

.box {
  width:200px;
  height:200px;
  padding:10px;
  margin:0px;
}

The second mixin we can use by passing it an argument:

.box2 {
  @include border(1px);
}

This will use the rule defined in the mixin and pass it the size argument for even bigger flexibility. This will output the following css:

.box2 {
  border: 1px solid #eee;
}

These are some but not all of the features that make Sass awesome. You can make various computations on a number of possible values and other awesome things. To find out more information and examples of how to use it, you can check out the Sass website.

Output style

Running the --watch command we saw above will make Sass output the resulting CSS in the .css file in its default way: nested. There are 4 different types of output style you can choose from:

  • Nested: reflects the structure of the CSS styles and the HTML document they’re styling.
  • Expanded: with each property and rule taking up one line
  • Compact: each CSS rule takes up only one line, with every property defined on that line.
  • Compressed: has no whitespace except that necessary to separate selectors and a newline at the end of the file.

You can read more about these different styles here. But an easy way to switch between them is in the --watch command itself by adding a flag at the end. For instance, if we want to use the expanded style, we run the command like this:

sass --watch style.scss:style.css --style=expanded

Conclusion

Sass is very powerful and once you get used to it, you will have a much easier front-end experience. It adds intelligence to the way CSS is thought of and provides tools to make it work more efficient.

Article Submitted by: Danny

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
7 Comments


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Is there an updated way of doing this; for Ubuntu 16.04?

I get: $ sudo gem install sass Building native extensions. This could take a while… ERROR: Error installing sass: ERROR: Failed to build gem native extension.

current directory: /var/lib/gems/2.3.0/gems/ffi-1.9.25/ext/ffi_c

/usr/bin/ruby2.3 -r ./siteconf20180724-2121-11wbtob.rb extconf.rb checking for ffi.h… *** extconf.rb failed *** Could not create Makefile due to some reason, probably lack of necessary libraries and/or headers. Check the mkmf.log file for more details. You may need configuration options.

Provided configuration options: –with-opt-dir –without-opt-dir –with-opt-include –without-opt-include=${opt-dir}/include –with-opt-lib –without-opt-lib=${opt-dir}/lib –with-make-prog –without-make-prog –srcdir=. –curdir –ruby=/usr/bin/$(RUBY_BASE_NAME)2.3 –with-ffi_c-dir –without-ffi_c-dir –with-ffi_c-include –without-ffi_c-include=${ffi_c-dir}/include –with-ffi_c-lib –without-ffi_c-lib=${ffi_c-dir}/lib –with-libffi-config –without-libffi-config –with-pkg-config –without-pkg-config /usr/lib/ruby/2.3.0/mkmf.rb:456:in try_do': The compiler failed to generate an executable file. (RuntimeError) You have to install development tools first. from /usr/lib/ruby/2.3.0/mkmf.rb:587:in try_cpp’ from /usr/lib/ruby/2.3.0/mkmf.rb:1091:in block in have_header' from /usr/lib/ruby/2.3.0/mkmf.rb:942:in block in checking_for’ from /usr/lib/ruby/2.3.0/mkmf.rb:350:in block (2 levels) in postpone' from /usr/lib/ruby/2.3.0/mkmf.rb:320:in open’ from /usr/lib/ruby/2.3.0/mkmf.rb:350:in block in postpone' from /usr/lib/ruby/2.3.0/mkmf.rb:320:in open’ from /usr/lib/ruby/2.3.0/mkmf.rb:346:in postpone' from /usr/lib/ruby/2.3.0/mkmf.rb:941:in checking_for’ from /usr/lib/ruby/2.3.0/mkmf.rb:1090:in have_header' from extconf.rb:16:in <main>’

To see why this extension failed to compile, please check the mkmf.log which can be found here:

/var/lib/gems/2.3.0/extensions/x86_64-linux/2.3.0/ffi-1.9.25/mkmf.log

extconf failed, exit code 1

Gem files will remain installed in /var/lib/gems/2.3.0/gems/ffi-1.9.25 for inspection. Results logged to /var/lib/gems/2.3.0/extensions/x86_64-linux/2.3.0/ffi-1.9.25/gem_make.out $

This comment has been deleted

    When I attempt sudo apt-get install ruby-full rubygems

    I get the following:

    Reading package lists… Done Building dependency tree
    Reading state information… Done Package rubygems is not available, but is referred to by another package. This may mean that the package is missing, has been obsoleted, or is only available from another source However the following packages replace it: ruby

    E: Package ‘rubygems’ has no installation candidate

    So I then i use:

    sudo gem install sass

    which seems to work fine, but when I try to convert a sass file (sasstest.scss) with

    sass --watch sasstest.scss:sasstest.css

    I get:

    /usr/lib/ruby/1.9.1/rubygems/dependency.rb:247:in to_specs': Could not find sass (>= 0) amongst [bundler-1.7.3, bundler-unload-1.0.2, executable-hooks-1.3.2, ffi-1.9.4, gem-wrappers-1.2.5, rb-inotify-0.9.5, rubygems-bundler-1.4.4, rvm-1.11.3.9] (Gem::LoadError) from /usr/lib/ruby/1.9.1/rubygems/dependency.rb:256:in to_spec’ from /usr/lib/ruby/1.9.1/rubygems.rb:1231:in gem' from /usr/local/bin/sass:22:in <main>’

    which differs from the response you list above.

    Just a note that Digital Ocean has <a href=“https://www.digitalocean.com/community/articles/how-to-install-ruby-on-rails-on-ubuntu-12-04-lts-precise-pangolin-with-rvm”>another help article</a> on how to install Ruby that provides a different method than the one given above.

    Probably worth a mention that as I went through these steps in March 2014, the installation of rb-inotify specifying the version:

    gem install --version ‘~> 0.9’ rb-inotify

    was unsuccessful.

    However, just running gem install rb-inotify worked fine, and the sass watch command worked fine from then on.

    Kamal Nasser
    DigitalOcean Employee
    DigitalOcean Employee badge
    August 25, 2013

    @tesh: Not necessarily. For instance, you can have *.css in .gitignore so that the repo only contains .scss files, and have an on-receive hook that recompiles all .scss files. This way your repo stays clean while your webserver is serving up-to-date css files.

    Is this mostly for those who have a remote VPS as a development environment?

    Try DigitalOcean for free

    Click below to sign up and get $200 of credit to try our products over 60 days!

    Sign up

    Join the Tech Talk
    Success! Thank you! Please check your email for further details.

    Please complete your information!

    Get our biweekly newsletter

    Sign up for Infrastructure as a Newsletter.

    Hollie's Hub for Good

    Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

    Become a contributor

    Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

    Welcome to the developer cloud

    DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

    Learn more
    DigitalOcean Cloud Control Panel