Summary of new users of less sass and new users of lesssass

Summary of new users of less sass and new users of lesssass

Less is a CSS-based extension technology.
. Less uses a parser (such as koala) to convert the file format to CSS.
@ + Variable name + Value
Syntax
Variable
LESS allows developers to customize variables, which can be used in global styles. variables make style modification easier.
The following code describes how to use and use variables:
Listing 3 LESS files
@ Border-color: # b5bcc7;

. Mythemes tableBorder {
Border: 1px solid @ border-color;
}
The compiled CSS file is as follows:
Listing 4. CSS file
. Mythemes tableBorder {
Border: 1px solid # b5bcc7;
}
From the code above, we can see that variables are reused at the VALUE level, and the same values can be defined as variables for unified management.
This feature is suitable for defining themes. You can define general styles such as background color, font color, and border attributes in a unified manner, so that different themes only need to define different variable files. Of course, this feature also applies to css reset (resetting style sheets). In Web development, we often need to block the default style behavior of the browser and need to redefine the style sheet to overwrite the default behavior of the browser. here we can use the LESS variable feature, in this way, style sheets can be reused between different projects. We only need to assign values to variables in different project style sheets as needed.
Variables in LESS can be reused like other programming languages. They also have a life cycle, that is, Scope ), simply put, it is the concept of local variables or global variables. The order of variables to be searched is first found in the local definition. If the local definition cannot be found, the upper-level definition is searched until it is global. The following is a simple example to explain the Scope.
Listing 5. LESS files
@ Width: 20px;
# HomeDiv {
@ Width: 30px;
# CenterDiv {
Width: @ width; // The value of the width of the recently defined variable must be 30px.
}
}
# LeftDiv {
Width: @ width; // The width value of the variable defined above is 20px.

}
The compiled CSS file is as follows:
Listing 6. CSS file
# HomeDiv # centerDiv {
Width: 30px;
}
# LeftDiv {
Width: 20px;
}
Mixins)
The Mixins (mixed-in) function is no stranger to developers. Many dynamic languages support the Mixins (mixed-in) feature. It is an implementation of multi-inheritance. In LESS, mixing refers to introducing another defined CLASS in a CLASS, just like adding an attribute to the current CLASS.
Let's take a brief look at the use of Mixins in LESS:
Listing 7. LESS files
// Define a style Selector
. RoundedCorners (@ radius: 5px ){
-Moz-border-radius: @ radius;
-Webkit-border-radius: @ radius;
Border-radius: @ radius;
}
// Use it in another style Selector
# Header {
. RoundedCorners;
}
# Footer {
. RoundedCorners (10px );
}
The compiled CSS file is as follows:
Listing 8. CSS file
# Header {
-Moz-border-radius: 5px;
-Webkit-border-radius: 5px;
Border-radius: 5px;
}
# Footer {
-Moz-border-radius: 10px;
-Webkit-border-radius: 10px;
Border-radius: 10px;
}
From the code above, we can see that Mixins is actually a kind of nesting, which allows a class to be embedded into another class for use. The embedded class can also be called a variable. In short, mixins are actually rules-level multiplexing.
There is also a form of Mixins called Parametric Mixins (mixed parameters). LESS also supports this feature:
Listing 9. LESS files
// Define a style Selector
. BorderRadius (@ radius ){
-Moz-border-radius: @ radius;
-Webkit-border-radius: @ radius;
Border-radius: @ radius;
}
// Use the defined style Selector
# Header {
. BorderRadius (10px); // pass 10px as a parameter to the style Selector
}
. Btn {
. BorderRadius (3px); // pass 3px as a parameter to the style Selector

}
The compiled CSS file is as follows:
Listing 10. CSS file
# Header {
-Moz-border-radius: 10px;
-Webkit-border-radius: 10px;
Border-radius: 10px;
}
. Btn {
-Moz-border-radius: 3px;
-Webkit-border-radius: 3px;
Border-radius: 3px;
}
We can also define a default value for a Mixins parameter, as shown in figure
Listing 11. LESS files
. BorderRadius (@ radius: 5px ){
-Moz-border-radius: @ radius;
-Webkit-border-radius: @ radius;
Border-radius: @ radius;
}
. Btn {
. BorderRadius;
}
The compiled CSS file is as follows:
Listing 12. CSS file
. Btn {
-Moz-border-radius: 5px;
-Webkit-border-radius: 5px;
Border-radius: 5px;
}
Like arguments in JavaScript, Mixins also has such a variable: @ arguments. @ Arguments is a special parameter in Mixins. When Mixins reference this parameter, it indicates all variables. In many cases, this parameter can save a lot of code.
Listing 13. LESS files
. BoxShadow (@ x: 0, @ y: 0, @ blur: 1px, @ color: #000 ){
-Moz-box-shadow: @ arguments;
-Webkit-box-shadow: @ arguments;
Box-shadow: @ arguments;
}
# Header {
. BoxShadow (2px, 2px, 3px, # f36 );
}
The compiled CSS file is as follows:
Listing 14. CSS file
# Header {
-Moz-box-shadow: 2px 2px 3px # FF36;
-Webkit-box-shadow: 2px 2px 3px # FF36;
Box-shadow: 2px 2px 3px # FF36;
}
Mixins are one of the most important features of LESS. Here we have also written many examples to see if you have such a question: when we have a large number of selectors, in particular, how can we ensure the duplicate names between selectors during collaborative development? If you are a java programmer or C ++ programmer, I guess you will definitely think of Namespaces. LESS also uses the namespace method to avoid the problem of duplicate names, as a result, LESS expands on the basis of mixins. Let's look at the following code:
Listing 15. LESS files
# Mynamespace {
. Home {...}
. User {...}
}
In this way, we define a namespace named mynamespace. If we want to reuse the user selector, we only need to use it where the selector needs to be mixed in. # Mynamespace>. user.
Nested rules
When we write standard CSS and encounter Multi-Layer Element nesting, we either use the selector nested definition from the outside to the inside, you can either add a CLASS or ID to a specific element. In LESS, we can write as follows:
Listing 16. HTML snippets
<Div id = "home">
<Div id = "top"> top </div>
<Div id = "center">
<Div id = "left"> left </div>
<Div id = "right"> right </div>
</Div>
</Div>
Listing 17. LESS files
# Home {
Color: blue;
Width: 600px;
Height: 500px;
Border: outset;
# Top {
Border: outset;
Width: 90%;
}
# Center {
Border: outset;
Height: 300px;
Width: 90%;
# Left {
Border: outset;
Float: left;
Width: 40%;
}
# Right {
Border: outset;
Float: left;
Width: 40%;
}
}
}
The compiled CSS file is as follows:
Listing 18. CSS files
# Home {
Color: blue;
Width: 600px;
Height: 500px;
Border: outset;
}
# Home # top {
Border: outset;
Width: 90%;
}
# Home # center {
Border: outset;
Height: 300px;
Width: 90%;
}
# Home # center # left {
Border: outset;
Float: left;
Width: 40%;
}
# Home # center # right {
Border: outset;
Float: left;
Width: 40%;
}
From the code above, we can see that the LESS nested rules are written in the corresponding DOM structure in HTML, so that our style sheet writing is more concise and more readable. Meanwhile, nested rules make operations on pseudo elements more convenient.
Listing 19. LESS files
A {
Color: red;
Text-decoration: none;
&: Hover {// when there is &, the parsing is a pseudo class of the same element or this element. No & Parsing is a descendant Element
Color: black;
Text-decoration: underline;
}
}
The compiled CSS file is as follows:
Listing 20. CSS file
A {
Color: red;
Text-decoration: none;
}
A: hover {
Color: black;
Text-decoration: underline;
}
Operations and functions
Our CSS is filled with a large number of numeric values, such as color, padding, and margin. These values are related in some cases, so how can we use LESS to organize the relationship between our values? Let's look at this Code:
Listing 21. LESS files
@ Init: #111111;
@ Transition: @ init * 2;
. SwitchColor {
Color: @ transition;
}
The compiled CSS file is as follows:
Listing 22. CSS file
. SwitchColor {
Color: #222222;
}
In the above example, the LESS operation is a feature. In short, the addition, subtraction, multiplication, and Division operations are performed on numeric values (numbers, colors, variables, etc. In addition, LESS also provides a set of functions for color operations. The following is the function list for color operations provided by LESS:
Lighten (@ color, 10%); // return a color which is 10% * lighter * than @ color
Darken (@ color, 10%); // return a color which is 10% * darker * than @ color
Saturate (@ color, 10%); // return a color 10% * more * saturated than @ color
Desaturate (@ color, 10%); // return a color 10% * less * saturated than @ color
Fadein (@ color, 10%); // return a color 10% * less * transparent than @ color
Fadeout (@ color, 10%); // return a color 10% * more * transparent than @ color
Spin (@ color, 10); // return a color with a 10 degree larger in hue than @ color
Spin (@ color,-10); // return a color with a 10 degree smaller hue than @ color
PS: The Code cited from the less css official website, see the http://lesscss.org/#-color-functions for details
Using these functions is the same as using functions in JavaScript.
Listing 23 LESS files
Init: # f04615;
# Body {
Background-color: fadein (@ init, 10% );
}
The compiled CSS file is as follows:
Listing 24. CSS file
# Body {
Background-color: # f04615;
}
From the above example, we can find that this group of functions is very similar to functions in JavaScript, which can be called and passed parameters. The main function of these functions is to provide the color transformation function. First, the color is converted to the HSL color, and then operated on this basis. LESS also provides a way to obtain the color value, the following is not an example.
The LESS computation and function features are suitable for page component features, such as the progressive inbound and outbound feature during component switching.
Comments)
Proper annotations are necessary to ensure code readability. LESS also supports annotations in two ways: single-line and multi-line annotations, which are the same as the annotation methods in JavaScript, we will not describe it in detail here, but only emphasize that single-line comments (// single-line comments) In LESS cannot be displayed in the compiled CSS, therefore, if your annotations are for style descriptions, use multiline annotations.
LESS VS SASS
Similar frameworks include SASS and LESS, both of which belong to the CSS Preprocessor and feature similar to each other. They all write CSS in a way similar to a programming language, all have the features of variables, ing, nesting, inheritance, etc. The ultimate goal is to facilitate CSS writing and maintenance.
LESS and SASS promote mutual influence. In contrast, LESS is closer to CSS syntax.