less
前言
Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。
安装
客户端使用
// 引入 .less 文件，rel 属性值为：“stylesheet/less”
<link rel="stylesheet/less" type="text/css" href="index.less">
// 在引入 .less 文件之后，引入 less.js 文件，官网下载或者使用CDN;
<script src="https://cdn.bootcss.com/less.js/3.9.0/less.js" type="text/javascript"></script>
监控模式
是客户端的一个功能，当改变样式的时候，客户端将自动刷新。
使用：只需在URL后面加上'
#!watch'，然后刷新页面就可以了。
服务端使用
// 安装 （通过 npm）
> npm install less ( npm install less@latest // 安装最新稳定版本 )
// 使用
// 在node中调用编译器
var less = require("less");
less.render(".class{color:#184e1}", function(e, css){
console.log(css);
})
// 输出
.class {
color:#184e1;
}
// 在命令行下使用
> lessc index.less > index.css
// ( 如何要将编译后的 CSS 压缩掉，那么加一个 -x 参数就可以了.)
详情请点击 less 官网 。
语法
1.变量
Less 变量 ：
以
@开头 定义变量允许我们定义一系列通用样式，在需要的地方调用。
后期调整全局样式|主题的时候，只需修改几行代码就可以，方便快捷，易于维护。
// less
@boxW:1220px;
.container{
width : @boxW;
}
// 生成css
.container{
width : 1220px;
}
属性变量
// less
@borderStyle: border-style;
@Soild:solid;
#wrap{
@{borderStyle}: @Soild;//变量名 必须使用大括号包裹
}
// 生成的 CSS
#wrap{
border-style:solid;
}
使用变量名定义变量
// less
@say:" Hello Less ~";
@var:"say";
.el{
content: @@var;
}
// 生成css
.el {
content: " Hello Less ~";
}
[注]：当变量作为选择器、属性、URL变量时，变量名 必须使用大括号包裹
2.混合
Less 混合 ：可以将一个定义好的 style1 引入到另一个 style 中，使后者继承前者的所有属性
.与#皆可作为 方法前缀。
1）.无参调用
定义一些通用的属性集为一个class，然后在另一个class中去调用这些属性
// less
.br2 { border-radius: 2px; } // 这样定义，.br2 会暴露到 css 中
button{
width:100px;
height:50px;
.br2; // 等价于 .br2();
}
// 生成css
button {
width: 100px;
height: 50px;
border-radius: 2px;
}
2）.带参调用
可以像函数一样定义一个带参数的属性集合:
// less
.mt(@mt) { margin-top: @mt; }
.mb(@mb) { margin-bottom: @mb; }
div{
.mt(10px);
.mb(20px)
}
// 生成css
div {
margin-top: 10px;
margin-bottom: 20px;
}
给参数设置默认值
// less
.mt(@mt:10px) { margin-top: @mt; }
.mb() { margin-bottom: 20px; } // 这样定义，.mb 不会暴露到 css 中
div{
.mt;
.mb;
}
// 生成css
div {
margin-top: 10px;
margin-bottom: 20px;
}
[注]：在 Less 中定义的不带参属性集合，如果想隐藏这个集合( 即 不让它暴露到css 中)，但可以在其他地方引用，可以这样写：
.mb { margin-bottom: 20px; } 要写成 .mb() { margin-bottom: 20px; }
@arguments 变量
@arguments 变量 包含了所有传递进来的参数
// less
.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
box-shadow: @arguments;
}
.el{
.box-shadow(2px, 5px);
}
// 生成css
.el{
box-shadow: 2px 5px 1px #000;
}
数量不定的参数
如果你希望你的方法接受数量不定的参数，你可以使用... ，犹如 ES6 的扩展运算符。
// less
.boxShadow(...){
box-shadow: @arguments;
}
.textShadow(@a,...){
text-shadow: @arguments;
}
#main{
.boxShadow(1px,4px,30px,red);
.textShadow(1px,4px,30px,red);
}
// 生成 CSS
#main{
box-shadow: 1px 4px 30px red;
text-shadow: 1px 4px 30px red;
}
循环方法( 递归实现 )
// less
.generate-columns(@n, @i: 1) when (@i =< @n) {
.column-@{i} {
width: (@i * 100% / @n);
}
.generate-columns(@n, (@i + 1));
}
.generate-columns(4);
// 生成 CSS
.column-1 {
width: 25%;
}
.column-2 {
width: 50%;
}
.column-3 {
width: 75%;
}
.column-4 {
width: 100%;
}
属性拼接
+_代表的是 空格；+代表的是 逗号。
// less
.boxShadow() {
box-shadow+: inset 0 0 10px #555;
}
.main {
.boxShadow();
box-shadow+: 0 0 20px black;
}
// 生成 CSS
.main {
box-shadow: inset 0 0 10px #555, 0 0 20px black;
}
///////////////////////////////
// less
.Animation() {
transform+_: scale(2);
}
.main {
.Animation();
transform+_: rotate(15deg);
}
// 生成 CSS
.main {
transform: scale(2) rotate(15deg);
}
3.嵌套
Less 嵌套 ：我们可以在父选择器中嵌套子选择器，实现子继承父。
优点：减少了代码量，是结构更加清晰。
// less
.btn-blue {
background-color: #118431;color: #fff;
p{ color:#1184e1; }
&:hover { background-color: #39a2ed; }
}
// 生成css
.btn-blue {
background-color: #118431;
color: #fff;
}
.btn-blue p {
color: #1184e1;
}
.btn-blue:hover {
background-color: #39a2ed;
}
& 符号：串联选择器时使用，代表的上一层选择器的名字。
此处例子中：& 直接替换为 .btn-blue 。
4.运算
Less 提供了加，减，乘，除操作，可以做属性值和颜色值的运算
// less
@v2-contWidth: 1220px;
@v2-m: 20px;
@v2-col-1:(@v2-contWidth - @v2-m * 11) / 12;
@v2-col-3:@v2-col-1 * 3 + @v2-m * 2;
.v2-col-1 { width: @v2-col-1; }
.v2-col-3 { width: @v2-col-3; }
// 生成css
.v2-col-1 {
width: 83.33333333px;
}
.v2-col-3 {
width: 290px;
}
[注]：- 加减法时 以第一个数据的单位为基准
- 乘除法时 注意单位一定要统一
5. 继承
extend 是 Less 的一个伪类。它可继承 所匹配声明中的全部样式。
// less
.par{
color:#1184e1;
.child{color:#333;}
}
.sib{
&:extend(.par);
}
// 生成css
.par, .sib {
color: #1184e1;
}
.par .child {
color: #333;
}
6.Color 函数
引用官网的例子
// return a color which is 10% *lighter* than @color
// 返回比@color轻10％*的颜色
lighten(@color, 10%);
// return a color which is 10% *darker* than @color
darken(@color, 10%);
// return a color 10% *more* saturated than @color
// 返回比@color饱和10％*以上的颜色
saturate(@color, 10%);
// return a color 10% *less* saturated than @color
desaturate(@color, 10%);
// return a color 10% *less* transparent than @color
// 返回比@color少10％*的颜色*透明
fadein(@color, 10%);
// return a color 10% *more* transparent than @color
fadeout(@color, 10%);
// return @color with 50% transparency
// 返回@color，透明度为50％
fade(@color, 50%);
// return a color with a 10 degree larger in hue than @color
// 返回颜色比@color大10度的颜色
spin(@color, 10);
// return a color with a 10 degree smaller hue than @color
spin(@color, -10);
// return a mix of @color1 and @color2
// 返回@ color1和@ color2的混合
mix(@color1, @color2);
7.Math 函数
引用官网的例子
round(1.67); // returns `2`
ceil(2.4); // returns `3`
floor(2.6); // returns `2`
// 将一个值转化为百分比
percentage(0.5); // returns `50%`
8.匹配| 引导
1）.匹配 (根据值和参数匹配)
只有被匹配的混合才会被使用。变量可以匹配任意的传入值，而变量以外的固定值就仅仅匹配与其相等的传入值。
// 语法
.mixin (@s, @color) { 。。。 }
.class {
.mixin(@switch, #888);
}
// 让.mixin根据不同的@switch值而输出内容
// less
.mixin (dark, @color) {
color: darken(@color, 10%);
}
.mixin (light, @color) {
color: lighten(@color, 10%);
}
.mixin (@_, @color) { // 如果匹配的参数 是变量，则将会匹配，如 `@_` 。
display: block;
}
@switch: light;
.class {
.mixin(@switch, #888);
}
// 生成css
.class {
color: #a2a2a2;
display: block;
}
2）.引导 (根据表达式进行匹配)
when关键字用以定义一个导引序列，来实现条件判断。
导引中可用的全部比较运算有： >、 >=、 =、 =<、 < 。
= 代表的是等于
// less
.posi (@posi, @bdw) when (@posi = 'top') {
border-top-width:@bdw;
}
.posi (@posi, @bdw) when (@posi = 'bottom') {
border-bottom-width:@bdw;
}
.line(@posi, @bdw){
.posi(@posi, @bdw);
}
.v2-line_t_s-e5{
.line('top', 1px);
}
.v2-line_b_s-e5{
.line('bottom', 10px);
}
// 生成css
.v2-line_t_s-e5 {
border-top-width: 1px;
}
.v2-line_b_s-e5 {
border-bottom-width: 10px;
}
导引序列使用逗号‘,’—分割，当且仅当所有条件都符合时，才会被视为匹配成功。
.mixin (@a) when (@a > 10), (@a < -10) { ... }
基于值的类型进行匹配，我们就可以使用is*函式
.mixin (@a, @b: 0) when (isnumber(@b)) { ... }
// 常见的检测函式：
iscolor
isnumber
isstring
iskeyword
isurl
// 判断一个值是纯数字，还是某个单位量
ispixel
ispercentage
isem
在导引序列中可以使用and关键字实现与条件；使用not关键字实现或条件
.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }
.mixin (@b) when not (@b > 0) { ... }
9.命名空间
为了更好组织CSS或者单纯是为了更好的封装，将一些变量或者混合模块打包起来，之后可以重复使用
#bundle {
.button () {
border: 1px solid black;
&:hover { background-color: white }
}
.tab { ... }
.citation { ... }
}
// #header 的子元素 a 有 .button 的样式，
// 可以这样：#header a 中引入 .button
#header a {
color: orange;
#bundle > .button;
}
-->
// 等价于
#header a {
color: orange;
#bundle;
.button;
}
<--
// 生成css
#header a {
color: orange;
border: 1px solid black;
}
#header a:hover {
background-color: #ffffff;
}
[注]：
1.父元素不能加 括号。如：#bundle > .button
2.不得单独使用命名空间的方法。如：.button // 会报错
10.作用域
LESS 中的作用域跟其他编程语言非常类似，首先会从本地查找变量或者混合模块，如果没找到的话会去父级作用域中查找，直到找到为止.
一句话理解就是：就近原则
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
#footer {
color: @var; // red
}
11.字符串插值
变量可以用类似ruby和php的方式嵌入到字符串中，像
@{name}这样的结构:
@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");
12.避免编译
有时候我们需要输出一些不正确的CSS语法或者使用一些 LESS不认识的专有语法.
要输出这样的值我们可以在字符串前加上一个
~将要避免编译的值用 “”包含起来，结构：
~' 值 '
.class {
filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}
// 输出为
.class {
filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
}
13. JavaScript 表达式
JavaScript 表达式也可以在.less 文件中使用。
// 可以通过反引号的方式使用
@var: `"hello".toUpperCase() + '!'`;
--> @var: "HELLO!";
// 可以同时使用字符串插值和避免编译
@str: "hello";
@var: ~`"@{str}".toUpperCase() + '!'`;
--> @var: HELLO!;
// 可以访问JavaScript环境
@height: `document.body.clientHeight`;
// 将一个JavaScript字符串解析成16进制的颜色值, 你可以使用 color 函数
@color: color(`window.colors.baseColor`);
@darkcolor: darken(@color, 10%);
14.其他
reference
// 使用@import (reference)导入外部文件，但不会添加 把导入的文件 编译到最终输出中，只引用。
@import (reference) "bs.less";
