CSS 预处理语言之 less 篇

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.混合

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;
}

.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
.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.作用域

@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.避免编译

.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";