CSS 预处理语言之 less 篇

less

前言

安装

客户端使用

// 引入 .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>

服务端使用

// 安装 （通过 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
@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 ~";
}

2.混合

1）.无参调用

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

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

数量不定的参数

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

4.运算

// 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. 继承

// 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）.引导 (根据表达式进行匹配)

// 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) { ... }

.mixin (@a, @b: 0) when (isnumber(@b)) { ... }

// 常见的检测函式：
iscolor
isnumber
isstring
iskeyword
isurl

// 判断一个值是纯数字，还是某个单位量
ispixel
ispercentage
isem

.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }
.mixin (@b) when not (@b > 0) { ... }

9.命名空间

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

10.作用域

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

#footer {
  color: @var; // red
}

11.字符串插值

@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 表达式

// 可以通过反引号的方式使用
@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";