less是一门css预处理语言,文件后缀名为.less,能减少css文件编写的代码量
- 官网
- 安装
- 使用npm install -g less 全局安装less
- 在node.js and NPM中激活
- 在file watchers中打开less监听
- webstorm建立的less文件将会被自动的预编译
- 使用方法
- 注释
- "//"表示的注释是不会被预编译成css的
- "/**/"表示的注释是会被预编译的
- 变量
- 通过关键词@+变量名来创建变量,变量只能在less文件中使用,而不会被编译
- 变量能在不同的地方调用相同的css值
- 在给属性赋值时,变量可以进行基本的数学计算
- 函数
- 创建:"."+方法样式名+(@变量名:添加默认值){};
- 调用:"."+样式名+(值),没有值的情况下添加的是默认值
- 不同样式之间,变量互不影响
- less函数不会被预编译,只能在less文件中被调用
- 混合嵌套(函数写法)
- 类名可以当成函数使用,也就是即能被预编译成,也能在less文件中当成函数被其他的样式调用
- 子代选择器
- 在父类元素对应的less样式中,可以直接写子类的样式,支持多重子类的样式编写,最后编译成子代选择器的css样式
- 注释