Article Directory
grammar
- The last article talked about how to compile sass files, and then talk about the syntax of sass
- Why is it so powerful and easy to use? It all depends on powerful grammar
.sassAnd.scsssyntax of the file is the same, but the difference is{}and;
Annotation
- Comments that will not be compiled when compiling
// 我是一个普通注释，在编译的时候，我就被过滤了
- Notes that will be compiled when compiling
/* 我在编译的时候，会被一起编译过去 */
- Powerful annotation
/*! 我是一个强力注释，不光编译的时候会被编译过去，将来压缩文件的时候也会存在 */
variable
$To define variables in sass :
$color:red;
$font_size:12px;
.header{
background-color: $color;
font-size:$font_size*2;
}
- Generally used to define colors or some commonly used pixel values
Nested
sassThe longest we use is nesting
h1 {
width: 100px;
div {
width: 200px;
}
}
// 编译结果
h1 {
width: 100px;
}
h1 div {
width: 200px;
}
- This is nesting, theoretically it can be nested infinitely
ul {
width: 100px;
li {
width: 90px;
div {
width: 80px;
p {
width: 70px;
span: {
color: red;
}
}
}
}
}
& In nesting
- In the nest there is an identifier
&that we can use
div {
width: 100px;
height: 100px;
:hover {
width: 200px;
}
}
// 我想的是 div 被鼠标悬停的时候 width 变成 200
// 但是编译结果却是
div {
width: 100px;
height: 100px;
}
div :hover {
// 注意这中间是有个空格的，并没有连在一起
width: 200px;
}
- This time is necessary to use
&to connect to the
div {
width: 100px;
height: 100px;
&:hover {
width: 200px;
}
}
// 编译结果
div {
width: 100px;
height: 100px;
}
div:hover {
// 现在才是连在一起的
width: 200px;
}
Group nesting
- Group nesting is the nesting of multiple tags at the same time
div {
width: 100px;
.box1, .box2, .box3 {
color: red;
}
}
// 编译结果
div {
width: 100px;
}
div .box1, div .box2, div .box3 {
color: red;
}
- Another is that multiple tags nest a tag at the same time
h1, h2, h3 {
width: 100px;
.box {
color: red;
}
}
// 编译结果
h1, h2, h3 {
width: 100px;
}
h1 .box, h2 .box, h3 .box {
color: red;
}
Nested attributes
- In
scsswhich there is a special nested called nested properties - Unlike selector nesting, it is used when writing attributes
div {
border: {
style: solid;
width: 10px;
color: pink;
}
}
// 编译结果
div {
border-style: solid;
border-width: 10px;
border-color: pink;
}
- This attribute nesting can also have some special uses
div {
border: 1px solid #333 {
bottom: none;
}
}
// 编译结果
div {
border: 1px solid #333;
border-bottom: none;
}
mixer
- In fact, it is to define a "function" and use it in the scss file
- grammar:
@mixin 函数名{函数代码}
// 定义一个混合器使用 @mixin 关键字
@mixin radius {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
- It will not be compiled, only when you use it, it will be compiled
- Calling syntax:
@include 函数名;
// 使用混合器使用 @include 关键字
div {
width: 100px;
height: 100px;
@include radius;
}
- Compilation result
div {
width: 100px;
height: 100px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
Mixer parameter
- The mixer is like a "function", so it must be able to pass parameters like a "function"
- The same way as "function" is used, it is "formal parameter" when timing, and "actual parameter" when calling
- grammar:
@mixin 函数名(形参){函数代码中可以使用形参}
// 定义混合器
@mixin my_transition($pro, $dur, $delay, $tim) {
-webkit-transition: $pro $dur $delay $tim;
-moz-transition: $pro $dur $delay $tim;
-ms-transition: $pro $dur $delay $tim;
-o-transition: $pro $dur $delay $tim;
transition: $pro $dur $delay $tim;
}
- Pass "actual parameters" when using this mixer
- Calling syntax:
@include 函数名(实参);
div {
width: 100px;
height: 100px;
@include my_transition(all, 1s, 0s, linear);
}
- Compilation result
div {
width: 100px;
height: 100px;
-webkit-transition: all 1s 0s linear;
-moz-transition: all 1s 0s linear;
-ms-transition: all 1s 0s linear;
-o-transition: all 1s 0s linear;
transition: all 1s 0s linear;
}
- How many "formal parameters" are written, then how many "actual parameters" must be passed when calling
Parameter default value
- When we define the mixer, we can also write some default values for some parameters, so that we don’t need to pass "actual parameters"
- grammar:
@moxin 函数名(形参:值){函数代码中可以使用形参}
// 设置一些带有默认值的参数
@mixin my_transition($dur: 1s, $pro: all, $delay: 0s, $tim: linear) {
-webkit-transition: $dur $pro $delay $tim;
-moz-transition: $dur $pro $delay $tim;
-ms-transition: $dur $pro $delay $tim;
-o-transition: $dur $pro $delay $tim;
transition: $dur $pro $delay $tim;
}
- When using, if you do not pass, then the default value is used
div {
width: 100px;
height: 100px;
// 使用的时候，只传递一个，剩下的使用默认值
@include my_transition(2s);
}
- Compilation result
div {
width: 100px;
height: 100px;
-webkit-transition: 2s all 0s linear;
-moz-transition: 2s all 0s linear;
-ms-transition: 2s all 0s linear;
-o-transition: 2s all 0s linear;
transition: 2s all 0s linear;
}
inherit
- When the following selector needs to use the style of the above selector, you can use inheritance to take it down and use it instead of writing it again:
- Inheritance syntax:
@extend 被继承的选择器;
.box1{
width: 100px;
height: 100px;
}
.box2{
@extend .box1;
border:1px solid #000;
}
- Compilation result:
.box1, .box2 {
width: 100px;
height: 100px;
}
.box2 {
border: 1px solid #000;
}
Import
Define variables and mixers in a file. When writing css, the file is messy, so usually variables and mixers are placed in separate files and imported through commands, so that the code in each file is of the same type
- Imported syntax:
@import "路径"; - Variable file: variable.scss
$orange:orange;
$red:red;
- Mixer file: mixin.scss
@mixin bor($style,$width,$color){
border:$style $width $color;
}
@mixin bac($path,$color,$repeat){
background:url($path) $color $repeat;
}
- Style file:
@import "./variable.scss";
@import "./mixin.scss";
.box{
@include bor(solid,1px,$red);
}
- Compiled css:
.box {
border: solid 1px red;
}