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)

Building functions within SASS (Must know)

I'm sure that as a seasoned developer, you will be used to working with functions and operators in code…what if I said you could do the same with CSS? Yes, you heard correctly – with CSS. Well, you can; the power of SASS means that you could potentially create a whole color theme for something like WordPress, from one base color. Let's take a look how, as part of our next recipe.

Getting ready

All we need for this recipe is our text editor. For the purposes of this recipe, I will assume that you are using Sublime Text 2. If you don't use Sublime Text 2, then you will need to have an instance of SASS' watch command running in the background, to compile code.

How to do it...

  1. Let's begin by opening Sublime Text 2, and adding the following code snippet to a copy of the template we created at the start of this book. Save it as sassfunctions.html:

      <h1>Heading 1</h1>
      <h2>Heading 2</h2>
      <h3>Heading 3</h3>
      <h4>Heading 4</h4>
      <h5>Heading 5</h5>
  2. You'll also need to add the following code snippet in, this will incorporate our compiled styles:

      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <link rel="stylesheet" href="sassfunctions.css" type="text/css" >
  3. We now need to add in our styles. Go ahead and create a new SCSS document, then add the following styles, starting with our firefox-message mixin, and base variables:

    @mixin firefox-message($selector, $message) {
      #{$selector}:before { content: $message; }
    $firefox-greeting: "Hi Firefox users! This is a....";
    $mainColour: #631;
    $h1Size: 4em;
    $removemargin: -20px;
  4. Let's now add in each of the H styles, from 1 to 5:

    h1 { @include firefox-message("&", "Hi Firefox users! This is a...."); font-size: $h1Size;
      color: transparentize($mainColour, 0.3); 
    h2 { @include firefox-message("&", $firefox-greeting); 
      color: lighten($mainColour, 5%); margin-top: $removemargin; font-size: $h1Size * .8; 
    h3 { @include firefox-message("&", $firefox-greeting); 
      color: lighten($mainColour, 10%); margin-top: $removemargin; font-size: $h1Size * .6; 
    h4 { @include firefox-message("&", $firefox-greeting); 
      color: lighten($mainColour, 15%); margin-top: $removemargin; font-size: $h1Size * .4; 
    h5 { @include firefox-message("&", $firefox-greeting); 
      color: lighten($mainColour, 20%); margin-top: $removemargin; font-size: $h1Size * .2; 
  5. If all is well, you should see something similar to the following screenshot, when saving and previewing your work in a browser:

How it works...

In this recipe, we've used three pieces of functionality from the library – color functions, string interpolation, and operators.

String interpolation is a simple but very powerful function in SASS. It allows you to use placeholders within your code, so that when a string is passed through to a function, SASS will replace that placeholder with the desired value as part of compiling the code.

Operators work in a similar way to other languages – here, we've used them to work out the font-size value that should be used for each style. For example, based on an H1 style set at 4em, an H3 font size will work out as 0.6 x 4em, or 2.4em.

The lighten and transparentize functions are part of SASS' library of functions for working with color. The former will lighten a given color by the specified amount, and the latter will make a color more transparent by the amount given. A key thing to note is that SASS will normally leave color formatting alone; the exception to this is when using HSL colors, which are automatically output as hex values and HSLa values are shown as RGBa equivalents. You may therefore find RGBa values appearing in your code, in a similar fashion to what we've used for the H1 style rule in this exercise:

color: rgba(102, 51, 17, 0.7);
font-size: 4em; }
h1:before { content: "Hi Firefox users! This is a...."; }

It won't make any difference to the outcome, although some people find it easier to use, as it is not always easy to tell what a hex color value is!

There's more...

This is a really powerful part of SASS, which, if used correctly can significantly reduce the amount of values that you have to work out, such as colors for a theme. It does require you to take care over how you do – to misquote a well-known phrase, "measure twice, and drill a hole once", or in this case, "calculate twice, and then write once…" – you get the idea…

To show you how important it is to take care with this part of the library, a perfect example arose when writing this demo; I used this rule to create my H1 style:

h1 { @include firefox-message("&", $firefox-greeting); 
  color: transparentize($mainColour, 0.3); 
  font-size: $h1Size;

This pulled in the firefox-message mixin, we will learn more about these later:

@mixin firefox-message($selector, $message) {
  #{$selector}:before { content: $message; }

This compiled to the following code, notice the deliberate error?

h1 { color: rgba(102, 51, 17, 0.7); font-size: 4em; }
  h1 h1:before {
    content: "Hi Firefox users! This is a...."; }

In case you didn't spot it, you can't use a double H1 attribute when referencing the content rule. To fix this, you need to pass an ampersand instead of the H1 attribute:

h1 { 
  @include firefox-message("&", $firefox-greeting); 
  color: transparentize($mainColour, 0.3); 
  font-size: $h1Size;

SASS understands that the whole rule will automatically apply to each style. The & sign tells SASS to use each selector that is passed and to assign the :before pseudo-selector when creating the rule for displaying the text.