Book Image

Instant SASS CSS How-to

By : Alex Libby
1 (1)
Book Image

Instant SASS CSS How-to

1 (1)
By: Alex Libby

Overview of this book

CSS styling has been a key part of developing for the Internet since the early 1990s, but unlike JavaScript, has suffered from the inability to produce dynamic styles, using functions, operators, and variables. SASS uses the power of Ruby to bring support for all three and more to your CSS, allowing you to engage in a more efficient, modular style of working, and making it easier to maintain your CSS styling in your projects.Instant SASS CSS How-to is a practical, hands-on guide that provides you with a number of clear step-by-step exercises, which will help you take advantage of the power of SASS, and give you a good grounding in writing and compiling CSS style sheets using the SASS pre-processor language.This book looks at how you can incorporate SASS into your web pages, and either produce style sheets dynamically, or pre-compile them before including the final article into your site's pages.You will also learn how you can use the power of mixins, functions, and variables to help produce style sheets, and reduce the amount of code you need to write in your style sheets. We will also take a look at how you can incorporate a more modular style to your development workflow, which will help with making style sheets more manageable and easier to update in the future. We will also take a look at how you can build up libraries of reusable code that you can incorporate into your future projects.You will learn everything you need to know to start using SASS to help produce more efficient style sheets in your site's pages, and adopt a more modular development workflow, which will make it easier to maintain your sites in the future.
Table of Contents (7 chapters)

Adding support to text editors (Must know)


For designers and developers, text editors are a matter of personal preference – there are hundreds available freely, or at low cost. In this exercise, we're going to look at adding support for SASS into Sublime Text 2, although the same workflow principles will apply to similar editors.

Getting ready

For this recipe, you will need to obtain a copy of the shareware application Sublime Text 2, which is available at http://www.sublimetext.com/2 – the latest version at the time of writing is 2.0.1. You will need to purchase a license for continued use – at the time of writing, the cost is USD 59. You will also need to get a copy of the SASS plugin for Sublime Text 2 – you can download either the ZIP or tar package from https://github.com/n00ge/sublime-text-haml-sass/downloads (I will assume you have downloaded the ZIP file, for the purposes of the recipe).

How to do it...

  1. Let's begin by installing Sublime Text 2. Double click on the Sublime Text 2.0.1 Setup.exe file, and accept all defaults, including selecting the option Add to explorer context menu, during the installation.

  2. Launch Sublime Text 2 then click on Preferences, then Browse Packages…. This will open a folder within your profile.

  3. Go ahead and extract the contents of the ZIP file you downloaded earlier. Inside it you will find two folders, one called Ruby Haml and the other SASS. Copy these two folders into the Packages folder you opened from within Sublime Text 2, and restart Sublime Text 2.

  4. To confirm that all has worked properly, open the example1.scss file from the previous recipe in Sublime Text 2; you should see something like the following screenshot:

How it works...

The SASS support package that you downloaded from Github contains a number of layout instructions to tell Sublime Text 2 how to format SASS code within the browser. It also contains commands that will allow you to build the CSS file from within SASS. If you click on the Tools menu, then Build, you can initiate the SASS compiler to automatically compile your code, as we did in the previous recipe. It will start the compiler's watch facility, which will then kick in when you make the next change within Sublime Text 2.

There are lots of editors available Sublime Text 2 may not suit your needs, so it is worth looking online and trying a few before finding one that works for you. As an example, for Mac users, you may prefer something like CodeKit, which is available from http://incident57.com/codekit/index.php. This already includes support for SASS.

There may be instances where you may prefer to use the command line to create your SASS files though; you may prefer to use a GUI just to compile your code. In the next recipe, we'll take a look at how you can do this, using Scout.