CSS preprocessor: To be compatible with browsers, redundant CSS code is removed, that is, simplified CSS code writing
PS: SCSS is an upgrade of SASS3.0. The main difference is that nesting is changed from indentation to curly braces
1. The file name extension is different
The sass extension is.scSS, the less extension is.less, and the stylus extension is.styl
2, declare variable symbols are different
The sass variable declaration symbol uses $, while the less variable declaration symbol uses @. The stylus has no restrictions on the variable name, which is separated from the value by colons, Spaces, and equals signs.
Such as:
Less:
@orange:#feb914;
header {
background-color:@orange;
}
Sass:
$orange:#feb914;
header {
background-color:$orange;
}
Stylus:
bgorange = #feb914;
header
background-color bgorange
3. Variable scope is different
First look in the local definition, if not found, then step up the search
PS:less All variables are calculated based on the last definition
Such as:
Less:
@size: 40px;
.content {
width: @size;
}
@size:60px;
.container {
width: @size;
}
Output:
.content {
width: 60px;
}
.container {
width: 60px;
}
Sass:
As above, output is:
.content {
width: 40px;
}
.container {
width: 60px;
}
Stylus is the same as Sass, that is, the calculation of a variable is based on the last definition of the variable
4. Introduce external CSS files
Sass:
If the file name begins with an underscore _, sass will consider it a reference file and will not compile it as a CSS file
@import
Such as:
/ / the source code
@import “_test1.scss”;
@import “_test2.scss”;
@import “_test3.scss”;
/ / the compiled
h1 {
font-size:17px;
}
h2 {
font-size:17px;
}
h3 {
font-size:17px;
}
Less: extended syntax
@import (keyword) “filename”;
keyword:
1), reference: use an external file to participate in compilation, but do not output its contents
Inline: Puts an imported file directly into an output file, but does not process the imported file
3) less: Treat the file as a less file regardless of its extension
4) CSS: Treat a file as a CSS file regardless of its extension
5), once: only enter the file once (deduplication), this is the default mode
5) Multiple: can import file multiple times
stylus:
Like sass, the custom @require directive can be used to de-duplicate imported files, which are compiled only once
5, nested
1), reference the parent selector flags: &, @at-root, /
less:
#sort {
margin-top: 24px;
ul {
margin-left: 8px;
line-height: 36px;
vertical-align: middle
}
}
input {
width: 80px;
&:-ms-input-placeholder {
font-size: 16px;
color: @white;
}
}
Compile as follows:
#sort {
margin-top:24px;
}
#sort ul {
margin-left: 8px;
line-height: 36px;
vertical-align:middle;
}
input {
width: 80px;
}
input:-ms-input-placeholder {
font-size: 16px;
color: @white;
}
2) Nesting of SASS attributes
.fakeshadow {
border: {
style: solid;
left: {
width: 4px;
color: #888;
}
right: {
width: 2px;
color: #ccc;
}
}
}
Compile as follows:
.fakeshadow {
border-style: solid;
border-left-width: 4px;
border-left-color: #888;
border-right-width: 2px;
border-right-color: #ccc;
}
6. Mixin
A section of CSS often needs to be used in more than one element, so mixins can be used
Less:
.my-mixin {
color: black;
}
.my-other-mixin() {
background: white;
}
.my-hover-mixin() {
&:hover {
border: 1px solid red;
}
}
.border-radius(@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
.class {
.my-mixin;
.my-other-mixin;
}
button {
.my-hover-mixin();
}
#header {
.border-radius(4px);
}
.button {
.border-radius;
}
Compile as follows:
.my-mixin {
color: black;
}
.class {
color: black;
background:white;
}
button:hover{
border:1px solid red;
}
#header {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.button {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}