CODEWITHSUNDEEP
csssass
stckpete
stckpete

Reputation: 571

sass nesting at 2 levels

I am converting a website using sass, nesting saves me from having to duplicate parent selectors (eg - sociialmedia, socialmedia li, sociallmedia img)

However, when the viewport is at mobile size, I need to change the styling of socialmedia img. Therefore I have create the code below:

my questions are:

1) Is this an efficient way to code (example 1), or is there a better method?

2) example 1 works , but is example 2 more efficient?

Example 1

 #socialmedia {
      float: right;

      li {
      float: left;
        }

     @include bp(mobile) {
     img {
        width:  1.1em;
        } 
      }
    }

Example 2

    #socialmedia {
      float: right;

      li {
      float: left;
        }
    }


     #socialmedia img  { 
     @include bp(mobile) {
        width:  1.1em;
      } 
}

Many thanks,

Upvotes: 0

Views: 216

Answers (1)

mjswensen
mjswensen

Reputation: 3124

It depends on what you mean by "efficient"—if you are referring to the efficiency of the compiled CSS code, both of your examples are equivalent; they both compile down to the same CSS.

If you are referring to developer efficiency, in my opinion the first example is more readable and maintainable (one of the nice features of Sass is the ability to nest media queries in context, which is what you are doing). Your example 1 is usually the approach I take.

So, in answer to your questions:

  1. This is a perfectly acceptable method.
  2. No.

Upvotes: 1

Related Questions