什么是Less?css的Less好比是js的Jquery,可以让人们更方遍快捷的使用css,使css代码更简洁,可以减少重复的代码,减少开发人员的工作量。 Less CSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护Less和Sass的区别Less和Sass的主要不同就是他们的实现方式:Less是基于JavaScript,所以,是在客户端处理的。Sass是基于Ruby的,然后是在服务器端处理的。 其实也有一个服务器端的LESS版本。在服务器上安装LESS的最简单的办法就是使用Node Package Manager (NPM,一看就知道是基于Node.js的)SASS和LESS在变量作用域上也有明显差别。LESS具有全局变量,而SASS暂时不具有全局变量的概念。SASS比LESS更完善的点还在于SASS能通过@function的方式编辑函数;通过@for循环或者@each循环对数据进行循环;通过@if else对数据进行判断Less的学习注释 less中有两种注释://和//。使用//的注释是会被编译进css文件的,而使用//的注释不会被编译进css文件。 由于我们应该一般编写和维护less文件,所以我们一般采用第二种注释,无需将注释编译进css文件。变量 less中使用@声明一个变量,和一般程序语言不同的是,@符号与变量之间不能有空格 变量的使用: //less文件 @myWidth : 200px; @myHeight : 500px; #main { width: @myWidth; height: @myHeight; background-color: yellowgreen; }混合将less写法与常规的css写法进行混合书写 //less文件 @charset “utf-8”; @myWidth : 200px; @myHeight : 200px; #main { width: @myWidth; height: @myHeight; background-color: yellowgreen; .border } .border { border:3px solid pink }可以带参数,设置默认值://less .border(@mywidth: 4px){ border: @mywidth solid green;}.mybox { .border(5px);}//css.mybox { border: 5px solid green;}4.匹配模式 // 根据不同的参 数可以匹配不同的样式: .pos(r) { position:relative; } .pos(a) { position:absolute; } .pos(f) { position:fixed; } .pipei { width:200px; height:200px; background-color:green; .pos(f); //.pos(r) .pos(a) 传入不同的参数,实现不同的定位方式 }5.运算less中可以实现运算,任何数字、颜色或者变量都可以参与运算(+ - * /),运算应该被包裹在括号中//less.border(@mywidth:4px){ border: @mywidth + 5px solid green; //这里的单位可以省略,但是两者必须有一个带单位}.mybox { .border();}//css.mybox { border: 4px solid green;}6.嵌套嵌套是less中非常有用、高效的语法//less#list { width: 600px; margin: 30px auto; list-style: none; padding: 0; li { height: 30px; line-height: 30px; background-color: pink; margin-bottom: 5px; a { float: left; // 伪类选择器 &:hover { font-size:20px; } } span { float: right; } }}7.arguments参数 有时候我们不想单个操作参数,可以使用@argemunts操作参数。//less.border_arg(@w:30px,@c:red,@xx:solid){ border:@arguments;}.test_arguments{ .border_arg();}//css.test_arguments { border: 30px red solid;}8.避免编译有时候我们需要输出一些不正确的css语法或者使用一些less不认识的专有语法,要输出这样的值我们需要使用~““将语法包裹起来,语法放在双引号或者单引号中间。从而实现不让less编译该段代码: