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

相关推荐