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)

Creating and using mixins (Must know)


Mixins – we've used a few of these in some of the exercises so far in this book, but, what are they and how do they work?

Mixins are probably the single most useful part of SASS. They allow you to build partial blocks of code, which you can literally mix-in (hence the name) as part of larger style sheets. The key benefit of using them is that they can help remove duplication of code, in much the same way as functions work. I will show you how they work in the next exercise, as part of styling the ubiquitous button.

Getting ready

All we'll need in this recipe is our trusty text editor. If you are using Sublime Text 2 (which I hope you are), you can use the SASS compiler that we hooked in from earlier in the book.

How to do it...

  1. Let's make a start by creating a new HTML document, adding the code template from the start of this book, and saving it as creatingmixins.html. You will need to update the CSS stylesheet link thus:

    <link rel="stylesheet" type="text/css" href="creatingmixins.css">
  2. Add the following in between the <body> tags:

    <body>
      <a href="#" class="buttonclass">my button</a>
    </body>
  3. We now need to add some styles, so create a new SCSS document, and save it as creatingmixins.scss. Add the following code, beginning with the three mixins:

    @mixin gradient($from, $to) {
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, $from), color-stop(1, $to));
      background: -moz-linear-gradient(center top, $from 5%, $to 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$from}', endColorstr='#{$to}');
    }
    
    @mixin rounded-corners($radius) {
      -webkit-border-radius: $radius;
      -moz-border-radius: $radius;
      border-radius: $radius;
    }
    
    @mixin box-shadow($top, $left, $blur, $spread, $color) {
      -webkit-box-shadow: inset $top $left $blur $spread $color;
      -moz-box-shadow: inset $top $left $blur $spread $color;
      box-shadow: inset $top $left $blur $spread $color;
    }
  4. Next comes the main style class for the button, so go ahead and add the following to your SCSS file:

    .buttonclass { @include gradient(#fe1a00, #ce0100);
      @include rounded-corners(6px);
      @include box-shadow(0px, 1px, 0px, 0px, #f29c93);
      background-color:#fe1a00; border:1px solid #d83526; 
      display:inline-block; color:#ffffff; font-family:arial;
      font-size:15px; font-weight:bold; padding:6px 24px;
      text-decoration:none; text-shadow:1px 1px 0px #b23e35;
    }

    We'll also include styles for hovering and making the button active:

    .classname:hover { @include gradient(#ce0100, #fe1a00);
      background-color:#ce0100; }
    
    .classname:active { position:relative; top:1px; }
  5. If all is well, you will see the following button when saving and previewing your work in a browser:

How it works...

Although at first glance it might seem a lot of code to style a button, but a closer look will reveal that most of the code comes from the three mixins that we've included. Mixins are blocks of code that can be imported into a new or existing CSS stylesheet, in much the same way as you might reuse programming code. SASS is clever enough to only compile in those styles that are being used by the HTML code to which they relate.

The key to understanding the previous code is in the @include keyword. When compiling, SASS will bring in the CSS styles from the mixin whenever it sees a mixin placeholder, as shown by the lines highlighted in the following code snippet:

.classname {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100));
  background: -moz-linear-gradient(center top, #fe1a00 5%, #ce0100 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: inset 0px 1px 0px 0px #f29c93;
  -moz-box-shadow: inset 0px 1px 0px 0px #f29c93;
  box-shadow: inset 0px 1px 0px 0px #f29c93;
  background-color: #fe1a00;
  border: 1px solid #d83526;
  display: inline-block;
  color: #ffffff;
  font-family: arial;
  font-size: 15px;
  font-weight: bold;
  padding: 6px 24px;
  text-decoration: none;
  text-shadow: 1px 1px 0px #b23e35; }


.classname:hover {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00));
  background: -moz-linear-gradient(center top, #ce0100 5%, #fe1a00 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00');
  background-color: #ce0100; }

.classname:active {
  position: relative;
  top: 1px; }

There's more...

"This is all good, but how is it going to be useful to me…?"… I hear you ask. The answer to that question is simple – in the three mixins you have the beginnings of a code library that can be reused within your projects as many times as you need, and that you can build up over time. SASS will only ever import styles that are referenced within the HTML, so there is no danger of code bloat. You can also separate your SCSS code into several documents; SCSS will import each and create one master document as part of compiling the code, thereby reducing the number of requests made to the server.

Taking the code we've used here further, you could include functions within the mixin (as we've covered in this book), to work out the right shades of color to use – all with the use of parameters as part of calling in the mixins. This should mean you only need to pass in one color.

Ah-ha! Perfect timing – it just so happens that the next exercise is about functions. Although we're going to play with some text, the same principles could easily apply to styling objects such as buttons. Let's take a look and see how functions work in SASS.

Tip

If you would like to see an example of what could be achieved with styling buttons using SASS, then take a look at http://jaredhardy.com/sassy-buttons/, there are some good examples there!