Sunday, 7 December 2014

Making use of parent selectors, selector chaining and namespaces in sass.

Introduction

In the last post, we looked at nesting, mixins, placeholders, variables and partials. In this post we are going to continue from where we stopped by looking at the parent selector, selector chaining and the use of namespaces so chill and enjoy the ride.

Using parent selector

Though the use of parent selector is not what you will do most of the time in your day to day usage of the sass preprocessor framework, yet parent selectors can come in handy sometimes. So whats' a parent selector by the way? To answer this question, we will use an example, lets imagine that you are working on a project using a combination of Sass and Modernizr but you want to a particular style to be applied only when some class name exists (or not exist) in the in the root of the document (You that's where Modernizr adds all its classes) or some place higher up in the document tree. Yet you are deep within the document tree. So how do you apply your style only when this pre-condition is met? By using the parent selector. Correct!. Yes!!! (cheesy, I know). Let's see how it works with this example


Sass

.content{
   display: inline-block;
   position: relative;

   .half{
      background: #edac12;
      font-size: .85em;

      .gradient &{
         background: rgba(123, 34, 22, .6);
      }
   }
}


css

.content{
   display: inline-block;
   position: relative;
}


.content .half{
   background: #edac12;
   font-size: .85em;
}

.gradient .content half{
   background: rgba(123, 34, 22, .6);
}

Now if you look at the sass part of the code, you will notice in the third block where we used .gradient &, that's the parent selector in action.Notice also that in the third block of the Css code produced that it made the class name that came before the ampersand (&) the first selector. So in essence the style will be only applied when this class exist as a parent in the document hierarchy.


Chaining

Chaining is a concept is usually used in Css (most often misused). It is process of identifying a particular element in the DOM with multiple selectors. Am I sounding like your physics teacher, sorry about that. Sometimes multiple selectors is needed to select an element, (maybe when you want to come out of the inheritance hell that you dug yourself into) to do so, simply chain your selector with the ampersand (&) like so &#id-selector. For example

.main{
   display: block;

   &.side-content{
      padding: 10px;
      margin: 0;
   }
}

This css above will produce

.main{
display: block;
}

.main.side-content{
   padding: 10px;
   margin: 0;
}

Notice how .main and .side-content are chained together in the produced Css.


Using namespaces

To me namespace is among the coolest features in Sass. It allows one to shorten the number of codes he writes when writing Css key/value pair that belongs to one family. Before, if you wanted to use the long form in writing out the key/value pairs of properties such as font, you will write:

font-family: 'Open sans', verdana, sans-serif;
font-style: italic;
font-weight: 600;

But with sass namespace, you can write the same properties like this:

font:{
   family: 'Open sans', verdana, sans-serif;
   style: italic;
   weight: 600;
}

Isn't this cool. As you can see, because all the above properties belong to the font family, there is no need for the repetition anymore.


Conclusion

In this post, we have looked at some of the ways in which Sass can help out when authoring Css so as to produce efficient and when constructed Css. In the next post, we will take a look at some of the Compass and Sass color manipulation methods. Stay tuned!. Happy sassing!



No comments:

Post a Comment