1. What is sass:
- Sass extends CSS3, adding features such as rules, variables, mixins, selectors, inheritance, and more. Sass generates well-formatted CSS code, which is easy to organize and maintain.
- SASS is an extension of CSS3 (cascading style sheet) syntax. It can use nesting, mixing, selector inheritance and other functions to write stylesheets more effectively and flexibly. Sass will finally compile legal CSS for browsing, which means that its syntax is not easy for browsers to recognize (although it is very similar to CSS syntax, almost the same), because it is not standard CSS Format, dynamic variables can be used inside its grammar, so it is more like a very simple dynamic language.
- The larger the project, the larger the css file, and the more repeated codes, which will become difficult to maintain. With the help of Sass, the efficiency of writing css can be improved.
2. Installation:
cmd opens the local command control window, enter the following string and press Enter to install it.
npm install -g sass
For more installation methods, please click Sass to go to the official website.
3. Compile the .scss file into a .css file:
Sass uses .scss as the file extension. It cannot be used directly in the <link> tag. It needs to be compiled into a .css file.
Demo:
- Create an html file and write an h1 tag at will:
- Create a file with .scss suffix, such as input.scss, and write some basic style sass syntax:
- Open the cmd command controller in the path where the html file is located, and enter:
sass input.scss ouput.css
It means to convert the name input.scss into a file named ouput.css (the name is free).
After pressing Enter, I found that I got the css file.
The content of the css file is as follows, you can see that the conversion is complete: the
next step is the old operation, just use the <link> tag to import the css file in the HTML.
- But it is impossible to say that one sentence of .scss is converted once. It is too troublesome, so it can be converted automatically. When I write a sentence in .scss, .css will automatically generate a sentence. Enter the following in cmd:
sass --watch input.scss:ouput.css
Indicates monitoring changes. When input.scss changes, output.css changes:
5. What if there are multiple css files in one html file? Then you can directly monitor the folder changes:
such as:
sass --watch yuan:bian
Means: When any file with the .scss suffix in the folder named yuan changes, it will be compiled into the folder named bian (the corresponding .css file will be automatically generated)
4. Basic usage and functions:
table of Contents:
1. Variables;
2. Nesting;
3. Mixin;
4. Inheritance;
5. Import;
6. Calculation;
7. Color function;
8. Interpolation;
9. If judgment;
10. For loop;
11. List loop;
12 . while loop;
13.function custom function;
…to be updated…
Detailed usage :
- Variable (after the variable is defined, it can be directly referenced in the selector): For
example: I define a variable named $yanse and the value is color rgb(223, 148, 148)
$yanse: rgb(223, 148, 148);
Reference directly in the selector:
h1{
color: $yanse；
}
Of course, variables can also be nested dolls. For example, I define a variable named $kuang, which refers to $yanse
$yanse: rgb(223, 148, 148);
$kuang: 1px solid $yanse;
Then also directly use:
h1{
border: $kuang;
}
- Nesting (child selectors can be nested in the parent selector)
such as: the following tags
<div>
<ul>
<li></li>
</ul>
</div>
You can write directly like this:
div{
height: 100px;
ul{
height: 80px;
li{
height: 50px;
}
}
}
Is equivalent to:
div {
height: 100px;
}
div ul {
height: 80px;
}
div ul li {
height: 50px;
}
If li has a pseudo-class selector: hover can be written like this (add &: hover{} inside):
div{
height: 100px;
ul{
height: 80px;
li{
height: 50px;
&:hover {
color: #000;
}
}
}
}
It is equivalent to writing:
div ul li:hover {
color: #000;
}
Not only selectors, but also properties can be nested, like this:
div{
height: 100px;
font: {
family: 'fangsong';
size: 20px;
weight: 700;
}
border: 1px solid red {
left: 0;
top: 0;
}
}
Is equivalent to:
div {
height: 100px;
font-family: "fangsong";
font-size: 20px;
font-weight: 700;
border: 1px solid red;
border-left: 0;
border-top: 0;
}
- Mixin (equivalent to pre-written a set of styles, directly quoted elsewhere):
Basic syntax:
@mixin 名字（参数1，参数2，...）
{
........样式.......
}
For example (without parameters, it can also be nested inside, a mixin named hunhe is defined below, and then called by (@include name) in the selector of div):
@mixin hunhe {
color: red;
a {
font-size: 12px;
}
}
div{
@include hunhe;
}
Is equivalent to:
div {
color: red;
}
div a {
font-size: 12px;
}
There are parameters (more flexible, the parameter is equivalent to the value you want, you must write $ in front of the parameter name, and the value position must be correct when calling):
Such as:
@mixin hunhe($one,$two) {
color: $one;
a {
color: $one;
font-size: $two;
}
}
div{
@include hunhe(red,15px);
}
*div can also be written like this, specify the parameter name, and the parameter position can be changed at will:
div{
@include hunhe($two:15px,$one:red);
}
The above is equivalent to:
div {
color: red;
}
div a {
color: red;
font-size: 15px;
}
- Inheritance/extension (a selector can inherit all styles of another selector)
such as: .two class inherits all styles of .one class ( @extend name ); not only .one, but also related to .one are inherited The details are as follows:
.one{
color: #000;
}
.one a{
font-size: 10px;
}
.two{
@extend .one;
background-color: #fff;
}
Is equivalent to:
.one, .two {
color: #000;
}
.one a, .two a {
font-size: 10px;
}
.two {
background-color: #fff;
}
- @import introduces a file with a .scss suffix as part of its own. The imported file will not be converted to .css format, so the file name should start with an underscore, such as: _base.scss. You don’t need to import it. Write underline.
Syntax: @import: "...path"; For
example:
create a file called _base.scss, write some selectors and styles in it, and then import it in a normal file such as one.scss, if the directory is of the same level :
@import: "base.scss";
In this way, .one.scss has all the contents in _base.scss.
- Calculation functions (SASS allows calculations to be used in the code) such as:
$chang: 20px;
body{
margin: (10px*2);
left: 20px + $chang;
}
Is equivalent to:
body {
margin: 20px;
left: 40px;
}
- Color function (SASS provides some built-in color functions to generate series of colors.)
hsl (hue, saturation, lightness);
body{
background-color: hsl(5, 20%, 20%);
}
Is equivalent to:
body {
background-color: #3d2b29;
}
hsl (hue, saturation, lightness, opacity);
body{
background-color: hsl(5, 20%, 20%,0.5);
}
Is equivalent to:
body {
background-color: rgba(61, 43, 41, 0.5);
}
Used to adjust the hue: adjust-hue (color, degree of adjustment);
body{
background-color: adjust-hue(hsl(0,100,50%), 100deg);
}
Is equivalent to:
body {
background-color: #55ff00;
}
Used to adjust the color brightness: lighten makes the color brighter, darken makes the color darker,
such as: lighten (color, increase the percentage of brightness);
body{
background-color: lighten(rgb(228, 145, 145),50%);
color: darken(rgb(228, 145, 145),50%);
}
Is equivalent to:
body {
background-color: white;
color: #5f1717;
}
Used to adjust the color purity saturate to make the color more pure, desaturate to make the color impure
saturate (color, percentage);
- Interpolation inserts a value into another value, the specific usage is as follows #{variable} such as:
$yanse: color;
body{
#{
$yanse}:red;
}
Is equivalent to:
body {
color: red;
}
- if judgment (the logic is similar to the C language):
syntax:
@if 判断条件 {
.......执行语句...
} @else {
...else有就写没就不写....
}
Such as:
$jia: false;
body{
@if false{
color: red;
}
@if 2>3 {
background-color: white;
}@else{
background-color: black;
}
}
Is equivalent to:
body {
background-color: black;
}
- for loop
syntax:
结束值不执行：
@for 变量 from 开始值 through 结束值 {
......
}
结束值也执行：
@for 变量 from 开始值 to 结束值 {
......
}
example:
@for $i from 1 to 3 {
.div#{
$i}{
height: $i*20px;
}
}
Is equivalent to:
.div1 {
height: 20px;
}
.div2 {
height: 40px;
}
- List loop , can loop through the values of a list, the list is equivalent to an array;
syntax:
@each 变量 in 列表{
...
}
example:
$yanse: red blue black;
@each $i in $yanse {
.div#{
$i}{
color: $i;
}
}
Is equivalent to:
.divred {
color: red;
}
.divblue {
color: blue;
}
.divblack {
color: black;
}
- While loop , there are judgment conditions more flexible.
grammar:
@while 条件 {
...
}
example:
$gao: 1;
@while $gao<4 {
.div#{
$gao}{
height: $gao*10px;
}
$gao : $gao+1;
}
Is equivalent to:
.div1 {
height: 10px;
}
.div2 {
height: 20px;
}
.div3 {
height: 30px;
}
13. Custom function function , function defined by yourself can be called;
syntax:
@function 名字(参数1，参数2，..){
....
}
example:
@function ziji ($bian)
{
@return $bian+10px;
}
div{
width: ziji(5px);
}
Is equivalent to:
div {
width: 15px;
}
to sum up:
Note: I will continue to add and update the content of this article~
If it helps, please like it~
Other articles:
responsive card hovering effect html+css
water wave loading animation html+css
navigation bar scrolling gradient effect html+css+js
book page turning html+css
3D stereo album html+css
colorful streamer button html+css
, etc. …