1. Introduction
Less, sass, and scss are all css preprocessing languages
the difference:
1. After sass version 3.0 is scss
2. Sass does not have {} and; and has strict indentation specifications
3. The indentation specifications of scss and css are consistent
2. Simple test of East Scss for learning tools
1. Download the plugin East Scss directly in VScode, the address is as follows:
Easy Sass - Visual Studio Marketplace
2. The usage of scss and less is almost the same, simply test the effect
(1) Create a new learn-scss folder, and create a new index.html under learn-scss
(2) Create a new scss folder, and create a new test.scss in it
The East Scss plugin in vscode will automatically convert .scss files into .css files
(3) Import and use directly in the html file, open the browser to see the effect
3. Grammar of Scss
1. Use the same nesting syntax as less
(1) In the html file
<div class="test">
<div class="box">
Box
</div>
</div>
(2) In the .scss file
.test {
width: 200px;
height: 200px;
background-color: yellowgreen;
margin: 0 auto;
.box {
width: 100px;
height: 100px;
background-color: green;
text-align: center;
line-height: 100px;
margin: 0 auto;
transform: translateY(50%);
}
}
After the .scss file is converted into a css file
final effect
2. Use & to represent the parent selector
For example: the hover effect of a tag
(1) In the html file
<div class="test">
<div class="box">
<a href="">Click me</a>
</div>
</div>
(2) In the .scss file
.test {
width: 200px;
height: 200px;
background-color: yellowgreen;
margin: 0 auto;
.box {
width: 100px;
height: 100px;
background-color: green;
text-align: center;
line-height: 100px;
margin: 0 auto;
transform: translateY(50%);
a{
font-size: 25px;
&:hover{
color: red;
font-size: 16px;
}
}
}
}
3. $Define variables with symbols
4. Use mixins to achieve code reuse
Defined format:
@mixin name { code }
Applicable formats:
@include-name
Modify the previous style as follows:
$color:plum;
$border-width:400px;
@mixin box{
width: 100px;
height: 100px;
background-color: green;
}
.test {
width: $border-width;
height: 200px;
background-color: $color;
margin: 0 auto;
.box {
@include box;
text-align: center;
line-height: 100px;
margin: 0 auto;
transform: translateY(50%);
a{
font-size: 25px;
&:hover{
color: red;
font-size: 16px;
}
}
}
}
A .scss file is a module, multiple .scss files refer to each other, you can use variables in another .scss file