TEL: 07557 766735

Sass Tutorial: Variables And Basic Nesting

Sass Tutorial: Variables And Basic Nesting
27 /Jul / 2016

I’ve got an hours breathing space – time for a SASS tutorial! Are your CSS stylesheets getting unwieldy? Have you ever had to do a fiddly search and replace through a thousand lines, just to change the background colour of something in some specific places?

It might be time to move on and embrace the 21st century by learning SASS. More often than I like, I’ll come across a WordPress website that’s relatively simple on the surface but styled by CSS that’s a nightmare of unorganised information. Using the code inspector is the only possible way of pinpointing what’s controlling what and what is likely to trigger a mess of changes in descendant selectors.

SASS Tutorial: SASS Variables And Nesting

One of the first concepts any coder learns is the use of variables. No matter the language, the idea of a variable is to pass a value into a container, which can be called and manipulated. In this example, we’re not going to be manipulating it; the variable is set in one place and called within the SASS (scss syntax). Change the original variable and everything that uses that variable will be altered to the new value.

Any specific value that needs to be repeated, a good example being the base colour set of the website, can be stored in a variable and called from within a SASS statement. Don’t worry too much; at a basic level, SASS is merely CSS in syntax with a few cool throw-in’s that you can either use or ignore.

Naming your variables – save yourself the inevitable headache

Name your variables sensibly. $color-1 is meaningless to both someone else working on it and to you when you inevitably forget what this refers to. A better idea would be to define the color set that your site is going to be using: $primary-site-color, $secondary-site-color.

A quick guide to nesting in SASS

You’ll notice that in the SASS I’ve written here, I’ve nested and, to some extent, modularised the header section. It gives a self contained code block that (with its HTML) can be reused again and again, at the same time giving enough specificity to avoid conflicting with other elements in the DOM.

It’s worth reading this article on the inception rule – only nest as deep as is required and don’t get carried away, The inception rule states that you should ‘never go more than four levels deep’. This is sound advice; it quickly becomes unwieldy beyond belief and generates some of the most convoluted CSS possible.

Kicking off with some simple HTML:


<header>

<div class="headerContent">

<div class="headerLeft">

<h1>Big Header</h1>

     </div>


<div class="headerRight">


My Wicked Tagline

     </div>

  </div>

</header>

First up, we define our SASS variables; I like to define styling information such as colours separately and THEN pass them through to a variable. It makes fine tuning colour schemes on a granular level much easier with a quick glance when comparing in the web page. I’ve also dropped in a wildcard switch to the box-sizing model; personal preference and all that.


* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

// Main Site Colours
$darkRed: #8b0000;
$darkGrey: #333333;
$silver: #ccc;

// Define Variable Containers For Colours
$primary-site-color: $darkRed;
$secondary-site-color: $darkGrey;
$highlight-site-color: $silver;

// Universal variables
$container-padding:20px 40px 60px 40px;

This passes the defined colour variables to the main variables that control the colour scheme for the website.
Let’s go ahead and style up a (shockingly) simple header; it’s going to have two sections, left and right, each at 50%. The header itself will have a maximum width of 960px and is centered within its parent container.

header {
background: $secondary-site-color;
 
  .headerContent{
    width:960px;
    margin:0 auto;
    background: $primary-site-color;
    padding:$container-padding;
  
    .headerLeft{
      width:50%;
      float:left;
    }
       
    .headerRight{
      background: $secondary-site-color;
      width:50%;
      float:left;
    }
    
    h1, p{
      color:$highlight-site-color;
      margin:0em;
    }
       
    p{
      font-size:1.4em;
      padding:10px;
      text-align:center;
    }
       
  }
  
}

This gives you a neat, concise and visually precise way of discerning which descendants are being affected within the nest. It’s also a fantastic way of keeping your SASS modular. Naturally, the output when compiled is bog standard CSS; the difference is, you now have organisation and a potential codebase that can be reused over and over again.

Here’s the compiled CSS for your perusal:

h1, p {
margin: 0em;
}

* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

header {
background: #333333;
width: 100%;
}
header .headerContent {
width: 960px;
margin: 0 auto;
background: #8b0000;
padding: 20px 40px 60px 40px;
}
header .headerContent .headerLeft {
width: 50%;
float: left;
}
header .headerContent .headerRight {
background: #333333;
width: 50%;
float: left;
}
header .headerContent h1, header .headerContent p {
color: #ccc;
}
header .headerContent p {
font-size: 1.4em;
padding: 10px;
text-align: center;
}

If you’d like a play around with the code used in this SASS tutorial in an active environment, hop on over to this codepen I created

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInShare on TumblrShare on RedditEmail this to someone

Related Post

Make Your Stand....

Loading Facebook Comments ...

Sorry, but we’re currently not taking on new work at this moment in time. Please check back soon and we’re always available to give advice!