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 vendor prefixes and Compass (Become an expert)


As previously mentioned, Compass is a real swiss-army knife of a library, in that it contains all kinds of functionality that you can use. In this recipe, we're going to look at how you can use Compass to automatically include the relevant vendor prefixes, using a simple example of styling three buttons in a simulated form.

Getting ready

For this recipe, all we need is our text editor and Scout (there is a reason for using this, which I will explain later). I will assume you are using Sublime Text 2, which we installed earlier in this book. You will need to have the hex values for three colors to hand – you may already have some in mind, but if not, you can use an online site such as http://www.colorhexa.com/ to choose the hex codes for three colors.

How to do it...

  1. We need to store our project somewhere, so let's create our workspace. Open up a command prompt and type the following command:

    compass create vendor --bare --sass-dir "sass" --css-dir "css" --javascripts-dir "javascripts" --images-dir "images"
  2. This gives us a confirmation message that our project has been created. To confirm, open up Windows Explorer, and look for your vendor folder which is at the root of C::

  3. Let's now go ahead and create the template file – open Sublime Text 2 and add the following code to a copy of the template from the beginning of the book, and then save it as vendorprefixes.html:

    <body>
      <form action="demo_form.php">
        Username: <input type="text" name="username" />
        <input type="submit" value="Submit" class="redbutton"/>
      </form>
      <p>
        <form action="demo_form.php">
          Username: <input type="text" name="username" />
          <input type="submit" value="Submit" class="rbbutton"/>
        </form>
      <p>
      <form action="demo_form.php">
        Username: <input type="text" name="username" />
        <input type="submit" value="Submit" class="grbutton"/>
      </form>
    </body>
  4. You'll also need to add this to the <head> section, so we can incorporate the compiled styles:

      <head>
      <link href='http://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'>
      <link rel="stylesheet" type="text/css" href="css/vendorprefixes.css">
    </head>
  5. We now need to provide the styles for the buttons. There's a good chunk of code required for this, so we'll go through it block by block, beginning with two source mixins:

    @import "compass";
    
    @mixin gradient($first, $second) { background: $second;
      background: -webkit-gradient(linear, left top, left bottom, from($first), to($second)); background: -moz- linear-gradient(top, $first, $second); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$first', endColorstr='$second');
    }
  6. We now need to add in the mixin that will do the real work – this is the base for each button:

    @mixin button_base {
      @include border-radius(.5em);
      @include box-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
      display: inline-block; zoom: 1; *display: inline;
      vertical-align: baseline; margin: 0 2px; outline: none; cursor: pointer; text-align: center;
      text-decoration: none; font: 14px 'Cookie', Arial, Helvetica; padding: .5em 2em .55em; text-shadow: 0 1px   1px rgba(0,0,0,.3); font-size: 20px; padding: .20em 1.0em .20em;
      &:hover { text-decoration: underline; }
      &:active { position: relative; top: 1px; }
    }
  7. This next mixin controls the styling and color to be used, as well as styles for hovering and marking the button as an active link:

    @mixin defined_color ($color1) {
      color: lighten($color1, 10%); border: solid 1px darken($color1, 27%); background: darken($color1, 13%); @include gradient(darken($color1, 48%), darken($color1, 24%));
      &:hover { background: darken($color1, 24%);
      @include gradient(darken($color1, 27%), darken($color1, 17%)); }
      &:active { color: darken($color1, 34%);
      @include gradient(darken($color1, 24%), darken($color1, 4%)); }
    }
  8. Now that we have defined our button styles, we need to pull all of the mixins together, so we can style each button accordingly:

    input.redbutton { @include button_base; @include defined_color(#fae7e9); }
    
    input.rbbutton { @include button_base; @include defined_color(#BC8F8F); }
    
    input.grbutton { @include button_base; @include defined_color(#DAA520); }
  9. Save your work and preview it in a browser. If all is well, you should see something like the following screenshot:

How it works...

The key to how this recipe works lies in how we've split off styles for each button into two parts – the base style, and the décor that defines each button's individual color. Think of it as baking a cake – the base style is the sponge layer, which will be the same throughout. We're making each resulting end style individual by adding different icing (or in this case, colors) on top.

To achieve this, we've used two mixins from the Compass library, border-radius and box-shadow. SASS then replaces each call for each mixin with the appropriate code from the Compass mixin library, during compilation:

input.redbutton {
  -webkit-border-radius: 0.5em;
  -moz-border-radius: 0.5em;
  -ms-border-radius: 0.5em;
  -o-border-radius: 0.5em;
  border-radius: 0.5em;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  display: inline-block;
  zoom: 1;
  *display: inline;
  vertical-align: baseline;
  margin: 0 2px;
  outline: none;

When designing this tutorial, I was tempted to use a third style from the Compass library, linear-gradient. However, I wasn't happy with how it worked, as it didn't appear to like using the darken() functions as part of the library call, and I didn't want to have to add a number of additional variables to get around this. I added my own version instead, it does serve to highlight that while there are lots of mixins available online, they won't necessarily fit your needs. Sometimes it is better to write your own!

Let's move on and turn our attention to using Compass to build another piece of functionality that is very popular – the ubiquitous slider that you will have seen on dozens of sites around the Internet.