[Sass] Level 1: Foundation

Comments: 

//There comments will not be output to the compiled css file

/*This comment will*/

 

@Import:

• The css @import rule has been avoided: prevents parallel downloading.
• $import with .scss or .sass happens during compile rather than client-side.
• File extension is optional.

If there is a file called button.scss. When in out application.scss

@import "buttons";

The button.scss file also will be included into the application.css file.

 

But if we name buttons.css as

　　_button.scss

Then application.css will not include it.

 

Nesting tag:

 

 

 

Nesting proporty:

 

 

Before Parent Selector:

 

 

The difference between:

.content  .callout   //callout is nested in content class

&&

.content.callout    //only taking effect when both existing

.content .callout{
  border-color: red;
}

.content.callout{
  border-color: green;
}

 

 

After parent selector:

.sidebar{
  float: right;
  width: 300px;

    .users &{
        width: 400px;
    }
}

 

• Nesting is easy, but dangerous
• Do not nest unnecessarily

Assembly Tip

Try limiting your nesting to 3 or 4 levels and consider refactoring anything deeper.!