less基础及其用法

less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，

使 CSS 更易维护和扩展LESS 既可以在 客户端 上运行 ，也可以借助Node.js在服务端运行。

less的中文官网：http://lesscss.cn/

我们可以通过修改style标签的type属性 将less的代码写到页面当中

但是浏览器是不认识less的，就算style标签当中写的是最基本的css代码，浏览器也依旧不认识无法渲染

less的代码 必须要通过编译 转换成css文件 才能生效 所以 我们是 写less【样式】 引css【文件】

less初次使用：

1.定义变量（@zero:0）并运用，凡是页面中使用0，都用@zero代替;

2.子元素需要放在父元素中，此时子元素可以放心使用class，因为他已经有前提条件是父元素不用再继续担心对同名class值样式的影响

3.<style type="text/less">style标签的类型需要改成less

4.根据官网我们需要一个less编译的less.js 文件，并在最下方引入，因为需要读取页面中所有less相关的文件，才可以进行编译

less --- 支持原生js,node

sass --- ruby环境

stylus --- node -- 开发项目中我们使用stylus

Less编译工具koala 官网:www.koala-app.com 或Vscode中插件Easy-less

less中的注释以//开头的注释，不会被编译到css文件中以/**/包裹的注释会被编译到css文件中

less中的变量使用@来申明一个变量：@box：pink;

1.作为普通属性值只来使用：直接使用@box

2.作为选择器和属性名：#@{selector的值}的选择器形式, @{selector的值}属性名

3.作为URL：@url

4. 变量的延迟加载

---

变量

在less当中是允许我们定义变量的 定义变量的语法 @变量名称：变量的值

将变量作为属性值使用时 在使用变量的时候 直接@变量名称即可

@bg1:#ccc;

将变量作为属性名使用的时候 @{变量名称}

@beijing:background;
使用：@{beijing}:@bg1;

将变量作为选择器使用的时候

1.变量自身带选择器符号 @{变量名称}

@b:.box1;
@{b}{
 width: ~'@{num}px';
 height:400px;}

2.变量自身不带选择器符号 选择器符号@{变量名称}

@num:400;
@b2:box1;
.@{b}{
 width: ~'@{num}px';
 height:400px;}

---

延迟加载

less也是存在类似于js的作用域的概念的,当前大括号内如果没有要使用的变量 就向上一级的大括号查找

如果当前大括号内 有多个同名变量 不论远近先后 只看最后一个

如果当前大括号内没有 会向上一级的大括号 进行寻找 然后依旧还是不论远近先后 只看最后一个

---

less中的嵌套规则

1. 基本嵌套规则

2. &的使用

直接嵌套的话，默认为选择器与选择器之间使用后代选择器(空格)进行连接

如果想要给子元素设置样式的时候，只需要在选择器的前边，直接加 > 即可

当我们使用&的时候，它就代表当前其所在的大括号对应的元素本身，只要是我们需要使用，带冒号的选择器 都需要使用&

---

less加减乘除运算

less中的混合 Mixin混合就是将一系列属性从一个规则集引入到另一个规则集的方式

本质：在调用的位置，将混合内部的样式代码再写一遍

1.普通混合

语法：.混合名（）{ }

调用混合方法：.混合名（）；【分号必须写，只有最后一个引用可省略，为了方便不出错最好都写】

2.带参数的混合

混合是允许设置参数的，设置参数的语法是在定义混合的小括号内定义变量 多个参数

在调用混合传递参数时，是通过参数名称确定对应关系的所以传参语句 @变量名：变量值其实和变量赋值语句是一样

3.带参数并且有默认值的混合

在形参没有默认值的情况下 定义的形参个数 必须与传递的实参个数一致 不然报错

如果想要给形参 设置默认值 其实就是在定义形参的时候 直接赋值

4.带多个参数的混合

引入外部混合

引入外部混合 通常情况下 我们用于编写布局样式的less文件 都需要依赖一些 提前定义好的混合，

所以我们 需要引用其他的混合文件 用于编译

---

例如：封装一个清除浮动的less样式【最后为css样式的对比】