Less功能特性
(1)变量
我们常常在 CSS 中 看到同一个值重复多次,这样难易于代码维护
const bgColor="skyblue"; $(".post-content").css("background-color",bgColor); $("#wrap").css("background-color",bgColor); $(".arctive").css("background-color",bgColor);
只要我们修改 bgColor
这一个变量, 整个页面的背景颜色都会随之改变。而 Less 中的变量十分强大,可化万物,值得一提的是,其变量是常量 ,所以只能定义一次,不能重复使用。
①值变量
/* Less */ @color: #999; @bgColor: skyblue;//不要添加引号 @width: 50%; #wrap { color: @color; width: @width; } /* 生成后的 CSS */ #wrap { color: #999; width: 50%; }
以 @
开头 定义变量,并且使用时 直接 键入 @
名称。在平时工作中,我们就可以把 常用的变量 封装到一个文件中,这样利于代码组织维护。
@lightPrimaryColor: #c5cae9; @textPrimaryColor: #fff; @accentColor: rgb(99, 137, 185); @primaryTextColor: #646464; @secondaryTextColor: #000; @dividerColor: #b6b6b6; @borderColor: #dadada;
②选择器变量
让 选择器 变成 动态
/* Less */ @mySelector: #wrap; @Wrap: wrap; @{mySelector}{ //变量名 必须使用大括号包裹 color: #999; width: 50%; } .@{Wrap}{ color:#ccc; } #@{Wrap}{ color:#666; } /* 生成的 CSS */ #wrap{ color: #999; width: 50%; } .wrap{ color:#ccc; } #wrap{ color:#666; }
③属性变量
减少代码书写量
/* Less */ @borderStyle: border-style; @Soild:solid; #wrap{ @{borderStyle}: @Soild;//变量名 必须使用大括号包裹 } /* 生成的 CSS */ #wrap{ border-style:solid; }
④url变量、字符串插值
项目结构改变时,修改其变量即可。
/* Less */ @images: "../img";//需要加引号 body { background: url("@{images}/dog.png");//变量名 必须使用大括号包裹 } /* 生成的 CSS */ body { background: url("../img/dog.png"); }
⑤声明变量
有点类似于混合方法
结构: @name: { 属性: 值 ;};
使用:@name();
/* Less */ @background: {background:red;}; #main{ @background(); } @Rules:{ width: 200px; height: 200px; border: solid 1px red; }; #con{ @Rules(); } /* 生成的 CSS */ #main{ background:red; } #con{ width: 200px; height: 200px; border: solid 1px red; }
⑥变量运算
加减法时 以第一个数据的单位为基准
乘除法时 注意单位一定要统一
<p class="opration">变量运算</p> @opration:opration; @oprationWidth:200px; @oprationHeight:200px; @oprationColor:#222; .opration{ background: @oprationColor*2;//#444444 width: ((@oprationWidth)-20)*5;//900 height:(@oprationHeight)+20;//220 }
⑦变量作用域
注意:就近原则
@scrop:scrop; @h1:@h2; @h2:80%; #@{scrop}{ background:yellowgreen; width: @h1; @h2:80%; }
⑧用变量定义变量
/* Less */ @variable:#variable; @speak:"name"; @name:"content展示:你好我叫熊熊"; @{variable}{ color: red; } @{variable}::after{ content: @@speak; color: green; } /* 生成的CSS */ #variable::after { content: "content展示:你好我叫熊熊"; color: green; }
(2)嵌套Nesting
①Less使您能够使用嵌套代替或与级联结合使用。 假设我们有以下CSS:
#header { color: black; } #header .navigation { font-size: 12px; } #header .logo { width: 300px; }
在Less中,我们也可以这样写:
#header { color: black; .navigation { font-size: 12px; } .logo { width: 300px; } }
生成的代码更简洁,并模仿HTML的结构。
②&的妙用
demo1:
还可以使用此方法将伪选择器与mixins捆绑在一起。 这是经典的clearfix hack清除浮动,重写为mixin(&表示当前的选择器父级):
.clearfix { display: block; zoom: 1; &:after { content: " "; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; } }
demo2:
/* Less */ #header{ &:after{ content:"Less is more!"; } .title{ font-weight:bold; } &_content{//理解方式:直接把 & 替换成 #header margin:20px; } } /* 生成的 CSS */ #header::after{ content:"Less is more!"; } #header .title{ //嵌套了 font-weight:bold; } #header_content{//没有嵌套! margin:20px; }
③媒体查询
在以往的工作中,我们使用 媒体查询,都要把一个元素 分开写
#wrap{ width:500px; } @media screen and (max-width:768px){ #wrap{ width:100px; } }
Less 提供了一个十分便捷的方式
/* Less */ #main{ //something... @media screen{ @media (max-width:768px){ width:100px; } } @media tv { width:2000px; } } /* 生成的 CSS */ @media screen and (maxwidth:768px){ #main{ width:100px; } } @media tv{ #main{ width:2000px; } }
唯一的缺点就是 每一个元素都会编译出自己 @media
声明,并不会合并。
④实战技巧
可以借助 Less 在元素中,去定义自己的私有样式
/* Less */ #main{ // something.. &.show{ display:block; } } .show{ display:none; } /*CSS结果*/ #main.show{ display:block; } .show{ display:none; //会被覆盖。 }
(3)混合
①无参数方法
方法犹如 声明的集合,使用时 直接键入名称即可
/* Less */ .card { // 等价于 .card() background: #f6f6f6; -webkit-box-shadow: 0 1px 2px rgba(151, 151, 151, .58); box-shadow: 0 1px 2px rgba(151, 151, 151, .58); } #wrap{ .card;//等价于.card(); } /* 生成的 CSS */ #wrap{ background: #f6f6f6; -webkit-box-shadow: 0 1px 2px rgba(151, 151, 151, .58); box-shadow: 0 1px 2px rgba(151, 151, 151, .58); }
其中 .card
与 .card()
是等价的。个人建议,为了避免 代码混淆,最好写成 :
.card(){ //something... } #wrap{ .card(); }
要点:
`.` 与 `#` 皆可作为 方法前缀。
方法后写不写 `()` 看个人习惯。
②默认参数方法
Less 可以使用默认参数,如果 没有传参数,那么将使用默认参数。
@arguments
犹如 JS 中的 arguments
指代的是 全部参数。
传的参数中 必须带着单位。
/* Less */ .border(@a:10px,@b:50px,@c:30px,@color:#000){ border:solid 1px @color; box-shadow: @arguments;//指代的是 全部参数 } #main{ .border(0px,5px,30px,red);//必须带着单位 } #wrap{ .border(0px); } #content{ .border;//等价于 .border() } /* 生成的 CSS */ #main{ border:solid 1px red; box-shadow:0px,5px,30px,red; } #wrap{ border:solid 1px #000; box-shadow: 0px 50px 30px #000; } #content{ border:solid 1px #000; box-shadow: 10px 50px 30px #000; }
(4)作用域Scope
Less中的Scope与CSS的范围非常相似。 变量和mixin首先在本地查找,如果找不到它们,它将继承自“父”范围。
<div id="page"> 作用域 <p id="header">头部</p> </div> /* 作用域 */ @var: red; #page{ @var: green; #header { color: @var; // green } }
如果本地没有则会继承父级,即变为red红色。
与CSS自定义属性一样,mixin和变量定义不必放在引用它们的行之前。 因此,以下Less代码与前一个示例相同:
/* 作用域 */ @var: red; #page{ #header { color: @var; // green } @var: green; }
(5)注释comments
注释分为行注释和块注释,即单行注释和多行注释。
/* 一个块注释 * style comment! */ @var: red; // 这一行被注释掉了! @var: white;
(6)运算(Operations)
算术运算+, - ,*,/可以对任何数字,颜色或变量进行操作。 如果可能,数学运算会考虑单位并在添加,减去或比较数字之前转换数字。
(7)命名空间
有时候,你可能为了更好组织CSS或者单纯是为了更好的封装,将一些变量或者混合模块打包起来, 你可以像下面这样在#bundle中定义一些属性集之后可以重复使用
#bundle { .button () { display: block; border: 1px solid black; background-color: grey; &:hover { background-color: white } } .tab { ... } .citation { ... } }
你只需要在 #header a中像这样引入 .button:
#header a { color: orange; #bundle > .button; }
.