好好再整理一下Less知识吧

朴灿烈づ我的快乐病毒、 2022-07-18 01:13 162阅读 0赞

一、什么是Less  
　 css的Less好比是js的Jquery，可以让人们更方遍快捷的使用css，使css代码更简洁，可以减少重复的代码，减少开发人员的工作量。  
　　Less CSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。  
　　Less中文手册：less.bootcss.com

二、编译工具  
　　1.Koala：国人开发的LESS/SASS编译工具  
　　　下载地址：[http://koala-app.com/index-zh.html][http_koala-app.com_index-zh.html]  
　　2.Node.js库  
　　3.浏览器端使用

三、koala配置及使用  
　　1.新建后缀为.less文件：index.less  
　　　头部写上：@charset “utf-8”; 　　//设定字符集  
　　2.把文件夹拖到koala中，设置输出路径为style下的index.css  
　　 使用koala进行编译，然后就生成了一个index.css文件。  
　　3.之后我们只要编辑index.less文件即可。

四、注释  
　　1./*编译后会被保留*/  
　　2.//编译后不会被保留

五、变量  
　　1.设定变量：  
　　@text\_width: 300px;  
　　2.使用变量：示例如下

.box\{  
　　　　width: @text\_width;  
　　　　height: @text\_width;  
　　　　background: \#000;  
　　\}

六、混合  
　　1.混合简介：与原有的在class中新追加class的方法有所不同（原有

），使用Less的混合功能后，只要声明.border后，在.box中加　　入.border;即可。  
　　使用示例一：

.box\{  
　　　　width: @text\_width;  
　　　　height: @text\_width;  
　　　　background: \#000;  
　　　　.border;  
　　\}  
　　.border\{  
　　　　border: 5px solid yellow;  
　　\}  
　　使用示例二：新增一个box2，但是它和box1只有一点点细微的区别，可以直接拿来box1使用，然后加上它自己的样式。  
　　.box2\{  
　　　　.box1;  
　　　　margin-left: 100px;  
　　\}  
　　2.混合是可以带参数的  
　　在index.less中使用带参数的值，在border\_02后面加一个（），里面声明一个变量；  
　　然后传入参数30px。  
　　  
\[图片\]  
　　在编译后的index.css文件中，带参数的变量不显示  
　　  
\[图片\]  
　　3.混合也可以带默认值  
　　在border\_03后面加一个（），里面声明一个变量，变量后面附一个初始值“:10px”；  
　　如果不想用默认值，只要在text\_hunhe下的border\_03的()中写入值即可。  
　　默认值必须带（），不然会报错。  
　　  
\[图片\]  
　　4.混合高级使用示例，兼容性也可以使用

\[图片\]  
　　在编译后的index.css文件中，展示如下  
　　  
\[图片\]

七、匹配模式  
　　1.简介：相当于js中的if，但不完全是  
　　2.示例  
　　先介绍一个画倒三角的方法

.sanjiao\{  
　　　　width: 0;  
　　　　height: 0;  
　　　　overflow: hidden;  
　　　　border-width: 10px;  
　　　　border-color: red transparent transparent transparent;  
　　　　border-style: solid dashed dashed dashed;  
　　\}  
　　匹配模式示例一：  
　　.triangle(top,@w:5px,@c:\#ccc)\{  
　　　　border-width: @w;  
　　　　border-color: @c transparent transparent transparent;  
　　　　border-style: solid dashed dashed dashed;  
　　\}  
　　.triangle(right,@w:5px,@c:\#ccc)\{  
　　　　border-width: @w;  
　　　　border-color: transparent @c transparent transparent;  
　　　　border-style: dashed solid dashed dashed;  
　　\}  
　　.triangle(bottom,@w:5px,@c:\#ccc)\{  
　　　　border-width: @w;  
　　　　border-color: transparent transparent @c transparent;  
　　　　border-style: dashed dashed solid dashed;  
　　\}  
　　.triangle(left,@w:5px,@c:\#ccc)\{  
　　　　border-width: @w;  
　　　　border-color: transparent transparent transparent @c;  
　　　　border-style: dashed dashed dashed solid;  
　　\}  
　　.triangle(@ *,@w:5px,@c:\#ccc)\{　　　　// @* 是固定格式，表示不管你匹配到谁，都会带上这些内容  
　　　　width: 0;  
　　　　height: 0;  
　　　　overflow: hidden;  
　　\}  
　　.sanjiao\{  
　　　　.triangle(right,100px);  
　　\}  
　　匹配模式示例二：  
　　匹配模式定位  
　　.pos(r)\{position:relative;\}  
　　.pos(a)\{position:absolute;\}  
　　.pos(f)\{position:fixed;\}  
　　.posi\{  
　　　　width: 100px;  
　　　　height: 100px;  
　　　　background: blue;  
　　　　.pos(r);  
　　\}

八、运算  
　　1.less中的运算可以是任何数字、颜色、变量，运算要包裹在括号中。如：+ - \* /  
　　2.示例如下：  
　　@test\_01:300px;  
　　.box\_02\{  
　　　　width: (@test\_01 - 20) \* 5; 　　//未强制规定必须要带px单位，只要有一个带即可  
　　　　color: \#ccc - 10; //不太常用到  
　　\}

九、嵌套规则  
　　1.示例  
　　  
\[图片\]  
　  
　　原css　  
　　.list\{\}  
　　.list li\{\}  
　　.list a\{\}  
　　.list span\{\}  
　　使用Less嵌套：  
　　.list\{  
　　　　width: 600px;  
　　　　margin: 30px auto;  
　　　　padding: 0;  
　　　　list-style: none;  
　　　　font-size: 16px;　　　　li\{  
　　　　　　height: 30px;  
　　　　　　line-height: 30px;  
　　　　　　background: blue;  
　　　　　　margin-bottom: 5px;  
　　　　　　padding: 0 10px;  
　　　　\}  
　　　　a\{  
　　　　　　float: left;  
　　　　　　color: \#000;  
　　　　　　&:hover\{　　　　//&代表上一层选择器  
　　　　　　　　color: red;  
　　　　　　\}  
　　　　\}  
　　　　span\{  
　　　　　　float: right;  
　　　　\}  
　　\}

十、arguments变量  
　　.border\_arg(@w:30px,@c:\#ccc,@xx:solid)\{border:@arguments\} //省了一点点事儿，懒人必备  
　　.test\_arguments\{.border\_arg(40px);\}

十一、避免编译、!important  
　　1.避免编译：在我们需要输入一些不正确的css语法或者使用一些less不认识的专有语法时使用。在字符串前加上一个~即可  
　　.test\_03\{  
　　　　width: ~’calc(300px - 30px)’; //~’…’避免编译，把单引号里的内容按照原样传给浏览器  
　　\}  
　　2.!important关键字：适合用来调试，一般不会用到  
　　.test\_important\{  
　　　　.box !important;　　　　//给所有样式加上!important  
　　\}

十二、定义全局设置：  
在less.js引入前加入一段js语句定义less全局编译设置

less = \{ env: "development", // or "production" async: false, // load imports async fileAsync: false, // load imports async when in a page under // a file protocol poll: 1000, // when in watch mode, time in ms between polls functions: \{\}, // user functions, keyed by name dumpLineNumbers: "comments", // or "mediaQuery" or "all" relativeUrls: false,// whether to adjust url's to be relative // if false, url's are already relative to the // entry less file rootpath: ":/a.com/"// a path to add on to the start of every url //resource \};

十三、  
定义变量：  
@color:red;  
Body\{background-color:@color\};  
定义的变量应用没有前后顺序要求，为了阅读方便，最好能将变量定义在应用该变量的地方前面

十四、

定义函数：  
官方文档上称之为类，我觉得更像一个函数定义的方式  
.default(@color)\{  
background-color:@color;  
border:1px solid @color;  
\}  
这样就定义了一个函数default，前面的.必须加上，使用这个函数就直接在要使用这个样式的元素后调用就可以  
.con1\{default(red)\};  
这样就给class为con1的元素使用了函数default定义的一组样式，background-color和border的颜色为红色

函数的参数可以设定一个默认值，调用的时候不传值，就使用默认值  
.default(@color：red)\{  
background-color:@color;  
border:1px solid @color;  
\}

还可以定义一个变量，然后在函数定义的时候直接传变量  
@re:red;  
@ye:yellow;

.con1\{default(@ye)\};  
.con2\{default(@re)\};

函数体内定义的变量作用域也只是函数体内，  
@yu:pink;  
@col:yellow;  
.default(@color)\{  
@yu:red;  
background-color:@color;  
border:1px solid @yu;  
\}  
.default2(@color)\{  
@yu:yellow;  
background-color:@color;  
border:1px solid @yu;  
\}

.con1\{.default(@col)\};  
.con2\{.default2(@yu)\};

还可以使用@arguments来引用所有传入的变量  
.border(@a,@b,@color:blue)\{  
border:@arguments;  
\}

.con2\{.border(1px,solid)\}  
输出为：.con2\{1px solid blue\}

还可以使用参数的控制位来控制相同的类输出不同的样式  
.border(cool,@color)\{  
border:2px solid @color;  
\}  
.border(hot,@color)\{  
border:1px solid @color  
\}  
.border(@\_,@ye)\{  
color:@ye;  
\}

调用：  
.con2\{.border(hot,red)\}  
.con1\{.border(cool,blue)\}  
输出为：.con2(border:1px solid red;color:red)  
.con1\{border:2px solid blue;color:blue\}

或者使用参数个数来控制输出那个类：  
.border(@a)\{….\}  
.border(@a,@b)\{…\}  
如果传入一个参数则调用第一个定义，传入2个则调用第二个定义

十五、

层级嵌套定义：  
比如class为con1的div下的ul下的li项中的a链接hover的color为red,不加下划线  
div.con1\{  
ul\{  
li\{  
a\{text-decoration: none;  
&:hover\{color:red\};  
\}  
\}  
\}  
\}

十六、  
条件语句判断：  
可以在类函数定义时候使用条件判断  
.border(@a) when (@a>10),(@a<3)\{  
border:@a solid blue;  
\}  
.con1\{.border(5px)\}  
这里的条件是大于10或者小于3，所以调用不成立

.border(@a) when (@a>10) and (@a<15)\{  
border:@a solid blue;  
\}  
.con1\{.border(12px)\}  
这里的条件是大于10并且小于15 ，调用成立，条件语句中那个px可以加也可以不加，判断都通过

还可以使用内置函数unit来增加或者取出单位  
.border(@a) \{  
border:unit(@a,px) solid red;  
\}  
.con2\{.border(5)\}  
输出 .con2\{border:5px solid red;\},如果写成unit(5px) 则去掉单位输出5

&可以用于代表父选择器  
p \{ font-size: 12px;  
a \{ text-decoration: none;  
&:hover \{ border-width: 1px \}  
\}  
代表了：  
p \{  
font-size: 12px;  
\}  
p a \{  
text-decoration: none;  
\}  
p a:hover \{  
border-width: 1px;  
\}

十七、  
LESS内置函数：  
除了上面介绍的unit外  
ceil(@number); // 向上取整  
floor(@number); // 向下取整  
percentage(@number); // 将浮点数转换为百分比，例如 0.5 -> 50%  
round(number, \[places: 0\]); // 四舍五入取整  
saturate(@color, 10%); // 饱和度增加 10%  
desaturate(@color, 10%); // 饱和度降低 10%  
lighten(@color, 10%); // 亮度增加 10%  
darken(@color, 10%); // 亮度降低 10%  
fadein(@color, 10%); // 透明度增加 10%  
fadeout(@color, 10%); // 透明度降低 10%

[http_koala-app.com_index-zh.html]: http://koala-app.com/index-zh.html