Less

Variables:

Variable syntax:
To use this method, add the variable name after the "@" and use the ":" link to compare the value there, as follows: @width: 100px;
{
    wdith: @width;
}
Copy the code
Scope of variables:
1If the same variable is defined twice, the last one defined in the current scope will be used.2If defined in a nested variable, then the variable can only serve attributes within the nested variable.3There is no order for variables. As long as there are variables in the page, they will be loaded as follows: @color: red;
div {
	color: @color;
    span {
        @color: blue;
        color: @color;
        @color: yellow;
    }
     @color: green;
}
// The final span color is yellow - @color: yellow;
Copy the code
String interpolation:
A variable can be an image@{value}The structure is as follows: @value:"baidu"; // Do not use quotation marks
div {
	background-image: url("http://www.@{value}.png");
}
Copy the code
Selector interpolation:
If you need to use it in a selectorLessVariable, just by using the same as the string plugin@{selector}Can be as follows: @div: div;
body @{div}{
    background: aqua;
}
Copy the code
Media Query as a variable
If you want to bemedia queryThe use ofLessVariables, you can use normal variables directly. Since the value after "~" is not compiled, it can be usedmedia queryThe parameters. As follows: @singleQuery: ~ "(max-width: 768px) ";div {
    background: red;
}
@media screen and @singleQuery {
    div {
        background: blue; }}Copy the code
Use the variable of a variable
Other variables used in defining variable values are as follows:@color-red: red;
@color: color-red;
div {
	color: @@color;
}
Copy the code

Mixing:

Inherited class name:
inLessIn, mixing can make a well definedclassAEasy to introduce to anotherclassBFrom simple implementationclassBinheritanceclassAAll attributes in:#color {
    color: red;
}
div {
    #color;
    width: 100px; } or.color {
    color: red;
}
div {
    .color;
    width: 100px;
}
Copy the code
Mixing with parameters:
inLessYou can also define a set of attributes with parameters like a function, and then call it in another selector as follows:#width(@width) {
    width: @width;
}
div {
    #width(200px);
    background: aqua; } or.width(@width) {
    width: @width;
}
div {
    .width(200px);
    background: aqua;
}
Copy the code
Hidden attribute inheritance:
You can define a set of properties with no arguments, if you want to hide the set of properties from exposureCSSIf you want to reference another set of attributes, you can do this:#color() {
    background: red;
}
.width() {
    width: 100px;
}
div {
    #color(a);.width(a);height: 100px;
}
Copy the code
Default values mixed:
We can also set default values for parameters like this. With default values, we can be called without setting properties#color(@color: red) {
    background: @color;
}
.width(@width: 100px) {
    width: @width;
}
div {
    #color(a);.width(a);height: 100px;
}
Copy the code
Multi-parameter mixing:
Multiple parameters can be separated by delimiters or commas. Semicolons are recommended because commas have two meanings: they can represent mixed parameters or a separator for a set of values within a parameter. As follows:#style(@color: red; @width: 100px) {
    background: @color;
}
div {
    #style(a);height: 100px;
}
Copy the code
! Important keyword
inCSSWhen writing, you often encounter the attribute value after the add! Important. And in theLessIn order to be convenient, set up! Key keyword mix method, call in the mix after add! Important keyword. As follows:#color {
    background: red;
    color: yellow;
}
.width() {
    width: 100px;
}
div {
    #color() !important;
    .width() !important;
    height: 100px;
}
Copy the code
Operator judgment:
Operators include: > >= = =< <.trueKeywords are uniquely judged to be true values as follows:.width(@width) when ((@width) > =100px) {
    width: 100px;
}
.width(@width) when ((@width) < 100px) {
    width: @width;
}
div {
    background: blue;
    height: 300px;
    .width(50px);
}
Copy the code
Multiple conditions:
Multiple conditions can be used directlyandThe commanotSegmentation:andDenotes and comma denotes ornotThe expression is reversed as follows:.width(@width) when ((@width) > 200px) {
    width: 300px;
    background: yellow;
}
.width(@width) when ((@width) > =100px)and((@width) < 200px) {
    width: 150px;
    background: red;
}
.width(@width) when ((@width) < 100px) {
    width: @width;
}
div {
    background: blue;
    height: 300px;
    .width(400px);
}
Copy the code
Nested syntax:
LessIs a dynamic language that belongs toCSSA preprocessing language.LessNesting is supported as with other preprocessing languages. As follows:body {
	background: blue;
    width: 100px;
    height: 100px;
    div {
        background: red;
        span {
			background: yellow; }}}Copy the code
& :
&Notation use: this can be used if you want to write concatenation selectors instead of descendant selectors&. This is especially useful for pseudo-classes such as::hoveror:focusAnd so on. As follows:div {
	background: red;
    width: 100px;
    height: 100px;
    &:hover {
        background: blue;
    }
    & ~ & {
    	color: green; }}Copy the code
Less loop:
Sample code:.loop(@count.@i: 1) when (@i < @count) {
    &:nth-of-type(@{i}) {
        @width: 100px * @i;
        width: @width;
    }
    .loop(@count.@i + 1);
}
div {
    background: aqua;
    height: 50px;
    .loop(6);
}
Copy the code

Sass

variable

Variable syntax:
Sass uses $conformance to identify variables (older versions of Sass used it! To identify variables) as follows:$width: 100px;
div {
    height: 50px;
    width: $width;
    background: aqua;
}
Copy the code
Nested syntax:
Repeating write selectors in CSS is annoying. If you want to write a bunch of styles that point to the same block on the page, you often need to write the same ID over and over again. In this case, Sass allows you to write only once and make the style more readable. As follows:body {
	background: aqua;
    div {
        background: red;
        span {
            background: yellow; }}}Copy the code
Parent selector identifier & :
One of the most common cases is when you write for elements like links:hoverThis pseudo-class, you don't want to connect later with a selector. So here's how:div {
    background: red;
    width: 100px;
    height: 100px;
    &:hover {
        background: yellow; }}Copy the code
Group selector nesting:
In CSS, if you need to select more than one tag and set the style, for example:div h1.div h2.div h3 {
    color: red; } At this point, you will find that there is some repetition. CSS is written so that you repeat the container selector for each group selector. Fortunately, the nesting features of Sass are also useful in this scenario. As follows:div {
    h1.h2.h3 {
        color: red; }}Copy the code
Import Sass file:
CSS has a particularly uncommon feature, namely@import; Rule, which allows you to import other CSS files in one CSS file. Then, the consequence is that there is only implementation@import; ", the browser will download additional CSS files, which will cause the page to load very slowly. Sass also have@import; But the difference is that Sass's@import; Rules import related files as they are generated, which means that the styles of all related files are summarized into the same CSS file without making additional download requests. As follows:/* File a */
{
    $width: 200px;
}
/* File 2 */
@import "File 1. SCSS";
div {
    width: $width;
    height: 100px;
    background: red;
}
Copy the code
Default values for variables:
Using Sass! The default tag does this. It looks a lot like the CSS properties! The opposite of the important tag. Default is used for a variable, meaning: if the variable is declared and assigned, is the declared value used otherwise the default value is used. As follows:$width: 100px! default;div {
    $width: 200px;
    width: $width;
    height: 200px;
    background: aqua;
}
Copy the code

mixer

Basic use of mixer:
Mixer use@mixin; Identifier definition. The usage is as follows:@mixin style{
    background: aqua;
    width: 100px;
}
div {
    @include style;
    height: 100px;
}
Copy the code
To pass parameters to the mixer:
Mixers do not always produce the same style. Can be accessed through@include; Pass parameters to the mixer to customize the exact style generated by the mixer. As follows:@mixin style($color.$width) {
    background: $color;
   	width: $width;
}
div {
    @include style(aqua, 100px);
    height: 100px;
}
Copy the code
Default values:
In order to@include; Instead of passing in all the parameters to the mixer, we can specify a default value for the parameters. As follows:@mixin style($color: aqua, $width: 200px) {
    background: $color;
   	width: $width;
}
div {
    @include style();
    height: 100px;
}
Copy the code

inheritance

Sass inheritance syntax:
The last major feature that reduces duplication when using Sass is selector inheritance. This through@extend; Syntax implementation, the following code:.style {
    background: red;
    width: 300px;
}
div {
    @extend .style;
    height: 100px;
}
Copy the code
Inherits something with %
Sometimes you want to inherit a class name, but you don't want to inherit a class nameHTMLTo simply write a class name that can be inherited, we can use placeholders to write inherited styles. For example: %style {background: red;
    width: 300px;
}
div {
    @extend %style;
    height: 100px;
}
Copy the code

Sass advanced usage

Conditional statement:
@if; Can be used to judge:@mixin style($color) {
    @if($color == red) {
        background: red;
        width: 100px;
    }
    @else if ($color == yellow) {
        background: yellow;
        width: 200px;
    }
    @else {
        background: $color;
        width: 300px; }}div {
	@include style(yellow);
    height: 100px;
}
Copy the code
Loop statement:
Sass supports the for loop as follows:div {
    height: 50px;
    background: aqua;
    @for $i from 1 to 5{&:nth-of-type(#{$i}) {
            width: $i * 100px; }}} also supports the while loop:div {
    height: 50px;
    background: aqua;
    $i: 5;
    @while $i > 0{&:nth-of-type(#{$i}) {
            width: $i * 100px;
        }
        $i: $i - 1; }}Copy the code