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 SASS with Wordpress (Become an expert)

In this and the next recipe, we're going to take a look at using the Bones theme in WordPress, which incorporates SASS, and will save us a great deal of time. We will work through installing it, familiarizing ourselves with the theme structure, and make some changes to see how it works.

Getting ready

For this recipe, you're going to need a few things, in addition to your choice of text editor:

  • A working installation of WordPress – either on a local or remote server (sorry but this won't work for sites, as it doesn't support the use of the @import tag, which we will be using in this recipe). For this recipe, I will assume you are using a local copy of WordPress (version 3.4.2 at time of writing), hosted through WAMP.

  • A copy of the open source WordPress Bones theme, which you can download from

  • A working installation of Scout, configured to watch the scss folder in the Bones theme (as indicated in the recipe).

How to do it...

  1. Let's begin by extracting the theme from the ZIP archive you've downloaded. Inside you will see a folder with a name similar to eddiemachado-bones-53d7155; extract it to your WordPress theme folder, and rename it to bones.

  2. Activate the Bones theme in the theme admin area in WordPress, in the normal manner.

  3. Navigate to \bones\library within your WordPress theme folder in Windows Explorer. Inside, you will find a number of folders; one of this is called scss, which contains the SASS files for the Bones theme.


    If you're expecting to edit the style.css file, but don't find any code, don't worry. Bones has been developed to work with the contents of the \library file as its CSS source. The main style.css file in the root of the theme is there to purely allow WordPress to recognize the theme in the admin gallery only.

  4. Go ahead and open up _base.scss from within the scss folder, in Sublime Text 2, and look for the #content style on or around line 245.

  5. Alter the code as shown:

    #content { margin-top: 2.2em; background-color: #D5AEAB; margin-left: auto; margin-right: auto; width: 60%; }
  6. Save the changes, then copy the three recompiled files from the scss folder to the css folder, as we did in step 3, and refresh your browser window. It will have shrunken the main content area to 60 percent of the width, and added a purple background.

  7. Okay, let's do the same with the header. Look for .header{} on or around line 153 in _base.scss. Alter the style to the following line:

    .header { margin-left: auto; margin-right: auto; width: 62.5%; }
  8. Save your work, then copy the style.css file over to the css folder, in the same way as we did in step 7. Refresh your browser view and notice how the header has been moved into the center, in the same way we did for the content area.

  9. Now we're going to make two more changes to the style sheet. First, look for .footer, on or around line 819, and alter it as follows:

    .footer { clear: both; margin-left: auto; margin-right: auto; width: 62.5%; }
  10. Finally, let's add in a slight adjustment to the text in the footer – it looks a little cramped and could use some color:

    .copyright { background-color: #EEE; padding: 5px; }
  11. If everything has worked, we'll end up with something similar to the following screenshot, when you preview it in a browser:

How it works...

In this recipe, we've installed a copy of the Bones theme into a working installation of WordPress and begun to navigate around the SASS partial files, and made some minor changes. I know, before you say anything, it's certainly not going to win any prizes for style! But it highlights a useful point; it is perfectly possible to use SASS in a CMS environment. Indeed, it is almost essential in some respects, if only to manage the large number of lines of code effectively.

We've pulled in a number of concepts that we've covered throughout this book, such as mixins, functions, partials, importing, and more. It may seem somewhat complicated, but if you spend any time developing in WordPress, it will be worth spending time just going through the code, so that you can learn how the theme works. It is important to bear in mind though that a fair amount of the functionality you might otherwise have expected to see, won't be there – the developers did this intentionally as they wanted the theme to act as a base for your own development. After all, it's easier to add functionality, then to take it away!

We have now reached the final recipe in this book – don't worry, it's a nice easy one! We're going to stay with the theme of working with WordPress, and look at how you can use Compass to provide additional vendor support for CSS3 styles.