less

css 的预编译处理器，把 css 变成编译语言，用程序的思想写 css(less,sass),在经过编译得到 css 文件

less 和 sass 的区别

1.less 是通过 js(node)来编译的，可以在客户端也可以在服务器端

2.sass 是通过 ruby 编译的，在服务器端处理

3.less  变量声明 @

4.sass  变量声明 $

lesscss.org lesscss.cn

sass-lang.com www.sass.hk

使用

1. 使用方法，调用编译 js,效率低

2. 安装 less 模块，安装后自动编译，html 直接调用和该 less 同名的系统生成的 css 文件

npm install less -g (-g 为全局安装)

3. koala 软件
4. 在线编译
5. glup

语法

less 写选择器，可以父子嵌套，是后代关系

1.变量

声明变量

c：变量值（可以是字符串，也可以不是）

调用变量

1.@变量名

2.字符串拼接 ‘其他字符串@(变量名)其他字符串’

3.变量可以进行运算 @变量名*2，颜色也可以计算，但是 - 的运算前后需要加空格

4.变量可以反复调用，@@变量 1  通过变量名取得的值，继续当做变量使用。

5.变量名重复声明，后面会覆盖前面的值

常见的高宽、颜色、地址

2.混入   相当于函数调用

声明函数的名字：必须得是.或者#开头，否则无效，无参数。

不写括号的话，可以当做正常的选择器使用

有括号的话，必须通过调用的方式使用

调用

在选择器内部，混入的名字（）;

有参数没有默认值，调用必须传递参数，否则编译失败

有参数有默认值，可以不传递参数

在混入内部，可以用@arguments,获取所有的参数

3. 嵌套中的子元素

在选择器内部

&代表父级元素或者父级选择器,可以和其他选择器组合使用。

&>li  相当于是子代选择器 >

.father {
  // &-son 编译后为 .father-son
  &-son {
    ...;
  }
}

4. 命名空间

调用函数时，需要指明函数的出处

#menu>.li1>.a();

//注意多层调用时，每一层的选择器都必须要有.或者#

5. 文件的引入

@import ‘less 文件的路径’

项目中设置公共的变量、混入（函数）

其他文件引入可以直接调用

6. less 使用 css 函数的时候要注意

height: ~'calc(100vh - 90rpx)';

用 ~'css函数' 包裹 css 函数，里面的语句在编译为 css 时，就不会被编译成固定值，而保留原来 css 函数语句。

7. calc 计算属性 calc 和括号之间不能加空格，计算符号前后必须加空格

•