Less
1.Sublime Text + Koala编辑工具
- Sublime
- 1)Html编程工具,与一般的HTML编程工具没有什么区别
- 2)可以设置less编程的时候使一些标签高亮有提示;
- Koala
- 1)Less编程工具:
- 将我们要编译的Less文件拖拽到工具内
- 点击文件,设置为自动编译,
- 输出方式:
- normal为正常模式,有缩进,
- compress为简短模式,输出最小字节的css文件,没有缩进
- 设置输出路径:一般都和less一个文件夹;
- 1)Less编程工具:
- HTML中使用配置
<link rel="stylesheet/less" type="text/css" href="styles.less" /> <script src="less.js" type="text/javascript"></script>
2.语法详解
- 注释
- 1)第一种:在css中显示注释: /*注释*/
- 2)第二种:在css中不显示注释: //注释
- 变量
- 1)使用@符号定义变量
-
@body_width:300px; body{width:@body_width;}
- 混合
- 1)普通混合
-
.border{ border:1px solid red; } .box{ width:30px; hight:30px; .border; }
- 2)带参数的混合
-
.border(@color){ border:1px solid @color; } .box{ width:30px; hight:30px; .border(red); }
- 3)带默认值参数的混合
-
.border(@color:red){ border:1px solid @color; } .box{ width:30px; hight:30px; .border(green); }
- 匹配规则
- 1)根据参数来判断使用哪个css
-
//绝对定位 .pox(a){position:absolute;} //相对定位 .pox(r){position:relative;} //固定定位 .pox(f){position:fixed;} //所有的pox方法都要引入的css属性 .pox(@_){width:20px;} //混合 .box{ .pox(r); } //输出的css: .box { position: relative; width: 20px; }
- 运算
- 1)可以实现数值的加减乘除
-
@width:300px; .body{ width: (@width - 20)*5;// 注意(@width - 20)减号之间要有空格 }
- 嵌套
- 1)嵌套的方式编写层叠样式
- 以前:
-
#header { color: black; } #header .navigation {font-size: 12px;} #header .logo { width: 300px; } #header .logo:hover {text-decoration: none;}
- 现在:
-
#header { color: black; .navigation { font-size: 12px; } .logo { width: 300px; &:hover { text-decoration: none } } }
- 注意: & 符号代表上一层选择器,如果你想写串联选择器,而不是写后代选择器,就可以用到&了
- 1)嵌套的方式编写层叠样式
- @arguments
- 1)包含所有传递进来的参数
-
.border_arg (@w:30px,@c:red,@xx:solid){ border:@arguments;//等价于border:@w @c @xx; }
- 避免编译
- 1)使用”~”号加上单引号和双引号来避免让less编译,原封不动的让css3来编译
-
.test_03{ width:~’calc(300px -30px)’; }
- !important关键字
- 1)会为所有混合所带来的样式添加上!important
-
.test_Important{ .border_redius() !important; }
- 命名空间
- 1)为了更好的组织CSS,将一些变量或者混合模块打包起来,之后重复使用
-
#bundle { .button () { display: block; border: 1px solid black; background-color: grey; &:hover { background-color: white } } .tab { ... } .citation { ... } }
- 只需要在 #header a中像这样引入 .button:
-
#header a { color: orange; #bundle > .button; }
- 作用域
- 1)LESS 中的作用域跟其他编程语言非常类似,首先会从本地查找变量或者混合模块,如果没找到的话会去父级作用域中查找,直到找到为止.
-
@var: red; #page { @var: white; #header { color: @var; // white } } #footer { color: @var; // red }
- Importing
- 1)你可以在less文件中通过下面的形势引入 .less 文件, .less 后缀可带可不带,也可以引用.css文件
-
@import "lib.less"; @import "lib"; @import "lib.css";
- 字符串插值
- 1)变量可以用类似ruby和php的方式嵌入到字符串中,像@{name}这样的结构:
-
@base-url: "http://assets.fnord.com"; background-image: url("@{base-url}/images/bg.png");
精品原创,谢谢打赏...