理解以及使用less

2024-07-10 00:46| 来源: 网络整理| 查看: 265

一、 LESS是什么？ LESS将CSS赋予了动态语言的特性，如变量、继承、运算、函数。.LESS既可以在客户端上运行，也可以借助Node.js或者Rhino在服务端运行。将.less文件编译后为正常的css样式二、如何使用LESS 在html文件中引入less文件：引入Less.js文件：三、 LESS基础语法 1. 变量

① 声明变量：@变量名：值; ② 使用变量：@变量名

在定义以及使用变量时，当对同一变量二次赋值时，会有作用域的问题，导致二次赋值以后的所有使用都为新值。在给有单位的属性赋值时，变量赋值必须要带单位 @color1:red;//全局变量 .borderColr{ @radius:50%;//局部变量 background:@color1 border-radius:@radius } @color1:green;//二次赋值 .test{ border-radius:@radius;//报错radius为局部变量 background:@color1;//背景为绿色 } 2. 混合混合可以将一个定义好的class A轻松引入到另一个class B中，从而实现class B继承class A的所有样式。还可以带参调用，就和调用方法一样。不传参调用不需要带括号。传参调用需要带括号。arguments包含了所有传递进来的参数 //arguments .box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) { box-shadow: @arguments; -moz-box-shadow: @arguments; -webkit-box-shadow: @arguments; } .box-shadow(2px, 5px); @color1:red;//全局变量 .borderColor{ background:@color1; .borderRadius;//不传参调用，不需要带括号 .height(200px);//传参调用，需要带括号。 } .borderRadius(@r:10px){ border-radius:@r; } .height(@h:100px){ height:@h; } //混合编译后的.borderColor .borderColor{ background:red; border-radius:10px; height:200px; } 3. 嵌套规则我们可以在一个选择器里嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。&代表本身，若在一个选择器中添加&:hover代表给本身添加hover样式 #header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } } } //生成的css #header h1 { font-size: 26px; font-weight: bold; } #header p { font-size: 12px; } #header p a { text-decoration: none; } #header p a:hover { border-width: 1px; } 4. 加减运算运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系属性值的加减运算是带单位运算。颜色的运算时符号和值之间必须要有空格，否则报错，eg：错误：@bgcolor-@bgcolor2；正确：@bgcolor - @bgcolor2 @w:100px; @h:100px; @bgcolor:#ff0000; @bgcolor2:#009991; .sn{ width: @w*2;//200px height: @h*2;//200px border: 1px solid @color; background-color: @bgcolor - @bgcolor2; } 5. 颜色的函数 lighten(color,百分比)：100%为白色，0%为原色。百分比越大颜色越亮dark(color,百分比)：100%为黑色，0%为原色。百分比越大颜色越暗saturate(color，百分比)：增大饱和度。但给普通颜色设置饱和度无变化。给hsl(..,..,..)设置饱和度有变化desaturate(color，百分比)：降低饱和度fadein(颜色，百分比)：增加颜色的不透明度fadeout(颜色,百分比)：减少颜色的不透明度spin(颜色，度数)：度数为数字。用于旋转所选颜色的角度（在颜色拼盘上逆时针旋转）mix(color1,color2)：混合两个颜色 6. Math函数

不可用下面三个函数拼接字符串给属性赋值（会在数字和字符串间自动生成一个空格）。但可直接用于相加减，也可直接对带px单位的属性做运算

round(num)：四舍五入ceil(num)：向上取整floor(num)：向下取整percentage(num):将一个数转成百分比 @a:round(200.6); @height:200.266px; @height:round(200.6)px;//错误，生成的为200 px .sx{ height: round(@height);//200px height:round(@height)+@a;//400px height:@a+"px";//错误，生成201 "px" border:1px solid #fff000; } 7. 命名空间（命名空间起名称可用：以./#开头）

有时为了更好地封装或组织css，可将其放入一个命名空间中

#hello{//命名空间 .borderColor(@c:#ff0){ border:1px solid @c; } } .se{ height: round(@height)+@a; #hello>.borderColor(#000);//使用命名空间中的样式 } 8. 字符串插值：可将变量通过@{变量名}的方式嵌入到字符串中 @base-url: "http://assets.fnord.com"; background-image: url("@{base-url}/images/bg.png"); //编译完成后为http://assets.fnord.com/images/bg.png 9. 避免编译：加上~可不对后面的内容进行编译有时我们需要输出一些不正确的css语法或者使用一些less不认识的专有语法，需要使用~，将其后面的内容不进行编译而直接输出字符串可用""将避免编译的内容包含起来 .class { filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()"; } //生成css的结果为 .class { filter: ms:alwaysHasItsOwnSyntax.For.Stuff(); } 10.模式匹配和导引表达式 ① 模式匹配可根据不同的赋值起到模式匹配的作用。只有被匹配的混合才会被使用。变量可以匹配任意的传入值，而变量以外的固定值就仅仅匹配与其相等的传入值。下例中，mixin、switch都是名称，可换。默认匹配的参数名也可换 //在下面例子中，可根据@switch的值取不同的.mixin，.mixin(@_,@color)代表无论@switch为什么值都会匹配 //假如@switch为dark，则会取第一个样式 @switch:dark; .mixin (dark, @color) { //只接受dark作为首参 color: darken(@color, 10%); } .mixin (light, @color) { //只接受light作为首参 color: lighten(@color, 10%); } .mixin (@_, @color) { //无论首参为什么都会被匹配 display: block; } .class { .mixin(@switch, #888); } //上述例子编译后的CSS .class { display: block; color: darken(#888, 10%); } ② 导引 when关键字被定义为一个导引序列，只有当when括号中的判断为真时才会采用该混合，否则不采用导引中可用运算符：>、=、

【本文地址】

理解以及使用less

理解以及使用less

今日新闻

推荐新闻