less基础知识

less基础知识

• 一、概览
• 二、变量
• 三、运算
• 四、混合
• 五、嵌套
• • @规则嵌套和冒泡
• 六、转义
• 七、函数
• • 命名空间和访问符
• 八、映射
• 九、导入

一、概览

• Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。
• 因为 Less 和 CSS 非常像，因此很容易学习。而且 Less 仅对 CSS 语言增加了少许方便的扩展。
• less在浏览器端使用的时候，借助less.js文件进行编译，编译之后其实就是css文件。
• 引入less文件
• <link rel="stylesheet/less" type="text/css" href="./css/index.less"/>
• 引入less的编译文件
• <script src="js/less.min.js"></script>

二、变量

• less声明变量使用的是@

• 变量存在全局变量和局部变量：变量写在样式类外部叫全局变量；变量写在样式里面叫局部变量。

  @width:100px;
  @height:100px;
  #btn{
  @color:red;
  width: @width;
  height: @height;
  color: @color;
  }