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.

Recommended for You

ES6 101 - Spread operator

ES6 101 - Spread Operator
Welcome to the fourth post in the ES6 101 series and the topic of discussion today is the Spread operator or the dot dot dot operator.... It is not very common to call it the “dot dot dot” operator, but I just kind of like the ring to it! Also when you say “dot dot dot” it actually helps me visualize unpacking multiple gifts from a gift box. Wondering why I am taking about gifts and gift boxes and “dot dot dot”. Well, the spread operator... is actually more like unwrapping gifts from a gift box. The spread syntax allows an iterable such as an array expression to be expanded in-place. Let’s actually dive into some examples straight away. It is much more simpler that way!Examples of the ES6 Spread Operator ...Example #1Problem statement: Let’s write a function to display the sum of 3 numbers passed to it in an array.

We would have done this as follows in the old ES5 way. 😏var arr = [1,2,3]; functionsum(a,b,c) { var output = a + b + c; consol…

Diwali Wishes

Happy Diwali 2017
We are already on the brink of the new year and the festival of lights is already here!May this festival of lights, bring joy, peace and prosperity to you and your loved ones! Wishing you a very happy Diwali and a prosperous new year!For your holiday family portraits and baby shoots I would recommend a really talented and professional photographer in the SF Bay Area. Her portfolio would speak for itself!Happy holidays and have a safe Diwali!

ES6 101 - Lexical Declarations - Const

ES6 101 - Lexical Declarations - Const

This is the third post in the ES6 101 Series and we will be looking at the ES6 lexical declartions keyword const. This is more of a continuation of the post on let, so I would highly recommend you to read that before you move forward. In case you feel like looking at const that too works! Go ahead and keep reading.As we saw in the post yesterday, variables created with the let keyword have limited scope and they live within the block, statement or the expression that they have been declared in. You cannot redeclare the let variables but these variables are mutable, i.e. theirs values can be changed and updated.As the name suggests, const helps you create variables that have a constant value! These variables are not mutable, which means, the value of these variables cannot be changed or updated. Let’s look at a few examples to understand this better.Examples using ES6 constconst pi = 3.14; console.log(pi); pi = ++pi; // Uncaught TypeEr…

ES6 Fat Arrow Functions

ES6 101 - Fat Arrow Functions

I attended a 2 day ReactJs 101 Training last week. Yes! towards the end of 2017 - React 101. That story is for another blog post, but I am happy I took this training. It opened my eyes to a lot of things that I have not been working on and made me realize that I was really falling behind the Javascript scene.

The main thing that I realized I was lacking was ES6. I know a couple of things, but am not using it on a regular basis. One statement by the trainer, especially hit me hard.

"ES6 has been around for over 2 years now (with babel). There is no reason for you to not use it! If you are not using it today, you are definitely missing the boat!"

So have now decided to start learning something everyday and post it. Share my learnings with the world and get some feedback, if anyone is willing to share some.

I am going to start with the Arrow Functions or as they are very commonly referred to as Fat Arrow Functions. Whenever someone refers to a Fat A…

ES6 101 - Lexical Declarations Let

ES6 Lexical Declarations - Let
This is the second post in the ES6 series and we will be covering a lexical declaration - ‘Let’ today. Before this we have looked into the ES6 Fat Arrow Functions. We looked at the syntax changes from ES5 to ES6, how return is implicit and how this works with the new Arrow syntax.Let’s now look at what let is. Simply put, let is the new var. Then what is the difference you ask! well, let’s look at right now. Whenever you see let in your code base, you should now consider the following thing.The scope of the variable declared with the let keyword is limited to the block, statement or expression that it is being used in. This differs from the var keyword, which defines variables globally or local to a function regardless of block scope.Let’s take a look at a few examples to see how var and let differ from each other.Examples using ES6 letlet does not attach anything to window 😍var a = 10; let b = 20; console.log(window.a); // 10console.log(window.b…