SASS notes

1. Variables

SASS styles can use the "$" variable is defined, for reuse, such as a font or a color recycling, is defined as follows:

$my-color: #000f
body{
  color:$my-color;  
}

2. nested definitions css

body{
  color:$my-color;
  div{
       margin: 0;
       padding: 0;    
  }    
}

3. mixed

css, we often encounter the same statement to define styles, such as margin-top: 5px, border-radius: 3px, just called different pixels, so here @Mixin can be used to achieve code reuse, as follows:

@Mixin  border-radius($radius){
  border-radius:$radius;  
}

div{
　@include:border-radius(10px)
}

4. Inheritance

When we encounter several elements have several similarities of style, but it is somewhat different in a way, you can use inheritance solutions, as follows:

%message{
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
   font:14px;  
}

.message-warning{
  @extend  %message;
  color:orange;  
}

.message-warning{
  @extend  %message;
  color:red;  
}

.message-warning{
  @extend  %message;
  color:green;  
}

Here also have color, may utilize the above mixture (@Mixin) defines a

@Mixin color（$color）{
  color:$color;  
}

5. Operators

SASS provides a "+", "-", "*", "/", "%" and other operators, simple calculations can be done at the time of statistical pattern, as follows:

$width:140px;
$height:200px;

div{
  width:(900px - $width)/900*100% ;
  height:(500px - $height)/900*100%   
}

6.css expand

References the parent selector "&"

Use & represents the parent element selector, as follows:

a{
  color: red;
  &:hover{
    color:green
  }
  body.firefox & {
    font-weight: normal; 
  }
}

/*===== CSS =====*/
a {
  color: red;
}
a:hover {
  color:green
}
body.firefox a {
  font-weight: normal; 
}

Select parent element will replace & mention.

Nested properties

Nested property of object attributes that have the same namespace, such as, border-radius, border-bottom, border-top, font-size, font-weight, font-family, etc. These css style properties, these are the same prefix, so many times will seem redundant to write, so you can use the same set of nested namespace, as follows:

div {
   / * Note Setting a unified namespace need to add: * / 
  border: { 
   the RADIUS: 5px; 
   Color: Red; 
   bottom: 3px; 
 }   
} 
/ * compiled into CSS * / 
div { 
  border - the RADIUS: 5px; 
  border - Color: Red; 
  border - bottom: 3px; 
}