【前端】less学习
Less 是什么？ Less is more,than CSS.
Less就是搞笑高效编写和维护CSS的一种语法。
1.下载Koala考拉，一款国人编写的less开发器。
2.可以用Sublime Text3编写Less文档。
好，开始学习啦！
1. 注释
/*会被编译到css文件的注释*/
//不会编译...
2.变量
声明：@变量名:值（+单位）
使用：@变量名
3.混合（有点像函数，又像宏定义）
把某个选择器（class或者id或者一些html标签）的效果应用在当前的选择器，
当前{
.某个类;
}可以加参数
.当前类{
.某个类(一个数);
}
.某个类(@参数1){
属性:@参数1;
} 参数可带默认值
.当前类{
.某个类(可省略);//括号不能省略
}
.某个类(@参数1:默认值){
属性:@参数1;
} 3.匹配模式（就像if判断）
.当前类{
.某个类(flag1,值);
//调用flag1的那个
}
.某个类(flag1,@参数1:默认值){
属性:@参数1;
}
.某个类(flag2,@参数1:默认值){
属性:@参数1;
} 固定带上的，也就是不管是flag1还是flag2，该类都有的属性。
.某个类(@_,@参数1:默认值){
属性:...
} 4.运算
就是变量的+-*/()运算。
width:@w+20;
可不带单位
5.嵌套
将下面css写法改为嵌套写法
.list{
...
}
.list a{
...
}
.list span{
...
}这样嵌套
.list{
...
a{...}
span{...}
}另外&符号表示上一层选择器
.list{
...
a{
...
&:hover{...}
}
}6.@arguments变量
可以代表所有传参。
.border(@w:30px,@c:red,@xx:solid){
border:@w,@c,@xx;
}.border(@w:30px,@c:red,@xx:solid){
border:@arguments;
}@arguments(40px);
这样就可以设置第一个参数。
7.避免编译 和 !important
~'这里面的内容不会编译出来'可以用来放滤镜、不需要less计算出来的内容。
.test_important{
.border()!important;
}它会在混合的所有属性后面加上!important
8.导入less/css文件
@import "ku" ;
//导入ku.less，编译时一起编译出来
@import "a.css";
//导入a.css，不编译，在css里还是有'导入a.css'的作用
@import (less) "a.css";
//导入a.css，编译。9.加个括号可以让没用到的混合不编译
.xx(){...}
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2016-02-29 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读