less学习语法

1.CSS函数的补充

1.rgb/rgba/translate/rotate/scale

2.非常好用的css函数：

• var:使用css定义的变量
• calc:计算css值，通常用于计算元素的大小或位置
• blur:毛玻璃（高斯模糊）效果
• gradient:颜色渐变函数

var:定义变量

 css中可以自定义属性：

• 属性名需要两个减号（--）开始
• 属性值则可以是任何有效的CSS值

2.Less语法一：Less兼容CSS

• 所以我们可以在less文件中编写所有的CSS代码
• 知识将css的扩展名改成了.less结尾而已

3.Less语法二：变量（variables）

在一个大型的网页项目中，我们css使用到的某几种属性值往往是特定的

• 比如我们使用到的主题颜色值，那么每次编写类似于#f3c258格式的语法；
• 一方面是记忆不太方便，需要重新编写或者拷贝样式；
• 另一方面如果有一天颜色改变，我们需要修改大量的代码；
• 所以，我们可以将常见的颜色或者字体等定义为变量来使用；

@mainColor:red;
.box{width: 250px;height: 100px;background-color:@mainColor;
}

4.Less语法三：嵌套

选择器的嵌套：

&：表示父级

可以用于伪类、伪元素：

5.Less语法四：运算

在Less中，算术运算符+-*/可以对任何数字、颜色或变量进行运算。

• 算数运算符在加、减或比较之前会进行单位换算，计算的结果以最左侧操作数的单位类型为准；
• 如果单位换算无效或失去意义，则忽略单位；

6. Less语法五：混合

在原来的CSS编写过程中，多个选择器中可能有大量相同的代码

• 我们希望可以将这些代码进行抽取到一个独立的地方，任何选择器都可以进行复用；
• 在less中提供了混入来帮助我们完成这样的操作。

.cloor{color: red;
}
.box1{.cloor()
}
.box2{.cloor()}

 混合是一种将一组属性从一个规则集（或混入）到另一个规则集的方法。

 

注意：混入在没有参数的情况下，小括号可以省略，但是不建议这样使用。 

6.1混入是可以传递参数（定义变量）的。

定义：

调用：

 6.2混合和映射结合使用

作用：弥补less中不能自定义函数的缺陷

 

7.less其它语法补充

7.1less语法七：extend继承 

•  和mixins作用类似，用于复用代码；
• 和mixins相比，继承代码最终会转化成并集选择器；

 7.2Less语法八：Less内置函数

• Less内置了多种函数用于转换颜色、处理字符串、算术运算等。
• 内置函数手册：https://less.bootcss.com/functions/

7.3Less语法九；作用域（Scopr）

• 在查找一个变量时，首先在本地查找变量和混合；
• 如果找不到，则从“父”级作用域继承； 

7.4Less语法十：注释

• 在Less中，块注释和行注释都可以使用；

7.5Less语法十一：导入

• 导入的方式和CSS的用法是一致的；
• 导入一个.less文件，此文件中的所有变量就可以全部使用了；
• 如果导入的文件是.less扩展名，则可以将扩展名省略掉；