前端从0到1--less语法

less语法

1.css预处理器概念

• css预处理器就是用某一种语言用来为css增加一些动态语言的特性(变量，函数，继承等你)，css预处理器可以让你的css更加简洁，适应性更强，代码更直观等诸多好处，简而言之，css预处理器就是升级版css 2.常见的css预处理器
• less、sass/scss、stylus 3.less概念
• less(Leaner Style Sheets)是一门css预处理语言，为css赋予动态语言的特征，它扩展了css语言，增加了变量、Mixin(混合)、嵌套、函数和运算等特性，使css更易维护和扩展。用类似JS的语法去写css 4.语法糖
• 糖衣语法，便于开发者进行快速开发的语法规则。按照语法糖去进行开发，可以让代码变得更加有逻辑，复用性更强，减少出错的概率。 5.编译
• 推荐 easy less插件
• 在保存时会在同级目录下自动生成一个同名的css文件（html应用时应该应用该css文件而不是less文件） 6.变量
• @自定义变量:值; @theme_color:#6cf;
• 注意
  • 变量结尾一定要有分号
  • 调用变量的时候也要带有分号
  • 定义变量一般来说会写在整个文档的头部 7.导入
• @import "你要引入的less文件的路径";
• 注意
  • 和变量语法很相似，注意区分
  • import后面跟的是空格
  • 只能导入less文件，如果路径有误，则无法编译
  • 当A.less文件导入了B.less文件，A.less文件修改时需要保存，同时B.less文件也需要再次保存，才能正常编译到css文件中 8.嵌套写法

    .box{
       .son{
          &:hover{   //&可以去掉后代选择器的空格
          color:#6cf;
          }
       }
    }
    //写完记得按保存编译成css文件

9.less中的计算

• 1. 加法 +
• 2. 减法 -
• 3. 乘法 *
• 4. 除法 /
  • 在css中 / 被当作分隔符，所以不能直接写/
  • 100px ./10 (.前有一个空格，否则会报错）
  • 100./10px (尝试出来的写法，不需要空格）
  • 包裹算式 (100px/10px)
• 5.如果有多个单位的话，则取第一个单位为最终单位

10.导出方式

• //out:../css/
• //out:false 禁止导出
• 注意：导出代码只能写在第一行，以单行注释的方式出现