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!



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!




Monday, 1 December 2014

A peek at the configuration settings of Sass and Compass.

Introduction

In the previous article, I introduced what sass and compass is all about, how it can be setup and how to create a new project. In this post, we are going to have a look at some of the settings in sass files and how to compile sass files in other to produce Css files. So buckle up and let the fun begin.


A look at config.rb

When a new compass project is created, compass will create a config file in the root directory of the project. This configuration file contains some of the settings that is used to control how the your css is produced and formatted. If you can remember in the last post, I showed you how you can create a sass project in the command line (terminal), using the code shown below:

compass create --bare --sass-dir "sass" --css-dir "css" --javascripts-dir "js" --fonts-dir "fonts" --images-dir "img"

Now if we run this code shown above, apart from creating the css and sass folders for you, it sass will  also assign your directory names to the settings as shown below. 



This settings serve to tell sass how to navigate around the your project directory.

Another setting that is also seen in sass is the output style setting. What this setting does is determine how your sass code  will be formatted when converted to css after compilation. 

# You can select your preferred output style here (can be overridden #via the command line):

# output_style = :expanded or :nested or :compact or :compressed

The setting is commented out, so to make use of it just un-comment (remove the hash bang in front) and choose one of the options provided.


Now if you select :expanded, sass will format your css just as a regular css with lots of spaces so as to aide readability as shown below

.header {
  margin: 0;
  width: 100%;
  padding: 10px;
  background: #b9394d;
}

.header h1 {
  line-height: 1.6;

}

Setting :nested on the other hand makes sass to nest your css code block, indenting it to give a visual cue that the block under is the child of the block above as shown below.


Notice that .header h1 is indented a little bit under .header in the picture shown above.


On the other hand, if you select :compact as your output style, sass will try to compact every code block in the style sheet into a single line as shown below.

.content { margin: 0; padding: 10px; font-family: Lato, raleway, helvetica, sans-serif; }


Finally if you select the last option (:compressed), sass will minify the css, removing all the spaces so as to reduce the file size and make the css unreadable.

.two-cols,.radial{text-align:justify;border:1px solid gray;padding:5px;-moz-column-count:2;-webkit-column-count:2;column-count:2;-moz-column-rule:1px solid #e6e6e6;-webkit-column-rule:1px solid #e6e6e6;column-rule:1px solid #e6e6e6;-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px;-moz-box-shadow:2px 2px 2px #737373;-webkit-box-shadow:2px 2px 2px #737373;box-shadow:2px 2px 2px #737373}

As you can see the style is now a jumbled mass of unreadable code.


Another major settings that is important in the config file is the relative_assets and the line_comments.


The relative_assets when turned on specify that assets such as images can be identified in the sass file using just their name and extension. On compilation, compass will then convert it to its full link. Remember when we were setting up our sass project we provided the image and font directories. Now Compass will use it to relatively link our assets appropriately in the css produced.


The line_comments on the other hand when turned on, will output a comment on each block in the css stylesheet pointing to the line in which the code block can be seen the sass code. It is advisable to turn on this setting when developing your app and to turn it off when deploying the application.

Compiling sass file into css

There are two major ways in which the sass file can be converted into a css file which the browser can consume, These are: the manual compile method and the automatic compile method.


The manual compile: This method is used to compile sass files into css by the developer at will. When using this method the developer will transform his sass files into css. If the developer does not run the compile method, the file will not be converted into css. It can be achieved by running this code in a command line pointing to the root directory of the sass project.

compass compile



The automatic compile: In this method, sass engine watches the core sass files for changes when saved and then automatically compiles the files into css. This is usually the most preferred method as the file is quickly and easily converted into css thereby saving time and improving performance. To let sass watch your files for changes on save, run the following code.

compass watch


Conclusion

In this article we looked at some of the settings present in sass, how to adjust the settings and how to convert sass files into css. Hope you have grabed one or two things to take away with you in this article. Happy sassing!