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 CSS-3 directives in SASS (Must know)


The mere mention of the word "directive" may seem intimidating to some people, particularly when coding. In reality, they are perfectly harmless! The directive you are likely to use the most is that of @import, although this is just a small part of what is available. SASS supports all standard CSS-3 directives such as @media, as well as some of its own. In this exercise, we're going to look at three directives, namely @extend, @import, and @include, as part of building some dialog boxes that you could use in your projects.

Getting ready

For this recipe, we're going to need some suitable icons for each dialog box. There are dozens available online for you to choose from. One such place is the Open Icon Library Project (http://openiconlibrary.sourceforge.net). You will need three icons in total; one for the alert dialog, one for information, and one for the error dialog.

You will of course need your text editor as well. For the purpose of this example we will be using Sublime Text 2.

How to do it...

  1. Let's make a start by creating our template (from the start of the book) for displaying the alerts. Create a new document and save it as css3rules.html. Add the following code in the <head> tag area:

    <link rel="stylesheet" type="text/css" href="css3rules.css">
  2. Add the following code in the <body> area:

    <body>
      <div class="info">Information you need to know</div>
      <br /><br />
      <div class="alert">Alert you triggered</div>
      <br /><br />
      <div class="error">Error with our code</div>
    </body>
  3. We now need to add some styling to our alerts – without it, they won't look very good! Go ahead and add the following code snippet to a new SCSS document, and save it as css3rules.scss. We will begin with the base style required for our alert dialog box:

    @import "css3mixins";
    
    body {
      color: #444444; 
      font-family: 'Lucida Grande',Verdana,Arial,Sans-Serif;
      font-size: 14px;
    }
    
    .base { @include rounded-top(5px); text-align: left;
      padding: 20px 20px 5px 75px; width: 200px; height: 50px; }
  4. Next comes the first of three types – the alert dialog:

    .alert { @extend .base;
      background: #fff6bf url(images/exclamation.png) 5% 50% no-
      repeat; border: 2px solid #ffd324; }
  5. The second one is the style required for an information dialog:

    .info {
      @extend .base;
      background: #F8FAFC url(images/information.png) 5% 50% no-repeat;
      border: 2px solid #B5D4FE;
    }
  6. The last style is required for displaying the error dialog:

    .error { @extend .base;
      background: #FFBFBF url(images/error.png) 5% 50% no-repeat; 
    border: 2px solid #FF2424; }
  7. Our final step is to add in the mixin – this controls the border edge. Add the following code snippet to a new file, and save it as css3mixins.scss:

    @mixin rounded-top($radius) {
      border-radius: $radius;
      -moz-border-radius: $radius;
      -webkit-border-radius: $radius;
    }
  8. Save all of your work and then preview it in a browser. If all has gone well, you should see something similar to the following screenshot:

How it works...

In this exercise, we've looked at two components of the CSS-3 directives functionality available within SASS – the @import and @extend directives. The former allows us to bring in (or import) content from multiple sources into one file. When SASS compiles the files, it will produce one CSS file that contains all of the imported styles within it. This has the benefit of removing the need for multiple requests to the server, while still maintaining the ability to separate our work into smaller, more manageable chunks.

Note

You will notice that we use use of the @import directive a fair amount throughout this book.

The second directive is that of @extend – think of it as a form of inheritance. It tells SASS to include the base mixin by default. However, it doesn't just include it as additional styles within the same block, thereby leading to unnecessary code bloat, but to create a base style that applies to all styles that subsequently inherit it:

.base, .alert, .info, .error { width: 200px; height: 50px;
  border-radius: 5px; -moz-border-radius: 5px; 
  -webkit-border-radius: 5px; padding: 20px 20px 5px 75px;
  text-align: left; }

.alert { background: #fff6bf url(images/exclamation.png) 5%  50% no-repeat; border: 2px solid #ffd324; }

There's more...

There is a wealth of functionality you can use within SASS, and which we've not been able to cover here in this book. It is worth looking at the documentation available online to familiarize yourself with what is possible. A good example is the @media directive. This behaves much in the same way as CSS does, but SASS allows you to embed it into nested styles, in a similar way to how we've used @extend in our example.

Let's move on now and look at another part of the SASS library – control directives. I'm sure you've all used functions such as foreach, while, and until when programming code? Well, you can do something similar in SASS. I'll show you how, using the power of social media and @each as our example.