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 a pre-built mixin library (Should know)


Now, for those of you partial to a little whiskey (yes, Irish or Scottish – it doesn't matter), you might be sorely disappointed; Bourbon isn't just the name of a variety of whiskey, but it is also that of a pre-built SASS library you can freely use in your projects, in a similar way to Compass (of which we will see more, later in this book). Let's take a look at how we can use SASS to build up the CSS needed to create a sliding door demo. The inspiration for this is based on a tutorial published by SypreStudios, available at http://spyrestudios.com/demos/sliding-panel-fixed/

Getting ready

For this recipe, we're going to need a few things, along with our trusty text editor:

  • A copy of the Bourbon mixin library, which is available at http://bourbon.io/.

  • Two images – a plus sign and a cross; each should be about 20 px square in size. There are images available within the code download for this book, otherwise there will be images available for download online. For the purposes of this recipe, I will assume you've used the images provided in the code download for this book.

  • Some dummy text from the Lipsum generator available at http://www.lipsum.net – you will need three paragraphs' worth of content (two for the background and one for the panel).

How to do it...

  1. Let's make a start by installing the Bourbon mixin library. Bring up a command prompt and type in gem install bourbon:

  2. Once this has completed, type in bourbon install at the command prompt, which will create a number of files and folders in a folder called bourbon at the root of C:. These are required for Bourbon to be used correctly later in this recipe.

  3. In the bourbon folder we've just created, go ahead and add an additional folder called projects; we'll use this to store our SCSS files that use Bourbon. In the projects folder, add a subfolder called css – this will store our compiled CSS files.

  4. Okay, now that we have our basic workflow set up, let's start creating some code. Create a new folder and call it sliding door demo, then go ahead and add a new HTML document, saving it in this folder as slidingdoor.html.

  5. We now need to add the framework code for our sliding panel. Let's begin by adding in the following code to the <header> area of our HTML document:

    <title>Vertical Sliding Info Panel With jQuery</title>
      <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
      <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"> </script>
  6. Add in the following script immediately below the reference to jQuery:

        <script type="text/javascript">
        $(document).ready(function(){
          $(".trigger").click(function(){
            $(".panel").toggle("normal");
            $(this).toggleClass("active");
            return false;
          });
        });
        </script>
  7. You will have noticed a reference to style.css in the previous code. Go ahead and create a new document with that name. This is where our compiled styles will reside.

  8. Next, let's add in some dummy text immediately after the <body> tag, so that we have a valid page on which to host our sliding panel. This uses the dummy text generated from Lipsum.net:

    <div id="container">
      <h1>Vertical Sliding Info Panel With jQuery</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">9te get eros libero</a>. Fusce tempus quam sit amet erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis 9te get porta. Donec tincidunt gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis elit tincidunt arcu 9te ge egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.</p>
    </div>
  9. Now that we have the background text in place, let's go ahead and add in the text for our sliding panel. Add in the following code immediately after the closing <div> tag for <container>:

    <div class="panel">
      <h3>Sliding Panel</h3>
      <p>Here's our sliding panel/drawer made using jQuery with the toggle function and some CSS3 for the rounded corners</p>
      <p>Ut purus metus, fermentum vitae pulvinar vel, elementum eget nulla. Pellentesque posuere, enim ut dapibus vestibulum, leo nunc porttitor neque, sed pulvinar orci sem eleifend sapien. Nullam at odio nibh, eu pharetra ipsum. Pellentesque eget ante nec ante consequat ullamcorper a vitae mauris. Integer lacus lorem, sollicitudin vulputate posuere at, commodo a sapien. Vivamus lobortis vehicula imperdiet. Donec a congue tortor. Fusce augue tortor, pretium pharetra pellentesque ornare, laoreet nec sapien. Ut eget magna tellus. Pellentesque posuere accumsan condimentum.</p>
      <div style="clear:both;"></div>
    </div>
    <a class="trigger" href="#">infos</a>
  10. Okay, so the code is now in place – it looks a little untidy though, as it doesn't have any styling in place. We're going to fix this by creating our SASS styles. Create a new SCSS file and save it as style.scss in the projects folder which we created earlier.

  11. Let's now add in the styles, beginning with the reference to Bourbon and the two mixins:

    @import "bourbon/bourbon";
    
    @mixin demofont ($textcolor, $textsize, $textfamily) {
      font-family: $textfamily; font-weight: 700; color: $textcolor; font-size: $textsize; }
    
    @mixin linkdecor ($position, $bordercolor, $textstyling, $display) {
      position: $position; border: 1px solid $bordercolor;
      text-decoration: $textstyling; display: $display; }
  12. We next need to add in some basic styles for the page:

    body { @include demofont(#666, 14px, $georgia); background: #1a1a1a; text-align: left; width: 700px; font-size: 14px; margin: 0 auto; padding: 0; }
    a:focus { outline: none; }
    h1 { @include demofont(#9FC54E, 34px, $verdana); letter-spacing: -2px; padding: 20px 0 0; }
    h3 { @include demofont(#fff, 14px, $verdana); letter-spacing: -1px; text-transform: uppercase; margin: 0; padding: 8px 0 8px 0; }
    img { float: right; margin: 3px 3px 6px 8px;  padding: 5px; background: #222222; border: 1px solid #333333; }
    p { color: #cccccc;  line-height: 22px; padding: 0 0 10px;  margin: 20px 0 20px 0; }
  13. Next comes the styles for the main container on the page:

    #container { clear: both; margin: 0; padding: 0; }
    
    #container a { @include demofont(#fff, 16px, $verdana);
      @include border-radius(0px 20px 0px 20px); float: right; background: #9FC54E; border: 1px solid #9FC54E;
      text-decoration: none; letter-spacing: -1px;
      padding: 20px; margin: 20px;
    
      &:hover { @include demofont(#fff, 16px, $verdana);
        @include border-radius(0px 20px 0px 20px);
        float: right; background: #a0a0a0; border: 1px solid #cccccc; text-decoration: none; letter-spacing: 
        -1px; padding: 20px;
      }
    }
  14. We need to add in the styles for the slide-out panel. Add these in immediately below the #container style from the previous step:

    .panel {
      @include border-radius(0px 20px 20px 0px); position: absolute; top: 50px; left: 0; display: none; background: #000000; border: 1px solid #111111; width: 330px; height: auto; padding: 30px 30px 30px 130px; opacity: .85; filter: alpha(opacity=85); 
    
      p { margin: 0 0 15px 0; padding: 0; color: #cccccc; }
    }
  15. Finally here are the styles for the trigger:

    a.trigger {
      @include demofont(#fff, 16px, $verdana);
      @include border-radius(0px 20px 20px 0px);
      @include linkdecor(absolute, #444, none, block);
      top: 80px; left: 0; letter-spacing: -1px;
      padding: 20px 40px 20px 15px; background: #333333 url(images/plus.png) 85% 55% no-repeat;
    
      &:hover {
        @include demofont(#fff, 16px, $verdana);
        @include border-radius(0px 20px 0px 20px);
        @include linkdecor(absolute, #444, none, block);
        top: 80px; left: 0; letter-spacing: -1px; padding: 20px 40px 20px 20px; background: #222222 url(images/plus.png) 85% 55% no-repeat;
      }
    }
    
    a.active.trigger { background: #222222 url(images/minus.png) 85% 55% no-repeat; }
  16. Save your SCSS file. Then open up a command prompt as administrator, and enter the following command:

    sass --watch c:/bourbon/projects:./bourbon/projects/css -r ./bourbon/lib/bourbon.rb
  17. If the file has correctly compiled, then you will see a CSS file within your projects/css folder which we created earlier. Copy this over to your sliding door demo folder.

    Note

    You may see the following error when compiling the code, it can be ignored (only for the moment as I will explain more, later in the book):

    WARNING: border-radius mixin is deprecated and will be removed in the next major version release.
    on line 3 of C:/bourbon/css3/_border- radius.scss, in `border-radius'
    from line 39 of c:/bourbon/projects/style.scss
  18. Preview your work. If all is well, you should see something similar to the following screenshot, where the infos link has already been clicked, and the icon against it is replaced with a red cross:

How it works...

Phew - that was some recipe! Let's take a look at what we've achieved. Although it seems a lot of code, we've used jQuery to animate a div in and out, depending on whether the trigger [ ] icon has been clicked. The jQuery code in itself is very small; most of the work was in styling the page!

In the SCSS code, we've used a number of SASS features to help us style the code. Notice the @import call at the top of the code? This tells SASS to use the Bourbon library we installed earlier, and allows us to use the border-radius mixin. We then have two mixins – one for setting font styles, and another for styling some of the links. We've also used nesting on some of the styles, including using the & keyword to correctly include pseudo styles, such as :hover. We also have a border-radius mixin from the Bourbon library; remember the comment made earlier about the warning message you may have when compiling the code? While the code will still work, it is worth noting that vendor prefix support has changed since the Bourbon library was first written. Specific vendor entries for border-radius will be removed from the library as most browsers support border-radius by default.

The other important part of this recipe is in the compiling of the SCSS styles, which used the following command:

sass --watch c:/bourbon/projects:./bourbon/projects/css -r ./bourbon/lib/bourbon.rb

Note

As of version 3.01 of SASS, there is no need to pass the -r parameter when using –watch with Bourbon.

It may look a little confusing, but it breaks down into the following: it is using the Sass sass command to watch (–watch) a folder called c:\bourbon\projects, which will put compiled files into a subfolder called css, and to do that it requires (–r) the bourbon ruby file bourbon.rb. It's important to learn this, as it is very likely that you will need to use a similar command when including other pre-built mixin libraries in the future.

Now that we've begun to look at mixins, it's a good point to pause for a moment, and consider an important concept that would be wise for you to master when using SASS – developing your own style of writing mixins.