引言:less是一门css预处理语言,就像慕课网课程里说的,这是专门为懒人准备的,这里的懒人并不是贬义词,科技的发展可以说都是懒得产物,就是因为懒才想出了各种简便之法。懒得走路,骑马,坐车;懒得自己劳动,发明了各种工具;懒得打字,用语音;... 有些时候懒是有很大的促进作用的。
接下来回到主题,这里的less主要说一些基本知识吧,先从工具开始,遵循慕课网上推荐的用koala进行编译。首先下载koala,我已开始用mac下载,下载后总是解压失败,百度后发现可能是下载速度过快,下载不完全导致(不知道是不是,反正换个电脑在Windows下下载就没问题),在Windows下下载解压后拷到mac下。因为我是看了视频后自行下载安装的,下面就是我的安装及使用过程:
1、koala基本配置:进主页后找到配置图标,把语言设置成简体中文(要退出后在进入才生效),将项目拖进koala主页后可以对着less文件单击右键弹出的弹框中有设置输出路径。不单击右键,只点击一下弹出的是其他属性。
2、因为昨晚看了视频,以为自己会写的,但是打开koala后新建了文件与文件夹,按照记忆设置了选项,在index里写了代码,也在less里写了,刷新页面没反应,没反应是因为index.html页面忘了配置link引用css文件。
3、用webstorm编写less输出的css没有自动更新(我用的是webstorm编辑器):在webstorm配置里找到file watchers 点击右边框底部的加号,把less添加进去即可(默认配置不用修改)。
上面几步是我遇到的问题。下面介绍我知道的less。
1、变量
less的变量定义的挺简单,用@声明即可,注意:下面的代码是在main.less里写的。
@body_color: blue;
body {
background-color: @body_color;
}
下面是编译后的css文件。(两个文件名分别为main.less,main.css)这里的main.css是自动生成的,即只需要写less文件,不用管css。
body {
background-color: #0000ff;
}
以上就是简单的演示了下变量的定义与引用。
2、混合1)带括号混合
这种混合类似于函数,是大样式嵌套小样式,看代码
.border_box(@box_height:100px ,@box_width: 100px){
height: @box_height;
width: @box_width;
}
#content{
background-color: red;
border: 1px solid green;
.border_box(); //使用默认参数
}
这就是一个嵌套,content引用.border时记得带括号,这段代码使用了默认参数,也可以自己定义参数,当然不带参数也可以。看main.css代码
#content {
background-color: red;
border: 1px solid green;
height: 100px;
width: 100px;
}
可以看到: .border();混合方式直接把.border里的内容拷贝到content里。
2)不带括号 下面的代码我们加了一个.border_style样式,注意: 这里没有(),混合引用时有没有加()。
.border_style{
border-width: 1px;
border-style: solid;
border-color: green;
}
#content{
background-color: red;
//border: 1px solid green;
.border_style;
.border_box();
}
再对比main.css
.border_style {
border-width: 1px;
border-style: solid;
border-color: green;
}
#content {
background-color: red;
border-width: 1px;
border-style: solid;
border-color: green;
height: 100px;
width: 100px;
}
此时会发现 .border_style{}里面的东西在main里也有,这和.border_box(){}不同,后一个在main.css里是没有单独的.border_box(){}样式的。
3、匹配
匹配有点类似于java或c++中的多态,同一个函数名参数不同,引用时通过参数进行区分,这里也是类似
.border_match(top,@boxWidth: 5px, @boxColor: red){
border-width: @boxWidth;
border-color: @boxColor transparent transparent transparent;
}
.border_match(bottom,@boxWidth: 5px, @boxColor: red){
border-width: @boxWidth;
border-style: solid;
border-color: transparent transparent @boxColor transparent;
}
.border_match(left,@boxWidth: 5px, @boxColor: red){
border-width: @boxWidth;
border-style: solid;
border-color: transparent transparent transparent @boxColor;
}
.border_match(right,@boxWidth: 5px, @boxColor: red){
border-width: @boxWidth;
border-style: solid;
border-color: transparent @boxColor transparent transparent;
}
.box{
.border_box();
.border_match(bottom);
background-color: azure;
}
4、运算
这里的运算其实就是变量的逻辑运算,看代码
@mathWidth: 50px;
.math{
margin-top: 20px;
width: @mathWidth+100;
height: 50px;
border: 1px solid green;
}
再看main.css里的
.math {
margin-top: 20px;
width: 150px;
height: 50px;
border: 1px solid green;
}
编译后的结果就是运算的结果。
5、嵌套下面代码一和代码二的实现效果是一样的。
less语序引入其他less文件,用@import “”;的形式,注意引入的文件不用加less后缀名,引入css要加后缀名,还要加()。
@import "ku"; //引入ku.less文件
@import "a.css"; //在编译后的css文件里也是这种引入,并没有如其他less那样加载文件里
@import (less) "a.css"; //这样的引用类似于引less文件,注意:()前后都有空格,这个import放在哪实际位置就在哪,想放前面就把这个引入放前面,想放后面引入时就放在后面
好了,less部分差不多就这些了,剩下的就是熟能生巧,多加练习吧差点忘了上github地址了,虽然我觉得没必要,还是给一个吧:https://github.com/dwenb/koalaTest。
//代码一
.list{
margin-left: 300px;
width: 100px;
background-color: antiquewhite;
border: 1px solid green;
li :hover {
color: red;
}
}
//代码二
.list{
margin-left: 300px;
width: 100px;
background-color: antiquewhite;
border: 1px solid green;
li {
&:hover {
color: red;
}
}
}
编译后的main.css都相同,都是下面这个
.list {
margin-left: 300px;
width: 100px;
background-color: antiquewhite;
border: 1px solid green;
}
.list li:hover {
color: red;
}
注意:
代码二中“ & ”代表的是上一层选择器。
6、引入其他less文件
less语序引入其他less文件,用@import “”;的形式,注意引入的文件不用加less后缀名,引入css要加后缀名,还要加()。
@import "ku"; //引入ku.less文件
@import "a.css"; //在编译后的css文件里也是这种引入,并没有如其他less那样加载文件里
@import (less) "a.css"; //这样的引用类似于引less文件,注意:()前后都有空格,这个import放在哪实际位置就在哪,想放前面就把这个引入放前面,想放后面引入时就放在后面
好了,less部分差不多就这些了,剩下的就是熟能生巧,多加练习吧!
差点忘了上github地址了,虽然我觉得没必要,还是给一个吧: https://github.com/dwenb/koalaTest。