Sass is a mature, stable and powerful CSS extension language. Sass is compiled and cannot be used directly on a page. It can improve programming efficiency (for skilled users).

Sass needs to be compiled into CSS files if it wants to be applied in a project. Use the koala!

Sass files have two suffixes: one is called sass without braces and semicolons; The other is the SCSS file we use here, which is similar to the CSS file format we normally write, with braces and semicolons. All sass files in this tutorial refer to files with the suffix SCSS. It is also recommended to use a file with the suffix SCSS to avoid the strict formatting requirements of the sass suffix.

Reference links:

Sass Chinese Website: www.sass.hk/ Chinese document: sass.bootcss.com/

A, variables,

Variables can be defined in SASS and maintained uniformly. Sass defines variables starting with **$**

$fontStack:    Helvetica, sans-serif;
$primaryColor: # 333;

body {
  font-family: $fontStack;
  color: $primaryColor; } / / compiled into CSS style / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the body {the font-family, Helvetica, sans-serif. color:# 333;

Copy the code

Use of complex variables

//sass style//-------------------------------
$linkColor:         #08c #333 ! default; // The first value is the default value, and the second mouse-over value is a{
  color:nth($linkColor, 1); &:hover{ color:nth($linkColor, 2); } } //css style//-------------------------------a{
  color:#08c;
}
a:hover{
  color:# 333;
}

Copy the code

Second, the nesting

Sass can be nested with selectors, representing hierarchies and looking bigger and neat.

/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;
}
Copy the code

3. Mixin

Sass uses @mixin to declare mixing. You can pass parameters that start with a $sign, separate multiple parameters with commas, and give them default values. Declared @mixins are called via @include.

Mixins can be used in SASS to define snippets of code that can be passed as parameters for later invocation on demand. This handles CSS3 prefix compatibility easily and easily.

//sass style//-----------------------------------@mixin box-sizing ($sizing) {
    -webkit-box-sizing:$sizing;     
       -moz-box-sizing:$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;
}


Copy the code

4. Extend/inherit

Sass can implement code composition declarations via @extend to make code more concise.

//sass style//-----------------------------------.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: # 333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-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;
}
Copy the code

color

Sass integrates a large number of color functions to make changing colors much easier.

//sass style//-----------------------------------
$linkColor: #08c; a {
    text-decoration:none;
    color:$linkColor;
    &:hover{
      color:darken($linkColor, 10%); } } //css style//-----------------------------------a {
  text-decoration: none;
  color: #0088cc;
}
a:hover {
  color: # 006699;
}
Copy the code

Original author: Miss Qi Che; Technology blog: www.jianshu.com/u/05f416aef… After 90 front-end sister, love programming, love operation, love toss. Insist on summarizing the technical problems encountered in the work, insist on recording what you think and see in the work, welcome to discuss and exchange.