Sass basic common guide and sass Guide

Sass basic common guide and sass Guide

I. Variables

$global-color:red;.nav{  background:$global-color;  }

II. the horizontal bars and underscores are not distinguished during sass naming.

$global-color:yellow;.nav{  background-color:$global_color  }.footer{  background-color:$global-color}

3. variables can be applied

$global-color:red;$global-border:1px solid $global-color;.nav{  backhround:$global-color; border:$global-border;    }

Iv. nesting rules

#head{  .nav{    background:red;     .logo{      float:left;    }  }  p{    color:red   }}

V. Pseudo-classes and direct calling of parent-level symbols &

#head{  a{    color:biue;    &:hover{      color:red    }        }}

Vi. sass Import

@import "header";.main{  color:red;}@import "fotter";

VII. nested Import

@import "header";.main{  color:red;  @import "main";}@import "fotter";

8. Comments

The following comments will be compiled/** time: * auther: liumingwang **/The following comments will not be compiled // color silent comments

9. Default Variables

@ Import "header"; $ color: red! Default; // here is the default variable. If there is a variable in "header", it is used in the header. If there is no variable in the header, the default variable on this page is used. head {color: $ color ;}

10. mixin for Mixer

@mixin border-radius{ -moz-border-radius:5px; -webkit-border-radius:5px; -o-border-radius:5px; -ms-border-radius:5px; border-radius:5px;}.header{  &-nav{    @include border-radius;  }}

11. mixin parameters of the mixer

@mixin links-color($nomal,$hover,$visited,$active){  color:$nomal;  &:hover{   color:$hover;  }  &:visited{    color:$visited  }  &:active{    color:$active  }}.header{  @include links-color(red,blue,green,yellow)}

12. Inheritance

.center{  margin:0 auto;}.main{  @extend .center}