Sass Mature, stable and powerful professional-grade CSS extension language

Sass 10-minute entry variable

Variables can be defined in sass to facilitate uniform modification and maintenance.

//sass style//-----------------------------------$fontStack:    Helvetica, sans-serif;$primaryColor: #333;body { font-family: $fontStack; color: $primaryColor;}

//css style//-----------------------------------body {  font-family: Helvetica, sans-serif; color: #333;}

Nesting

Sass can be nested in a selector, representing a hierarchical relationship that looks elegant and tidy.

 //sass style//----------------------------- ------nav {ul {margin: 0; padding: 0; list-style: none;} li {display: Inline-block;} a {display: block; padding: 6px 12PX; text-decoration: none;}          

//css style//-----------------------------------nav ul {  margin: 0; padding: 0; list-style: none;}nav li { display: inline-block;}nav a { display: block; padding: 6px 12px; text-decoration: none;}

Import

Sass in the import of other sass files, and finally compiled into a CSS file, better than the pure CSS@import

//sass style//-----------------------------------// _reset.scsshtml,body,ul,ol { margin: 0; padding: 0;}

 //sass style//----------------------------- ------//base.scss @import  ' reset '; body {font-size: 100% Helvetica, Sans-serif; background-color:  #efefef;}    

//css style//-----------------------------------html, body, ul, ol { margin: 0; padding: 0;}body { background-color: #efefef; font-size: 100% Helvetica, sans-serif;}

Mixin

Sass can be used to define some code snippets in Mixin, and to pass parameters to facilitate later calls based on requirements. This processing of CSS3 prefixes is easy and convenient.

 //sass style//----------------------------- ------@mixin Box-sizing ($sizing) {- Webkit-box-sizing: $sizing;-moz-box-sizing< Span class= "value" >: $sizing; box-sizing: $sizing;} .box-border{border:1px Solid  #ccc; @include box-sizing (Border-box);}    

//css style//-----------------------------------.box-border {  border: 1px solid #ccc; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

Extension/Inheritance

Sass can be used @extend to implement code combination declarations to make the code more elegant and concise.

Sass Style//-----------------------------------. message {Border1px solid  #ccc; padding: 10px; color:  #333;} .success {@extendborder-color: Green; .error {@extendborder-color: red;} .warning {@extendborder-color: yellow;}         

//css style//-----------------------------------.message, .success, .error, .warning { border: 1px solid #cccccc; padding: 10px; color: #333;}.success { border-color: green;}.error { border-color: red;}.warning { border-color: yellow;}

Operation

Sass can perform simple subtraction operations, etc.

//sass style//-----------------------------------.container { width: 100%; }article[role="main"] { float: left; width: 600px / 960px * 100%;}aside[role="complimentary"] { float: right; width: 300px / 960px * 100%;}

//css style//-----------------------------------.container {  width: 100%;}article[role="main"] { float: left; width: 62.5%;}aside[role="complimentary"] { float: right; width: 31.25%;}

Color

A large number of color functions are integrated in the sass, making it easier to transform colors.

 //sass style//----------------------------- ------$linkColor  #08c; text-decoration:none; color: $linkColor; &:hover{ color:d Arken ($linkColor, 10%);}}    

//css style//-----------------------------------a {  text-decoration: none; color: #0088cc;}a:hover { color: #006699;}


Reference:
http://www.w3cplus.com/sassguide/
https://www.sass.hk/
Http://www.haorooms.com/post/sass_css

Sass Mature, stable and powerful professional-grade CSS extension language