Skip to main content

SASS - Nesting the CSS

    To begin with SASS we need Ruby to be installed on our machine. To set up Ruby and SASS on your machine refer to the following steps.

    If you’re using OS X, you’ll already have Ruby installed. Windows users can install Ruby via Windows installer, and Linux users can install it via their package manager. Once you have Ruby installed, you can install Sass by running:
gem install sass

    To translate your Sass file into a CSS file, run
sass --watch style.scss:style.css

    Now whenever you change style.scss, Sass will automatically update style.css with the changes. Later on when you have several Sass files, you can also watch an entire directory:
sass --watch stylesheets/sass:stylesheets/compiled

    We don't need to do so many things to get up and running. We just need our good old friend jsFiddle. We will take a look at the various features of SASS today onward. Let's discuss the most basic and an important feature today - Nesting. In all I will be covering the following features in various posts on this blog.

  1. Nesting
  2. Parent References
  3. Variables
  4. Operations and Functions using variables
  5. Interpolation
  6. Mixins (You'll love this!)
  7. Arguments based Mixins (You'll thoroughly enjoy this!)
    Enough of the intro and the overview. Let's get our hands dirty, right? So here we are...Let's start with the nesting feature today.

    Often when writing CSS, you’ll have several selectors that all begin with the same thing. For example, you might have “#navbar ul”, “#navbar li”, and “#navbar li a”. It’s a pain to repeat the beginning over and over again, especially when it gets long. SASS allows you to avoid this by nesting the child selectors within the parent selector.

    Let's take a look at the example that follows to understand the nesting feature in further detail. Before that, let's understand what we are trying to achieve. We want to create what we see in the image below.


    Now that we are clear with what has to be the output,let's dive into the code.


    As you can see in the above fiddle, we have got what we wanted to create. Take a look at the HTML. What we have is a ul-li within a div with id="navbar" and then there is an anchor within the li. I have created the HTML in such a way so that we can come to appreciate the advantages of SASS's nesting feature.

    In the CSS tab, you will find SASS CSS and the commented regular CSS. The uncommented SASS CSS is where you can see that the CSS properties for ul, li and a are all nested within the "navbar"'s properties. If we hadn't used SASS, we would have to written CSS in our regular way which is commented in the example above. The SASS CSS when compiled results in our regular CSS only.

     Hope you have followed the post and now understand the nesting feature of SASS. SASS makes life easier where you have large amount of CSS to write or maintain. Hope you enjoyed the post and you can take a look at the Jquery Mobile and Google Maps API examples that I have posted on the blog. Stay tuned for more SASS examples.

Labels:

Comments

Post a Comment

Please leave your comments here...

Recommended for You

Google Map within an image

    Hope you'll enjoyed the last post describing how two maps can be placed side-by-side on the same webpage ! Most of you'll will enjoy today's code example too! All of you out there who work on Google Maps API, must have visited the API home page several times! You must have seen the map within the Google Nexus Phone frame there! It appears as though there is a map visible on the mobile screen! One of friend asked me the other day if I could implement that, and I did it and here is the code that I am sharing with you all!     I have used an I-Pad frame and am displaying a map centered at India within it! Here is the code!     The output of the above code is as seen in the result section above! The map that is appearing within the frame is not just an image but can be dragged like any other Google Map! Enjoy the code. It is very simple to understand!     In case you have any queries regarding the same, feel free to le...
Post a Comment
Read more

Retriving co-ordinates...

         We have seen 2 Google Maps API v3 examples wherein we have retrieved the latitude-longitude co-ordinates of the point of click on the map. In the first example we have displayed the co-ordinates in the information window and in the second , we have displayed the co-ordinates in a form in the information window.         Today we will create a code to retrieve the latitude longitude co-ordinates in a text box while simultaneously a marker appears on the map as well. So, here goes the code. <html> <head> <title> Google Maps API v3 - Adding marker on Click and retrieving the co-ordinates in a text box </title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var map;    //When using event as a parameter to a function declare map, strictly as a global variable fun...
5 comments
Read more

What do you do with Google Maps API...?

            By now we definitely know that Google Maps API stands out amongst other applications in creating interactive world maps. There are a couple of others which may be static, 2D or even 3D, etc, but Google maps have unique and distinctive features that make experienced webmasters prefer them over others.             Besides, being a great way to locate and navigate to places, Google maps API also provides many area and length measurement functions. These APIs’ allow for the development of web applications like measure distances and land features online with the Google maps embedded in them.             The Google Maps API has been considerably the most popular mapping API in the world. The Google Maps API delivers the standard interactive, easy-to-use features which are beneficial for your business. Google Maps A...
Post a Comment
Read more

Google Street View Image API

    Street View is one of most used feature of the Google Maps and why not? You can actually see any part of the world as if you are visiting the place at that very moment. And now with the Google Street View Image API, you don't even need to carry a camera with you to the places you visit. You can take-in all the scenic beauty without even bothering about clicking a single picture. You can come back from your vacation and get a few images using the Google Street View Image API and show those images to your friends and relatives. Create an album of high definition images and go ahead and share it on Facebook for your friends to have a look.     Using the Google Street View Image API is very simple and anybody can make use of it without any programming knowledge required. I will walk you through the entire process of effectively using the Google Street View Image API. So if you are set, let's go on an amazing ride across the globe with the Google Street Views. ...
1 comment
Read more

Two maps on the same page - Side-by-side

    How good I am feeling to post a code example after such a long time! It's been all "news" over the past so many posts! Well now that I am finally doing a code example, I am posting a very highly requested code sample. Placing two Google Maps on the same page (Now that's simple you would say!), but side by side. Now this is the thing that most people struggle with. Well, implementing the second part is also very simple, as you will see in today's code.     Let's see the code. Here it is!     The output of the above code will be as seen in the result section above.     As most of you will realize, there are two maps, one centered at "Pune" and other at "Noida". Why I chose these two locations? Well, just like that!...The main issue of concern is how the maps appeared side-by-side and not one below the other as would be normal behavior of two "div" elements used in the same page. Now here is the trick! Check out the...
10 comments
Read more