Use CSS of sass, less, stylus and the difference between the preprocessor

More detailed reference documentation difference: https://blog.csdn.net/pedrojuliet/article/details/72887490

Use variables:

　　sass: $ symbol definition using variables, such as: $ base_color: #efefef

　　 less: @ symbol definition using variables, such as: @base_font_size: 16px

　　Stylus: no setting of any variables (variables can not begin with @ symbol ), you can use the "=", and "space" or the variable ":", such as: base_font_color: red, borderwidth = 1px , borderColor #cacaca

 

Import operation (@import):

　　Such as:

base  css文件
/* file.{type} */
body {
  background: #000;
}


xxx css file
@ import "1.css";
@ import "file.{type}";
p {
  background: #092873;
}


result
@ import "1.css";
body {
  background: #000;
}
p {
  background: #092873;
}

 

Inheritance: When we need to define the same style as multiple elements, we can consider using inheritance practices

　　sass inheritance: Statement is achieved by a combination of the code @extend (stylus can also use this method inheritance)

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

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

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

　　less inheritance

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.success {
  .message;
  border-color: green;
}
.error {
  .message;
  border-color: red;
}

 

Mixed (Mixins): a bit like function or macro, when certain css often used in a plurality of elements may be defined in such a Mixin css is shared, then introduced into the can where necessary Mixin

　　sass syntax:

/ * Define a mixed syntax, accepts a variable, the default value 2px, optional * / 
@mixin ERR ($ borderWidth: 2px) { 
    border : $ borderWidth Solid #cacaca
    color: #cacaca
}

error-.Generic { 
    padding : 20px ; 
    margin : 4px ; 
    @include error (5px);   / * invoke grammar mixed, passing parameters to obtain a border: 5px Solid #cacaca * / 
}

　　stylus grammar

error(borderWidth= 2px) {
  border: borderWidth solid #F00;
  color: #F00;
} 
.Generic-error { 
  padding : 20px ; 
  margin : 4px ; / * invoke grammar mixed, passing parameters to obtain a border: 5px Solid cacaca # * /, 
  error ();
 }

 

　　

How can a non-stop burning heart, so exhausted disappeared in mediocrity