Getting Started with sass-Basic Features-basics

This article from the MU class network desertdeclaring VariablesThree parts: 1, declaring the variable's symbol "$" 2, variable name 3, assigning the value of the variable

$brand-primary:darken (#428bca, 6.5%)! Default #337ab7 $btn-primary-color: #fff!default; $btn-primary-bg: $brand-primary!default; $btn-primary-border:darken ($ BTN-PRIMARY-BG, 5%)! Default

After adding!default, the default variable overrides the default value: Re-declare the variable before the default variable

$baseLineHeight: 2; $baseLineHeight: 1.5!default;body {    line-height: $baseLineHeight;}

Post-compilation CSS:

Body {    line-height:2;}

Calling variables:

The "$ variable name" is on the line where you want to call it.

local variables and all variablesThere's nothing hard to understand, just look at the code.

{  color: $color; //Call global variable }  {  $color: red;  Define local variable  a {    color: $color;  Call local variable   }{  color: $color;  Call global variable }

Shadow of a global variable: Simply put, the name of the local variable is the same as the name of the global variable.    When do I declare a variable? 1, the value repeats at least two times, 2, the value may be updated at least once, 3, the value of all the changes are related to the variable (non-coincidental)NestingSelector NestingThere is such a structure

To select the a tag in the header, CSS:

{  color:red;}  {  color:green;}

Sass:

nav {  a{    color: red;     Header & {      color: green;    }   }}

Property NestingCSS Some properties are just suffixes, like prefixes, such as Margin-top/margin-bottom if the CSS is this:

{    border-top: 1px solid red;     border-bottom: 1px solid green;}

So sass can write this:

. Box {  border: {    top:1px solid red;     Bottom: 1px solid green;  } }

pseudo-Class nestingSame as property nesting, plus a & symbol.

. Clearfix {&:before,&:after {    content: "";     Display: table;  }  {    clear:both;     Overflow: hidden;  } }

Avoid nesting of selectors: two reasons, do not understand, will not write.

Mixed MacrosMixed macros are useful when you need to repeat a large number of stylesdeclaring mixed macrosmixed macro with no parametersUse "@mixin" to declare

@mixin Border-radius {    -webkit-border-radius: 5px;     Border-radius: 5px;}

Mixed macro with parameters

@mixin Border-radius ($radius: 5px) {    -webkit-border-radius: $radius;     Border-radius: $radius;}

Complex Mixed MacrosYou can write statements with logical relationships in curly braces.

@mixin Box-shadow ($shadow ...) {  @if length ($shadow) >= 1 {    @include prefixer (Box-shadow, $shadow);  } @else {    $shaow: 0 0 4px rgba (0,0,0,0.3);     @include prefixer (Box-shadow, $shadow);  } }

Box-shadow with multiple parameters, you can replace them with "...". When the value of the $shadow parameter is greater than or equal to 1 o'clock, it indicates that there are multiple shadow values, whereas the default parameter value of 0 0 4px Rgba (0,0,0,0.3) is called.Calling mixed macrosMatch a keyword "@include" to invoke such as calling the above mixed macro Border-radius:

{    @include Border-radius;}

parameters for mixed macrospass a parameter with no value

@mixin Border-radius ($radius) {  -webkit-border-radius: $radius;   Border-radius: $radius;}

Pass a parameter value to the mixed macro when calling:

. Box {  @include Border-radius (3px);}

To pass a parameter with a value

@mixin Border-radius ($radius: 3px) {  -webkit-border-radius: $radius;   Border-radius: $radius;}

The mixed macro "Border-radius" can be called directly when called

. BTN {  @include Border-radius;}

It is also possible to pass values to the parameters of the mixed macro at the time of invocation:

. Box {  @include Border-radius (50%);}

Pass multiple parameters

@mixin Center ($width, $height) {  width: $width;   height: $height;   position: absolute;   top: 50%;   Left: 50%;   margin-top: -($height)/2;   margin-left: -($width)/2;}

A special parameter "..." can be substituted with this parameter when there are too many parameters passed in the macro.

@mixin Box-shadow ($shadow ...) {  @if length ($shadows) >= 1 {    -webkit-box-shadow: $shadows;     Box-shadow: $shadows;  }  {    $shadows: 0 0 2px rgba (#000,.);     -webkit-box-shadow: $shadow;     box-shadow: $shadow;  } }

Lack of mixed macros

Generating redundant blocks of code

@mixin Border-radius {  -webkit-border-radius: 3px;   Border-radius: 3px;}  {  @include Border-radius;  Margin-bottom: 5px;}  {  @include Border-radius;}

The generated CSS

{  -webkit-border-radius: 3px;   Border-radius: 3px;   margin-bottom: 5px;}  {  -webkit-border-radius: 3px;   Border-radius: 3px;}

Extension/Inheritance

Add a "@extend" to it.

{  border: 1px solid #ccc;   padding: 6px 10px;   font-size: 14px;}  {  background-color: #f36;   Color: #fff;   @extend. btn;}  {  background-color: Orange;   Color: #fff;   @extend. btn;}

Post-compilation CSS

{  border: 1px solid #ccc;   padding: 6px 10px;   font-size: 14px;}  {  background-color: #f36;   Color: #fff;}  {  background-clor: Orange;   Color: #fff;}

Placeholder%placeholder

The code for the% declaration does not produce any code if it is not called by @extend.

{  margin-top: 5px;} %pt5 {  padding-top: 5px;}  {  @extend%mt5;  @extend%pt5;}  {  @extend%mt5;  span {    @extend%pt5;  } }

Post-compilation CSS:

{  margin-top: 5px;}  {  padding-top: 5px;}

The compiled code merges the same code with the placeholder for the @extend call.Mixed Macro | | inheritance | | placeholder? interpolated Values

{@each $prop in $properties {#{$prop}-#{$side}{@include set-value (top, 14px) ;}

Compile into CSS:

{    margin-top: 14px;     padding-top: 14px;}

Let's take another example (building a selector)

{    . #{$class}{ font-size: $small;}     . #{$class}{ font-size: $medium;}     . #{$class}{ font-size: $big;} } @include generate-sizes ("Header-text", 12px, 20px, 40px);

Compile into CSS:

{ font-size: 12px;}  { font-size: 20px;}  { font-size: 40px;}

Getting Started with sass-Basic Features-basics