Recent novice summary about less sass

less is an extension technology based on CSS
.less converts the file format into CSS through a parser (such as koala)
@+variable name+value
Syntax
Variables
LESS allows developers to customize variables, and variables can be used in global styles Used in , variables make it easier to modify styles.
We can understand the use and function of variables from the following code:
List 3 LESS file
@border-color: #b5bcc7;

.mythemes tableBorder{
border : 1px solid @border-color;
}
The compiled CSS file is as follows:
List 4. CSS file
.mythemes tableBorder {
border: 1px solid #b5bcc7;
}
From above We can see from the code that variables are reused at the VALUE (value) level, and the same values ​​can be defined as variables for unified management.
This feature is suitable for defining themes. We can uniformly define regular styles such as background color, font color, and border attributes, so that different themes only need to define different variable files. Of course, this feature also applies to CSS RESET (reset style sheet). In web development, we often need to shield the browser's default style behavior and need to redefine the style sheet to override the browser's default behavior. Here you can use LESS Variable characteristics, so that style sheets can be reused between different projects. We only need to reassign variables in different project style sheets according to needs.
Variables in LESS can reuse values ​​just like other programming languages. It also has a life cycle, which is Scope (variable scope, developers usually call it scope). Simply put, it is a local variable or a global variable. The concept of searching for variables is to first search in the local definition. If it cannot be found, then search the superior definition until the global definition. Below we explain Scope through a simple example.
List 5. LESS file
@width : 20px;
#homeDiv {
@width : 30px;
#centerDiv{
width : @width;// The value of the recently defined variable width 30px should be taken here
}
}
#leftDiv {
width : @width; // The value of the variable width defined above should be 20px

}
The compiled CSS file is as follows:
List 6. CSS file
#homeDiv #centerDiv {
width: 30px;
}
#leftDiv {
width: 20px;
}
Mixins (mix in)
Mixins (mix in) ) function is not unfamiliar to developers. Many dynamic languages ​​support the Mixins feature, which is an implementation of multiple inheritance. In LESS, mixins refer to introducing another defined CLASS into one 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 file
// Define a style selector
.roundedCorners(@radius:5px) {
-moz-border-radius: @radius;
- webkit-border-radius: @radius;
border-radius: @radius;
}
// Use 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 above code we can see: Mixins are actually a kind of embedded Mixins, which allows one class to be embedded into another class. The embedded class can also be called a variable. To put it simply, Mixins are actually rule-level reuse.
Mixins also have a form called Parametric Mixins (mixing parameters), LESS also supports this feature:
Listing 9. LESS file
// Define a style selector
.borderRadius(@radius){
-moz-border-radius : @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
// Use defined style selector
#header {
.borderRadius(10px); // Put 10px Passed to the style selector as a parameter
}
.btn {
.borderRadius(3px);// // Pass 3px as a parameter to the style selector

}
经过编译生成的 CSS 文件如下：
清单 10. CSS 文件
#header {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.btn {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
我们还可以给 Mixins 的参数定义一人默认值，如
清单 11. LESS 文件
.borderRadius(@radius:5px){
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
.btn {
.borderRadius;
}
经过编译生成的 CSS 文件如下：
清单 12. CSS 文件
.btn {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
像 JavaScript 中 arguments一样，Mixins 也有这样一个变量：@arguments。@arguments 在 Mixins 中具是一个很特别的参数，当 Mixins 引用这个参数时，该参数表示所有的变量，很多情况下，这个参数可以省去你很多代码。
清单 13. LESS 文件
.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);
}
经过编译生成的 CSS 文件如下：
清单 14. CSS 文件
#header {
-moz-box-shadow: 2px 2px 3px #FF36;
-webkit-box-shadow: 2px 2px 3px #FF36;
box-shadow: 2px 2px 3px #FF36;
}
Mixins 是 LESS 中很重要的特性之一，这里也写了很多例子，看到这些例子你是否会有这样的疑问：当我们拥有了大量选择器的时候，特别是团队协同开发时，如何保证选择器之间重名问题？如果你是 java 程序员或 C++ 程序员，我猜你肯定会想到命名空间 Namespaces，LESS 也采用了命名空间的方法来避免重名问题，于是乎 LESS 在 mixins 的基础上扩展了一下，看下面这样一段代码：
清单 15. LESS 文件
#mynamespace {
.home {...}
.user {...}
}
这样我们就定义了一个名为 mynamespace 的命名空间，如果我们要复用 user 这个选择器的时候，我们只需要在需要混入这个选择器的地方这样使用就可以了。#mynamespace > .user。
嵌套的规则
在我们书写标准 CSS 的时候，遇到多层的元素嵌套这种情况时，我们要么采用从外到内的选择器嵌套定义，要么采用给特定元素加 CLASS 或 ID 的方式。在 LESS 中我们可以这样写：
清单 16. HTML 片段

top

left

right

清单 17. LESS 文件
#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%;
}
}
}
经过编译生成的 CSS 文件如下：
清单 18. CSS 文件
#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%;
}
从上面的代码中我们可以看出，LESS 的嵌套规则的写法是 HTML 中的 DOM 结构相对应的，这样使我们的样式表书写更加简洁和更好的可读性。同时，嵌套规则使得对伪元素的操作更为方便。
清单 19. LESS 文件
a {
color: red;
text-decoration: none;
&:hover {// 有 & 时解析的是同一个元素或此元素的伪类，没有 & 解析是后代元素
color: black;
text-decoration: underline;
}
}
经过编译生成的 CSS 文件如下：
清单 20. CSS 文件
a {
color: red;
text-decoration: none;
}
a:hover {
color: black;
text-decoration: underline;
}
运算及函数
在我们的 CSS 中充斥着大量的数值型的 value，比如 color、padding、margin 等，这些数值之间在某些情况下是有着一定关系的，那么我们怎样利用 LESS 来组织我们这些数值之间的关系呢？我们来看这段代码：
清单 21 . LESS 文件
@init: #111111;
@transition: @init*2;
.switchColor {
color: @transition;
}
经过编译生成的 CSS 文件如下：
清单 22. CSS 文件
.switchColor {
color: #222222;
}
上面的例子中使用 LESS 的 operation 是 特性，其实简单的讲，就是对数值型的 value（数字、颜色、变量等）进行加减乘除四则运算。同时 LESS 还有一个专门针对 color 的操作提供一组函数。下面是 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: 上述代码引自 LESS CSS 官方网站，详情请见 http://lesscss.org/#-color-functions
使用这些函数和 JavaScript 中使用函数一样。
清单 23 LESS 文件
init: #f04615;
#body {
background-color: fadein(@init, 10%);
}
经过编译生成的 CSS 文件如下：
清单 24. CSS 文件
#body {
background-color: #f04615;
}
从上面的例子我们可以发现，这组函数像极了 JavaScript 中的函数，它可以被调用和传递参数。这些函数的主要作用是提供颜色变换的功能，先把颜色转换成 HSL 色，然后在此基础上进行操作，LESS 还提供了获取颜色值的方法，在这里就不举例说明了。
LESS 提供的运算及函数特性适用于实现页面组件特性，比如组件切换时的渐入渐出。
Comments（注释）
适当的注释是保证代码可读性的必要手段，LESS 对注释也提供了支持，主要有两种方式：单行注释和多行注释，这与 JavaScript 中的注释方法一样，我们这里不做详细的说明，只强调一点：LESS 中单行注释 (// 单行注释 ) 是不能显示在编译后的 CSS 中，所以如果你的注释是针对样式说明的请使用多行注释。
LESS VS SASS
Similar frameworks include SASS and LESS. Both are CSS preprocessors and have similar functions. They both use a similar programming language to write CSS, and both have features such as variables, mixing, nesting, and inheritance. The ultimate goal is They are all convenient for writing and maintaining CSS.
LESS and SASS promote and influence each other. In comparison, LESS is closer to CSS syntax