以前就使用过 less 和 sass, 其实很简单, 就是很长时间不用, 忘记语法了, 现在来总结一片使用技巧
一, 注释
less 的注释不会被编译到 CSS 文件中, 所以提倡多使用 less 中的注释:/**/
二, 变量
less 语言中也有自己的变量, 定义变量 @变量名: 变量值, 使用该变量时, 直接 @变量名, 就是该变量值
- @width: 300px;
- body
- {background-color: white;}
- .div1
- { width: @width; }
三, 混合(mixin)
混合可以将一个定义好的 class A 轻松引入到另一个 class B 中, 从而简单实现 class B 继承 class A 中所有属性, 还可以带参数地调用.
例如定义一个样式类. border, 直接用到另一个样式类. box 中, 另一个样式类就很方便的具有了这个类的样式, 很好的实现了 css 代码的复用;
再例如有一个. box2, 它和. box 有一些属性相同, 那就直接继承. box 再做特定的修改即可:
- .border{
- border:1px solid black;
- }
- .box{
- .border;
- }
- .box2{
- .box;
- margin:20px;
- }
混合(mixin): 可带参数, 以实现传入变量参数来用一个样式类生成各种不同的样式:
- .border2(@border_width){ // 定义变量参数
- border:@border_width solid black;
- }
- .box3{
- .border2(5px);// 参数位置传入变量以控制不同的样式
- }
- .box4{
- .border2(10px);
- }
混合 (mixin) 参数可带默认值(多个参数之间使用逗号隔开)
- .border3(@border_width2:5px){
- border:@border_width2 solid black;
- }
- .box5{
- .border3();
- }
一些常见的兼容性写法就可以用混合封装起来进行简化:
- .border_radius(@border_radius:2px){
- border-radius:@border_radius;
- -moz-border-radius:@border_radius;
- }
四, 模式匹配
有些情况想根据传入的参数来改变混合的默认呈现, 比如:
下面通过 less 模式匹配, 定义不同央视模式的三角 (top 模式和 bottom 模式), 但无论哪种模式,@_(放在模式参数位置) 定义的样式所有模式都公有
- .triangle(@_,@w,@c){
- width:0;
- height:0;
- overflow:hidden;
- }
- .triangle(top,@w,@c){
- border-width:@w;
- border-color:transparent transparent @c transparent;
- borser-style:dashed dashed solid dashed;
- }
- .triangle(bottom,@w,@c){
- border-width:@w;
- border-color:transparent transparent @c transparent;
- borser-style:solid dashed dashed dashed;
- }
- .triangle2{
- .trangle(bottom,20px,red);
- }
- .triangle3{
- .trangle(top,30px,green);
- }
五, 运算(对变量进行加减乘除等)
- @box_width:100px;
- .box6{
- width:(@box_width-10)*2;
- }
六, 嵌套
可以在一个选择器中直接潜逃另一个选择器来实现继承, 这样很大程度减少代码量, 并且代码看起来结构更清晰:
- .list1{
- width:600px;
- height:600px;
- li{// 相当于在外边写. list1 li{}
- height:20px;
- a{
- float:left;
- &:hover{ //& 代表上一层选择器, 所以这样写相当于 .list1 a:hove{}
- color:red;
- }
- }
- }
- }
七,@arguments
@arguments 包含了所有传递进来的参数, 如果你不想单独处理每一个参数的话就可以像这样写:
- .box-shadow(@x:0;@y:0,@blur:1px,color:#000){
- box-shadow:@arguments; // 相当于 () 参数里的值放到了这
- -moz-box-shadow:@auguments;
- -webkit-box-shadow:@arguments;
- }
- .box-shaow(2px,5px);
八, 避免编译
有时候需要输出一些不正确的 css 语法或者使用一些 less 不认识的专有语法
- // 要输出这样的值我们可以在字符串前加一个~
- .class1{
- filer:~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
- }
完整的 Less 中文文档:
http://www.bootcss.com/p/lesscss/
来源: http://www.bubuko.com/infodetail-2567973.html