今天来讲一下Less的基本语法。让我们打开代码编辑器。
1.
@charset "utf-8";
作用:为了避免中文乱码,需要先在第一行写上这句代码。
2.
/**/ 或 //
作用:注释。它们的区别在于,如果文件夹内有同名的css文件(即abc.less的同名文件abc.css),则/**/的注释内容会被自动从less引入到css(其他会被编辑的代码同理),而 // 后的内容则不会。
3.
@变量名:值;
作用:less可以定义变量,方法就是 @变量名:值;
变量的使用:举个例子
body部分有一个以box为class名的div:
<div class="box"></div>
如果要给div设置300px的宽度,则对应的less部分可以这样写
@var-width: 300px;
.box{
width:@var-width;
}
由于时间关系,今天就暂时写这么多,未完待续。
--------
免责声明:http://www.jianshu.com/p/cd9793098eea