Less
程序员文章站
2022-04-27 22:20:55
...
互联网技术发展太快了,想想前几年还在手动改一行行修改CSS文件。直至现在Less的出现,less支持变量,类似函数调用,使得CSS更加容易维护和编写。上手非常容易,官方也提供了详细的资料。
/* less学习备忘 */ /*1.一种注释,可以在css文件中显示*/ //另一种注释,不在css文件中显示 // 2.变量以@开始,正如php变量以$开始 @test_width:100px; .border{ border: solid 5px pink; } .content{ background-color: red; width: @test_width; height: @test_width; .border; // 混入 } .radius(@myradius:20px){ -webkit-border-radius:@myradius; -moz-border-radius:@myradius; border-radius: @myradius; } #rd{ width: 100px; height: 100px; background-color: yellow; // 3.混入(类似函数调用) .radius(); } // 4.匹配模式,相当于js中的if语句,if(top){}else if(bottom){} .triangle(top,@w:5px,@c){ // width: 0px; // height: 0px; // overflow: hidden; border-width: @w; border-color: transparent transparent @c transparent; border-style: solid; } .triangle(bottom,@w:20px,@c:red){ border-width: @w+10; // 5.变量可参与+-*/运算 border-color: @c transparent transparent transparent; border-style: solid; } // 6.@_用于添加公共部分代码 .triangle(@_,@w:20px,@c:red){ width: 0px; height: 0px; overflow: hidden; } .tangle{ .triangle(bottom); } // 7.嵌套规则,非常实用的一个功能 .news{ width: 300px; margin: 30px auto; padding: 0px; list-style: none; li{ // news li {} height: 30px; line-height: 30px; background-color: yellow; margin-bottom: 5px; padding: 0 10px; } a{ float: left; &:hover{ // &: 相当于 news a:hover{} color: red; } } span{ float: right; } } // 8.@arguments,参数比较多时,可直接用关键字@arguments代替 .border_arg(@s:solid,@w:5px,@c:red){ border: @arguments; } .br{ .border_arg(); // 9.避免编译,直接在语句前加上~ //width: calc(30px-5px); width: ~'calc(30px-5px)'; }
更多介绍见:lesscss.net
Less编译工具:koala-app.com/index-zh.html
推荐阅读
-
详解linux less命令查看大文件
-
ORA-00600 kcratr_nab_less_than_odr
-
vue-cli 2.*中导入公共less文件的方法步骤
-
Mysql version can not be less than 4.1 出错解决办法
-
you *might* want to use the less safe log_bin_trust_function_creators variable
-
Mysql version can not be less than 4.1 出错解决办法
-
Linux中使用命令more,less,cat查看文件内容
-
less简单入门(CSS 预处理语言)
-
浅谈css3中calc在less编译时被计算的解决办法
-
详解在React项目中安装并使用Less(用法总结)