Conditional styles- Chapter 6

This will be quite handy when we are in a responsive web development project wherein, if we need to tweak the style based on devices, whether it is a tablet or a mobile, or show/hide certain components, we can make use of this.

Especially, if we are using, jQuery to attach certain classes or IDs dynamically, we can target them as well.

Eg: If the body has an ID called green, make the button green. ( may be for a mobile )
If the body has an ID called blue, make the button blue ( may be for a tablet )
Else, if no ids are attached, let that be default red button and gets applied for desktop.

.btn {     
  font-family: Arial;
  color: #ffffff;
  font-size: 28px;
  padding: 10px 30px 10px 30px;
  text-decoration: none; 
  background-color: red; 
  
  /*Conditionally target element styles */
  body#green &{
    background-color: green;  
  }
  body#blue &{
    background-color: blue;  
  }  
}

Here, we dont have any IDs for the body.

If we apply an ID, see how the rest of the conditions get applied accordingly.

Couple it with your responsive logic, and you will feel the power of SASS! Boy we can write quite a dynamic style-sheet with this! Just like the McDonalds, "Am loving it...!"

Next time, if you need to show or hide selected areas or components based on the device, try this! Its becoming more clear as and we write. "For this element, if the body has an id of this, lets show, else hide.".. We are dictating things on a more declarative manner and your sass helps you write such logics with ease.