scss is an upgraded version of sass
It is a mature, stable, powerful css preprocessor, scss new syntax features sass3 version introduced;
scss file, less support Chinese, so: we have to write @charset "utf-8" at the beginning;
Way $ variable name declared variables;
Introducing scss files @import "scss file";
Functions: Algorithms (usage scenario: we can scss files, addition, subtraction)
Case:
@function p2r($width){
@return ($width/32)*1rem;
}
div{
width:p2r(100);
}
Note: sass comes to grammar or javascript syntax; use @;
:( style mixed usage scenario: many of the same style when in use, which we also use the function algorithm);
Keywords @mixin (define) @include (introduction)
Case:
@mixin bg($width,$height,$url){
width:p2r($width);
height:p2r($height);
background:url($url) no-repeat;
}
div{
@include bg(100,100,"01.png");
}
Nesting: a subversion of writing css
div{
// write here div style
p{
// write here p style
& Keywords: representatives p
}
& Keywords: representatives div
}
<div>
<p></p>
</div>
scss results after css editor:
div p{
}
es6 description:
and let the const keyword
Usage: to avoid polluting the global variables;
Therefore: {} in which the variable is valid;
Declare variables and constants Keywords:
Variables: let
Constants: const
Mainly =>
function
Case:
// ab parameter: parameter representative of => {} represents the statement is executed;
var f=(a,b) => {
console.log(a+b);
}
f(1,2)
class
Case:
class a{
a = "hello"; // attribute defined
Defined fn (a, b) {// Method
setTimeout(()=>{
console.log(this);
},1000)
}
}
var b = new a () // b representative of the object instance, must use his new constructor;
Call b.fn (1,2) method