如何使用less(变量,混合,匹配,运算,嵌套...)

2023-10-13 02:07| 来源: 网络整理| 查看: 265

如何使用less及一些常用的(变量,混合,匹配,运算,嵌套...) less的介绍及编译工具什么是less

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

less的编译工具

Koala 考拉 --编译的时候如果没有建CSS文件夹 Koala会自动给你生成一个如何设置语言如何编译 -

让webstorm支持less编译:

安装node.js --- 这是一个包管理工具以后还会用到 WIN+R 输入 npm install less

.....

less的语法 Ps:下面的知识点会用到上面的知识点 (比如说在混合中会用到变量加深印象_)

注释

// 只在less中显示 /**/ 会在编译好的css文件中显示

变量

定义变量用@ less中的写法 @ly_width:100px; .box { width:@ly_width; } 编译后在css中显示的是 .box { width:100px; }

混合

不带参数的混合先上less中的代码如果想在.one中应用.border的样式怎么办? @ly_width:100px; @ly_height:200px; @ly_color:green; .border { border:1px solid red; } .one { width:@ly_width; height:@ly_height; background-color:@ly_color; } 写成下面的样子 @ly_width:100px; @ly_height:200px; @ly_color:green; .border { border:1px solid red; } .one { width:@ly_width; height:@ly_height; background-color:@ly_color; .border; } 编译后在css中显示的是 .border { border:1px solid red; } .one { width: 100px; height: 200px; background-color: #008000; border: 1px solid red; } ``` 带参数的混合---不带默认值 (可以传多个参数,以逗号或者分号隔开,推荐用分号下面以一个参数为例) less中的写法 @ly_width:100px; @ly_height:200px; @ly_color:green; .border(@border_width) { border:@border_width solid red; } .one { width:@ly_width; height:@ly_height; background-color:@ly_color; .border(1px); } 编译后在css中显示的是 .one { width: 100px; height: 200px; background-color: #008000; border: 1px solid #ff0000; } 带参数的混合---带默认值 (可以传多个参数下面以一个参数为例) less中的写法 @ly_width:100px; @ly_height:200px; @ly_color:green; .border(@border_width:3px;) { border:@border_width solid red; } .one { width:@ly_width; height:@ly_height; background-color:@ly_color; .border(); } 编译后在css中显示的是 .one { width: 100px; height: 200px; background-color: #008000; border: 3px solid #ff0000; } 在解决css3兼容性时候经常用到解决border-radius兼容 .border_radius (@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; -ms-border-radius: @radius; -o-border-radius: @radius; border-radius: @radius; }

匹配模式

可以理解成if 和上面的混合有些相似 less中的写法 //定义上,下,左,右边框的样式 .border(top;@border_width:5px;@border_color:red){ border-top:@border_width solid @border_color; } .border(bottom;@border_width:5px;@border_color:red){ border-bottom:@border_width solid @border_color; } .border(left;@border_width:5px;@border_color:red){ border-left:@border_width solid @border_color; } .border(right;@border_width:5px;@border_color:red){ border-right:@border_width solid @border_color; } //如果想写通用的样式可以在下面的代码中写格式是固定的 .border(@_,@border_width:5px;@border_color:red){ border-color:yellow; } .border_use1 { //选择和if差不多如果是left就调用上面对应的 .border(left); } .border_use2 { //选择和if差不多如果是right就调用上面对应的 .border(right); } 编译后在css中显示的是 .border_use1 { border-left:5px solid #ff0000; border-color:yellow; } .border_use2 { border-right:5px solid #ff0000; border-color:yellow; }

运算

运算提供了加,减,乘,除操作,还可以做属性值和颜色的运算... less中的写法 @ly_width:100px; .one { width:@ly_widht + 100; } 编译后在css中显示的是 .one { width:200px; }

嵌套

可以在一个选择器中嵌套另一个选择器,代码看起来层次分明,提高代码可维护性 html结构 less中的写法 @ly_width:100px; @ly_height:200px; @ly_color:red; .one { width:@ly_width; height:@ly_height; background-color:@ly_color; .two { background-color: green; } } 编译后在css中显示的是 .one { width: 100px; height: 200px; background-color: #ff0000; } .one .two { background-color: green; }

@arguments变量

可以包含所有的变量,将变量一起处理 less中的写法 //和前面提到的混合一起举个栗子 .border(@border_width;@border_style;@border_color){ border:@arguments; } .one { .border(1px;solid;red); } 编译后在css中显示的是 .one { border:1px solid #ff0000; }

【本文地址】

公司简介

联系我们