CSS preprocessing framework: LESS,SCSS

CSS Preprocessor: Less and sass: CSS Preprocessor is a language used to add some programming features to CSS, regardless of browser compatibility issues, such as you can use in CSS variables, simple program logic, functions, and so on are some of the basic techniques in programming languages that can make your CSS more See simplicity, more adaptability, more intuitive code, etc. many benefits.

Application of less framework:
Less a markup language, an HTML file or a link-generated CSS file
Comments:
Single-line Comment://compilation does not appear in a CSS file with the same name
Multiline Comment:/* * * * will appear in a CSS file with the same name after compilation

1. New Less file
2. Compile in the editor, you will see automatically generate a CSS file with the same name

Variable:
Less file
@border-color (@ variable name): White (variable value)
Table (selector) {
Border (attribute): 1px solid @border-color
}

the variables in less are the same as other programming languages, where values can be reused, and there is a life cycle, that is, the range of variables, which is simply a local variable or The concept of global variables, the order in which the variables are searched is first found in the local definition, and if not found, the parent definition is searched until the global.

Mixins (mixed)
It is an implementation of multiple inheritance, in less, which refers to the introduction of another defined class in one class, as in the current class . as a property. Text Styles are inherited

. Border{border:solid 5px Black}//Declare a style
. box{width:100px;height:100px;. Border

Application of the SASS framework:

Sass, with. Sass as the extension, syntax is indented, no semicolon, curly braces, inconvenient to use, and then improved to SCSS
SCSS is sass with the. scss extension, which is a sass improvement:
SCSS Syntax:
Variable:
Use the $+ variable name
after compiling a file with the end of the map, it is useless to generate a CSS file with the same name, and the HTML also links the CSS file default variables and normal variables: The default is after the value! Default

Mixed macros: When individual attributes need to be handled uniformly,
@mixin is the keyword used to declare a mixed macro, @include call a mixed macro @mixin variable name {}

@include variable Name
Take the parameter after the variable name plus ()
@extend keywords are used to inherit existing class styles quickly
The%placeholder placeholder, which appears in the CSS file when called, does not appear in the CSS when it is called:% variable name {... }, while the base class.
The variable name {} is always present in the CSS file once it is compiled

Summarize:

When should use the mixed macro @mixin, when should use inherits the @extend, when should use the placeholder%?

use of mixed macros: it does not automatically merge the same style code, if you call the same mixed macro in the style file, it will produce multiple corresponding style code, create into code redundancy. But he is not a nothing, he can pass parameters. If you have variables involved in your code block, it is recommended that you use a mixed macro to create the same code block.
inheritance: After using inheritance, the compiled CSS will be merged with the inherited blocks of code, by combining selectors, so that the compiled generation the code is clean and easy to read relative to the mixed macro. However, it cannot pass variable arguments. If your code block does not need to pass any variable arguments, and there is a base class that already exists in the file, then it is recommended to use inheritance.

Less
Single-line comment, you guess I will not be compiled
/* Multiline comment, you guess I will not be compiled */
@yhColor: Green;
@yhWidth: 100px;
@yhHeight: 200px;
. yhrad{
border-radius:10px;
}
The parentheses are called parameters.
. YhRad2 (@canshu) {
Border-radius: @canshu;
}

. p1,.p2,.p3,.p4{
Color: @yhColor;
}
. box1{
Width: @yhWidth;
Height: @yhWidth;
. Yhrad;
. yhRad2 (10px);
Background: @yhColor;
}

Nested notation, nested rules same as HTML

& Represents a previous layer selector
A
color:red;
Text-decoration:none;
&:hover {
Color:black;
Text-decoration:underline;
}
}

. box2{
Width: @yhHeight + 50;
Height: @yhHeight;
background:red;
}

-------------------------------------------------------

Scss
$yhColor: Red;
@mixin yhbr{
border-radius:10px;
}
@mixin YHBR2 ($wanwan) {
Border-radius: $wanwan;
}
. moren{
Outline:none;
padding:5px 10px;
}
%beitai{
font-family: "Microsoft Yahei";
}

. p1{
color: $yhColor;
}
. box1{
border:{
top:2px solid #ccc;
right:2px dashed #58a;
bottom:6px double #faa;
left:2px dotted pink;
}
}
. box2{
width:200px;
height:200px;
@include Yhbr;
}
. box3{
width:100px;
height:100px;
@include yhBr2 (50%);
}
. btn1{
@extend. Moren;
background: #fff;
color: #000;
}
. btn2{
@extend. Moren;
font-size:30px;
@extend%beitai;
}

CSS preprocessing framework: LESS,SCSS