sass self-study 01

1. & character

a{
	color:#333	
}
a：hover{
	text-decoration:underline
	color:#f00
}

This piece of code written in sass can be written like this

a{
	color：#333；
	&：hover{
		text-decoration：nderline；
		color：#f00
	}
}

The & character expresses the parent element

Or to give another example, there are two parts that need to be .top

.container .top{
	border:1px #f2f2f2 solid;
}

.container .top-left{
	float:left;
	width:200px
}

can be written like this

.container{
	.top{
		border:1px #f2f2f2 solid;
		&-left{
			float：left；
			width：200px；
		}
	}
}

It can also be used nested like this

2. Nesting of similar attributes

a{
	color:#333;
	font-size:14px;
	font-famliy:san-serif:
	font-weight:bold;
}

can be written as

a{
	color：#333；
	font:{
		size：14px；
		family：sans-serif；
		weight：bold；
		
	}
}

3. The concept of variables

Write like this to create the object

：root{
	--color：#f00
}

body{
	--border-color：#f2f2f2;
}

Once you have it, you can var it where you need to use it

for example


p{
	color:var(--color);
	border-color:var(--border-color);
}

This p must be in the body, which is the feeling of the child tuning the father

Variables start with the dollar sign $ followed by the variable name.
The variable name does not start with a number and can contain letters, numbers, underscores, and dashes (connectors)
The writing method is the same as css: the variable name and the value are separated by a colon
Variables must be defined before use

There are global variables and local variables

Global variables can be used! Global to represent, can also be placed directly on the outermost

Mainly supports six data types

numbers 1,2,3,10px
string, quoted string, and unquoted string "foo", "bar", baz
can be color
Boolean value
empty null
array
maps, equivalent to the object object (key1: 10)

Add after the variable! default can set the default value, like this

$color:#666 !default

But this will only call the value if it is not defined

4. Connector

border-color and border_color are one thing, there will be coverage

5. @import import

In this case, the following situations will be imported as ordinary css, and no sass files will be imported

@import “public.css”     文件扩展名是.css
@import   "http://xxx.com/xxx"     文件名包含http：//开头
@import  url(public)     文件名是url（）
@import ‘landscape’ screen and （xxx）     包含media queries

6. Mixed instructions

When defining, first add the name with @mixin

When using it, use @include to add the name used when defining

Parameter pass processing is possible

For example, pass in a value called aitem

@mixin flex-align（$aitem）{
    -webkit-box-align:$aitem;
	-webkit-align-items:$aitem;
	-ms-flex-align:$aitem;
	align-items:$aitem

}

Then pass the parameters in when calling

.container{
    @includ flex-align(center)
}

The final compiled result is like this

.container{
	-webkit-box-align:center;
	-webkit-align-items:center;
	-ms-flex-align:center;
	align-items:center
}

It is even possible to compile with multiple parameters

like this

//定义块元素内边距
@mixin block-padding（$top,$right,$bottom,$left）{
	padding-top:$top;
	padding-right:$right;
	padding-bottom:$bottom;
	padding-left:$left;
}

.container{
	@include block-padding(10px,20px,30px,40px)
}

it's great

Then, we add a default value to the above (formal parameter), like this

@mixin block-padding（$top：0,$right：0,$bottom：0,$left：0）{
	padding-top:$top;
	padding-right:$right;
	padding-bottom:$bottom;
	padding-left:$left;
}

In this way, even if a few parameters are missing when calling below, there will be no problem.

Summarize

A mixin is a set of css declarations that can be reused
mixin helps to reduce duplication of code, just declare it once and introduce it in the file
Mixed instructions can contain all css rules, most sass rules, and even introduce variables through parameter functions to output diverse styles
It is recommended to add the default value when using parameters

When is this mixin used? It is often used, and it can be mixed in when it is necessary to operate flexibly according to the situation

7.sass inheritance instruction

For example, for a style like this, add @extend after the part

.alert{
	padding:15px;
}

.al-in{
	@extend .alert;
	border-color:#bce8f1;
}


.al-su{
	@extend .alert;
	border-color:"red"
}

At this time, these codes will be parsed as follows

.alert， .al-in， .al-su{
	padding:15px;
}

.al-in{
	border-color:#bce8f1;
}

Mixing can also be used, but the code will become more

In other words, these styles with extend are directly rendered together with the inherited style first, and then their own separate styles are rendered

8. Operators

relational operator

< > <= >=

Logical Operators

and or not

For example, the not here can be written like this

@ if not ($list)
	border-color: red;
}

That's all for now, the next issue will attach a video link to station b