Tuesday, 2 December 2014

Variables, Nesting, Mixins, Partials and Placeholders in Sass.

Introduction

In the last post, we looked at the configuration settings of sass and how to compile a sass stylesheet in order to output a css stylesheet. In this post however we will start writing our first sass stylesheet. We will learn how to use variables, what nesting is all about, reusing code with mixins  partials among others. So buckle up and let the fun begin.


Using variables in sass.

In all main stream programming that are worth a dime, variables are some of the most commonly use concept. But what is a variable, you may ask? A variable is a temporary container which is used in storing a value during the execution of a portion of a program. It aides re-usability of the content of the variable so far that it is still in scope. Sorry if am using high sounding words that are over your head. What I meant is that before a variable can be used, it has to be available in memory so that codes being executed can access and make use of it. So to declare and use a variable in sass is simply easy just prefix the name of the variable with a dollar sign ($) and suffix it with a colon (:) then assign your value and end the statement with a semi-colon (;) like so: 

$primary: gray;

In the code above, we have declared a variable. To use the variable in our style just assign it in the default way in which a value is assigned in css like so:

.header{
   background-color: $primary;
}


Nesting of styles

In css, we can assess child element of a selector by separating the parent and child selector with space. In sass, this can be achieved by nesting of child styles within the parent style. An example is worth a thousand words in this scenario:

ul{
   margin: 0;
   padding: 0;

   li{
      list-style: none;
      display: inline-block;
      }li
}

Now we have nested the li style inside the ul above. When it is compiled, it will output the following:

ul{
   margin: 0;
   padding: 0;
}

ul li{
   list-style: none;
   display: inline-block;
}

Why this pattern  is better is because it reduces the number of codes which you have to write and that it gives more structure to your code making it more readable.


Understanding mixins

Mixins are a great way to reuse code in sass. Though functions and placeholders can be used in writing reusable code in sass (more on that in the future), mixins also is another way to reuse code and infact the most common way. Most of the compass stylesheet authoring framework codes was written in mixins. An example is given below:


//The declaration of mixin for media query
@mixin BorderRadius($top-left: 5px, $top-right: 5px, $bottom-left: 5px, $bottom-right: 5px){
   -webkit-border-radius: $top-left $top-right $bottom-left $bottom-right;
   -moz-border-radius: $top-left $top-right $bottom-left $bottom-right;
   -o-border-radius: $top-left $top-right $bottom-left $bottom-right;
   border-radius: $top-left $top-right $bottom-left $bottom-right;
}

In this code, we have created a cross browser mixin for the border-radius property (Note: Compass also has a border-radius mixin border-radius()). This mixin will aide in minimizing the number of code we have to write if say we have to use the border-radius property again in another block in the sass file. Let's put our mixin to use

.content{
 width: 80%;
 margin: 20px auto;
 background-color: #777;
 border: 1px solid #555;
 @include BorderRadius();
}

Notice in the above code that we did not specify any parameter in our mixin property. This is because when we declared our mixin function, we assigned to it default values which will be utilized in case we did not assign any value like in this case. Notice also that before calling the mixin function, we prefixed include keyword with the at (@). This is the norm as it tells sass to include the mixin called BorderRadius() in our content block. When compiled, the above style will output the following css.

.content{
     width: 80%;
     margin: 20px auto;
     background-color: #777;
     border: 1px solid #555;
   -webkit-border-radius: 5px 5px 5px 5px;
   -moz-border-radius: 5px 5px 5px 5px;
   -o-border-radius: 5px 5px 5px 5px;
   border-radius: 5px 5px 5px 5px;
}

Isn't it wonderful and cool.


Getting to Know Partials

Partials is a concept in sass used in dividing styles into different modules that will be assembled together when compiled. Not so long, css is usually written in a long monolithic block that defines the entire part of a page in one stylesheet. But with sass, you can separate your code into different files. This is very useful as it allows the developer to easily scan and locate different blocks in a file and to separate different parts of the stylesheet into related components. Another great advantage in using partials is that it allows code reuse as code written in one project can be reused in another thereby reducing the project development time. 

Making a partial file is fairly easy in sass, just prepend the name of the file with an underscore like so _partial.scss. To use the partial file, you have to import it into another file like so @import "partials/_partial.scss"; This code will then import and make the partial styles available for use in the file. When the file is compiled, the produced css will contain both the styles defined in the partial file and the one defined in the main file.



Making do with placeholders

When you want different parts of your document to share the same style in css, you list all the selectors for those parts separated by comma before assigning the block. This code sharing is accomplished in css by the use of a placeholder. A placeholder is just a css block. This means that any css block can serve as a placeholder in sass for example.

.left{
width: 20%;
float: left;
}

.display-left{
@extend .left;
font-size: .9em;
}


Here .left selector is serving as a code block and as a placeholder. When compiled, this will produce the following css


.left, .display-left{
   width: 20%;
   float: left;
}

.display-left{
   font-size: .9em;
}


But what if you just want the placeholder not to be outputted in the compiled css but to just hold a series of css properties that is shared between code blocks. Then instead of using a normal code block as your placeholder, prefix your placeholder name with a percentage symbol like so %side-content for example:

%side-content{
width: 20%;
display: inline-block;
}

.left{
@extend %side-content;
float: left;
}

.right{
@extend %side-content;
float: right;
}

When compiled, this will output the following css

.left, .right{
width: 20%;
display: inline-block;
}

.left{
float: left;
}

.right{
float: right;
}

One thing you will notice is that %side-content is no longer shown is the compiled css as it just served the purpose of a placeholder for us. Another thing  you will notice from the above codes is that a placeholder is referred to by using the extend keyword prefixed with the at (@) symbol followed by the name of the selector or placeholder.


Conclusion

We have looked at the various parts of the sass css preprocessor such as variables, nesting, mixins, partials and placeholders. We have seen that


  1. Variables are used in storing reusable css values
  2. Nesting are used in declaring css inheritance hierarchy.
  3. Mixins are used in writing reusable css code block
  4. Partials are used in separating the sass code into files of related components
  5. Placeholders are used in sharing code blocks or extending styles.
Happy sassing!




No comments:

Post a Comment