Less学习笔记

Posted 2020-09-06 吃草的虾米

编译工具：koala（中国制造）

中文网：http://old.lesscss.net/article/document.html

1.less是什么？

less是css一种动态样式语言，属于css预处理语言的一种，它使用类似css的语法，为css赋予了动态语言的特征，如变量、继承、运算、函数等，更方便css的编写和维护。less可以在多种语言环境中使用，包括浏览器端、桌面客户端、服务器端。

2.语法

　　2.1注释

　　　　//:生成css的时候，不会被编译

　　　　/**/:在生成css的时候，会被编译。

　　2.2变量

　　　　@符号：定义变量。

　　　　　　例子:声明变量：@list:red;

　　　　　　　　调用：.box{color:@list}

　　　　混合：

　　　　　　声明：.bor{border:solid 5px pink}

　　　　　　调用：.box{color:@list; .bor; margin-left:100px}

　　　　混合-带参数（带参数时调用时带括号）：

　　　　　　声明：

　　　　　　　　.border_01(@border_width){border:solid red @border_width;}

　　　　　　　　.border_02(@border_width:10px){border:solid green @border_width;}

　　　　　　调用：

　　　　　　　　.test{.border_01(30px);}

　　　　　　　　.test1{.border_02();}

 　　　匹配模式（类似于if else）：

　　　　例子：

　　　　　声明：　

　　　　//三角朝上

　　　　.triangle(top,@w:5px,@c:#ccc){border-width:@w;@border-color:transparent transparent @c transparent;border-style:dashed dashed solid dashed;}

　　　　//三角朝下

　　　　.triangle(bottom,@w:5px,@c:#ccc){border-width:@w;border-color:@c transparent transparent transparent ;border-style: dashed solid dashed dashed }

　　　　//三角朝左

　　　　.triangle(left,@w:5px,@c:#ccc){border-width:@w;@border-color:transparent @c transparent  transparent;border-style:dashed dashed  dashed solid;}

　　　　//三角朝右

　　　　.triangle(right,@w:5px,@c:#ccc){border-width:@w;border-color: transparent transparent transparent @c ;border-style:solid dashed dashed dashed }

@_:表明不管是调用哪个，我都会被带上(参数个数必须与上面相同)

　　.triangle(@_,@w:5px,@c:#ccc){width:0px;height:0px;overflow:hidden;}

　　　　调用：

　　　　.sanjiao{.triangle(top)}

　　2.3运算（+ — * %）

　　　　例子：@test：300px; .box_04{width:(@test + 20) *5;color:#ccc-10;}

　　2.4嵌套

　　　　<ul class=‘list‘><li><a><span></span></a></li></ul>

　　　　例子：.list{

　　　　　　　　width:600px;

　　　　　　　　li{

　　　　　　　　height:30px;

　　　　　　　　}　

　　　　　　　　a{

　　　　　　　　　　float:left;

　　　　　　　　　　//&代表上一层选择器

　　　　　　　　　　&:hover{color:red;}

　　　　　　　　}　

　　　　　　　　span{

　　　　　　　　float:right;

　　　　　　　　}

　　　　　　　}

　　[email protected]变量（包含了所有传递进来的参数，如果你不想单独处理每一个参数的话可以这样写）

　　　　例子：

　　　　　　.border_arg(@w:30px,@c:red,@xx:solid){border:@arguments}

　　　　　　.test_arg{.border_arg()} .test_arg{.border_arg(40px)}

　　2.6避免编译（有时候我们需要输出一些不正确的css语法或使用一些less不认识的专有语法。要输出这样的值时我们可以在字符串前加一个~）

　　　　例子：.test{width:~‘calc(300px-30px)‘;}

　　2.7!important

　　　　例子：

　　　　　　.border_rad(@w:30px,@h:40px){width:@w;height:@h}

　　　　　　.test_imp{.border_rad() !important;}