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)

Using Compass in WordPress (Become an expert)


We've been through a real whistle stop tour of SASS and seen how it works – let's finish on a nice easy demo, which looks at how you can use Compass to provide vendor prefix support to our Bones theme in WordPress.

Getting ready

For this recipe, you will need your trusty text editor (preferably Sublime Text 2). You will also need Scout up and running, and configured to scan the \bones\library folder in your WordPress theme folder. We'll also need the Bones theme from the previous recipe. For the purposes of this recipe, I will assume that the settings remain unchanged from the previous task.

How to do it...

  1. Let's make a start by opening up a copy of the _mixins.scss file in the \bones\library\scss folder within the Bones theme. This contains all of the CSS3 mixins that we will work on.

  2. On or around line 18, add in the following line to call in Compass:

    @import "compass";
  3. Move down to the border-radius mixin, that starts on or around line 161:

  4. Let's comment out this mixin, as we're going to move to using the Compass version.

  5. Compass' version of border-radius is the same format as the one used in the Bones theme, so there is no need to change it in the Bones code. Go ahead and save your work. Check in the \bones\library\scss folder, you should find a freshly compiled style.css file. Copy this (and the other two – login.css and ie.css) to the css folder underneath \bones\library.

  6. To check that it has worked, open up the style.css file within \bones\library\css, and look for the .buttons class on or around line 638. You should find the compiled code for border-radius.

  7. Let's go for something little more involved – we will replace the box-shadow mixin, currently in use at line 204 with the version from Compass.

  8. Comment out the line at 287, and replace it with the following line (note that the order is reversed in comparison to that used by Bones):

    @include box-shadow(lighten($bones-blue, 16%) inset 0 0 3px);
  9. Save and recompile your work, then copy the updated CSS file to \bones\library\css. If you open up the style.css file from within that folder, you will find the box-shadow style in use at line 824.

How it works...

Although we've only scratched the surface with the changes we've made, it opens up a wealth of possibilities of what you can do in WordPress using Compass, or even any other similar mixin library. The same principle was used in both cases in this recipe – we've inserted a reference to Compass, found the mixin we're going to replace, and then removed the original. We've either left the original reference further down the _mixins.scss file as is, or altered it to fit in with the format used by Compass, then saved and recompiled the file.

One question that you may ask though is – why do it? The answer is simple: you could spend time maintaining vendor prefixes, which will come and go over time, or you could get someone to do it for you! There's no real technical necessity to do this, it is entirely up to you how you manage it, depending on what fits in best with your work environment.