LESS使用教程

灰太狼 2022-05-19 02:46 290阅读 0赞

# LESS使用教程 #

*  第一章 LESS简介  
    
    
     *  第一节 变量
     *  第二节 混合
     *  第三节 嵌套规则
     *  第四节 函数 运算
 *  第二章 使用  
    
    
     *  第一节 客户端使用
     *  第二节 服务端使用
 *  第三章 语法  
    
    
     *  第一节 变量
     *  第二节 混合用法
     *  第三节 带参数混合
     *  第四节 嵌套规则
     *  第五节 运算
     *  第六节 作用域
     *  第七节 注释
     *  第八节 避免编译

# 第一章 LESS简介 #

> less是一种动态样式语言；为提高css应用的灵活性和效率；  
> LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承， 运算， 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。

## 第一节 变量 ##

> 变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。

// LESS
    @color: #4D926F;
    #header {
      color: @color;
    }
    h2 {
      color: @color;
    }
    
    /* 生成的 CSS */
    #header {
      color: #4D926F;
    }
    h2 {
      color: #4D926F;
    }

## 第二节 混合 ##

> 混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。

// LESS
    .rounded-corners (@radius: 5px) {
      border-radius: @radius;
      -webkit-border-radius: @radius;
      -moz-border-radius: @radius;
    }
    #header {
      .rounded-corners;
    }
    #footer {
      .rounded-corners(10px);
    }
    
    /* 生成的 CSS */
    #header {
      border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
    }
    #footer {
      border-radius: 10px;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
    }

## 第三节 嵌套规则 ##

> 我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。

// LESS
    #header {
      h1 {
        font-size: 26px;
        font-weight: bold;
      }
      p { font-size: 12px;
        a { text-decoration: none;
          &:hover { border-width: 1px }
        }
      }
    }
    
    /* 生成的 CSS */
    #header h1 {
      font-size: 26px;
      font-weight: bold;
    }
    #header p {
      font-size: 12px;
    }
    #header p a {
      text-decoration: none;
    }
    #header p a:hover {
      border-width: 1px;
    }

## 第四节 函数 & 运算 ##

> 运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码，如果你愿意的话可以操作属性值。

// LESS
    @the-border: 1px;
    @base-color: #111;
    @red:        #842210;
    #header {
      color: @base-color * 3;
      border-left: @the-border;
      border-right: @the-border * 2;
    }
    #footer { 
      color: @base-color + #003300;
      border-color: desaturate(@red, 10%);
    }
    
    /* 生成的 CSS */
    #header {
      color: #333;
      border-left: 1px;
      border-right: 2px;
    }
    #footer { 
      color: #114411;
      border-color: #7d2717;
    }

# 第二章 使用 #

## 第一节 客户端使用 ##

引入 `.less` 样式文件的时候要注意设置 rel 属性值为 `“stylesheet/less”`:

link rel="stylesheet/less" type="text/css" href="styles.less">

然后将下载的 `less.js` 文件, 在`head`中引入:

**注意你的less样式文件一定要在引入less.js前先引入。**

备注：请在服务器环境下使用！本地直接打开可能会报错！

## 第二节 服务端使用 ##

**安装**  
在服务器端安装 LESS 的最简单方式就是通过 npm(node 的包管理器), 像这样:

$ npm install less

如果你想下载最新稳定版本的 LESS，可以尝试像下面这样操作:

$ npm install less@latest

# 第三章 语法 #

## 第一节 变量 ##

> LESS 做为 CSS 的一种形式的扩展，它并没有阉割 CSS 的功能，而是在现有的 CSS 语法上，添加了很多额外的功能！

**例：**

@nice-blue: #5B83AD;
    @light-blue: @nice-blue + #111;
    
    #header { color: @light-blue; }
    //输出:
    #header { color: #6c94be; }

## 第二节 混合用法 ##

> 在 LESS 中我们可以定义一些class作为属性的集合，然后在另一个class中去调用这个类名，就等同于调用这些属性了！

**例：**

.bordered {
      border-top: dotted 1px black;
      border-bottom: solid 2px black;
    }
    
    //那如果我们现在需要在其他class中引入那些通用的属性集，那么我们只需要在任何class中像下面这样调用就可以了:
    
    #menu a {
      color: #111;
      .bordered;
    }
    .post a {
      color: red;
      .bordered;
    }
    
    //.bordered class里面的属性样式都会在 #menu a 和 .post a中体现出来:
    
    #menu a {
      color: #111;
      border-top: dotted 1px black;
      border-bottom: solid 2px black;
    }
    .post a {
      color: red;
      border-top: dotted 1px black;
      border-bottom: solid 2px black;
    }

**任何 CSS class, id 或者 元素 属性集都可以以同样的方式引入**

## 第三节 带参数混合 ##

> 在 LESS 中，还可以像函数一样定义一个带参数的属性集合:

.border-radius (@radius) {
      border-radius: @radius;
      -moz-border-radius: @radius;
      -webkit-border-radius: @radius;
    }

然后在其他class中像这样调用它:

#header {
      .border-radius(4px);
    }
    .button {
      .border-radius(6px);  
    }

我们还可以像这样给参数设置默认值:

.border-radius (@radius: 5px) {
      border-radius: @radius;
      -moz-border-radius: @radius;
      -webkit-border-radius: @radius;
    }

所以现在如果我们像这样调用它的话:

#header {
      .border-radius;  
    }

radius的值就会是5px.  
你也可以定义不带参数属性集合,如果你想隐藏这个属性集合，不让它暴露到CSS中去，但是你还想在其他的属性集合中引用，你会发现这个方法非常的好用:

.wrap () {
      text-wrap: wrap;
      white-space: pre-wrap;
      white-space: -moz-pre-wrap;
      word-wrap: break-word;
    }
    
    pre { .wrap }

输出:

pre {
      text-wrap: wrap;
      white-space: pre-wrap;
      white-space: -moz-pre-wrap;
      word-wrap: break-word;
    }

@arguments 变量  
@arguments包含了所有传递进来的参数. 如果你不想单独处理每一个参数的话就可以像这样写:

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
      box-shadow: @arguments;
      -moz-box-shadow: @arguments;
      -webkit-box-shadow: @arguments;
    }
    .box-shadow(2px, 5px);

将会输出:

box-shadow: 2px 5px 1px #000;
      -moz-box-shadow: 2px 5px 1px #000;
      -webkit-box-shadow: 2px 5px 1px #000;

## 第四节 嵌套规则 ##

LESS 可以以嵌套的方式编写层叠样式，就像写结构一样

#header { color: black; }
    #header .navigation {
      font-size: 12px;
    }
    #header .logo { 
      width: 300px; 
    }
    #header .logo:hover {
      text-decoration: none;
    }

在 LESS 中，就可以这样写:

#header {
      color: black;
    
      .navigation {
        font-size: 12px;
      }
      .logo {
        width: 300px;
        &:hover { text-decoration: none }
      }
    }

或者这样写:

#header        { color: black;
      .navigation  { font-size: 12px }
      .logo        { width: 300px;
        &:hover    { text-decoration: none }
      }
    }

注意 `&` 符号的使用—如果你想写串联选择器，而不是写后代选择器，就可以用到`&`了. 这点对伪类尤其有用如 `:hover` 和 `:focus`  
例如:

.bordered {
      &.float {
        float: left; 
      }
      .top {
        margin: 5px; 
      }
    }

会输出

.bordered.float {
      float: left;  
    }
    .bordered .top {
      margin: 5px;
    }

## 第五节 运算 ##

任何数字、颜色或者变量都可以参与运算  
**例：**

@base: 5%;
    @filler: @base * 2;
    @other: @base + @filler;
    
    color: #888 / 4;
    background-color: @base-color + #111;
    height: 100% / 2 + @filler;

LESS 的运算已经超出了我们的期望，它能够分辨出颜色和单位。如果像下面这样单位运算的话:

@var: 1px + 5;

LESS 会输出 6px.  
括号也同样允许使用:

width: (@var + 5) * 2;

并且可以在复合属性中进行运算:

border: (@width * 2) solid black;

## 第六节 作用域 ##

跟其他编程语言非常类似，首先会从本地查找变量或者混合模块，如果没找到的话会去父级作用域中查找，直到找到为止.

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

## 第七节 注释 ##

与JS雷同

/* Hello, I'm a CSS-style comment */
    .class { color: black }
    
    LESS 同样也支持双斜线的注释, 但是编译成 CSS 的时候自动过滤掉:
    
    // Hi, I'm a silent comment, I won't show up in your CSS
    .class { color: white }

## 第八节 避免编译 ##

有时候我们需要输出一些不正确的CSS语法或者使用一些 LESS不认识的专有语法.  
要输出这样的值我们可以在字符串前加上一个 `~`  
例：

.class {
      filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
    }

我们可以将要避免编译的值用 “”包含起来，输出结果为:

.class {
      filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
    }*   [第一章 LESS简介](#第一章-less简介)
    *   [第一节 变量](#第一节-变量)
    *   [第二节 混合](#第二节-混合)
    *   [第三节 嵌套规则](#第三节-嵌套规则)
    *   [第四节 函数 运算](#第四节-函数-运算)

\* 第二章 使用  
\* 第一节 客户端使用  
\* 第二节 服务端使用  
\* 第三章 语法  
\* 第一节 变量  
\* 第二节 混合用法  
\* 第三节 带参数混合  
\* 第四节 嵌套规则  
\* 第五节 运算  
\* 第六节 作用域  
\* 第七节 注释  
\* 第八节 避免编译

# 第一章 LESS简介 #

## 第一节 变量 ##

> 变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。

## 第二节 混合 ##

## 第三节 嵌套规则 ##

> 我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。

## 第四节 函数 & 运算 ##

# 第二章 使用 #

## 第一节 客户端使用 ##

引入 `.less` 样式文件的时候要注意设置 rel 属性值为 `“stylesheet/less”`:

link rel="stylesheet/less" type="text/css" href="styles.less">

然后将下载的 `less.js` 文件, 在`head`中引入:

**注意你的less样式文件一定要在引入less.js前先引入。**

备注：请在服务器环境下使用！本地直接打开可能会报错！

## 第二节 服务端使用 ##

**安装**  
在服务器端安装 LESS 的最简单方式就是通过 npm(node 的包管理器), 像这样:

$ npm install less

如果你想下载最新稳定版本的 LESS，可以尝试像下面这样操作:

$ npm install less@latest

# 第三章 语法 #

## 第一节 变量 ##

> LESS 做为 CSS 的一种形式的扩展，它并没有阉割 CSS 的功能，而是在现有的 CSS 语法上，添加了很多额外的功能！

**例：**

@nice-blue: #5B83AD;
    @light-blue: @nice-blue + #111;
    
    #header { color: @light-blue; }
    //输出:
    #header { color: #6c94be; }

## 第二节 混合用法 ##

> 在 LESS 中我们可以定义一些class作为属性的集合，然后在另一个class中去调用这个类名，就等同于调用这些属性了！

**例：**

**任何 CSS class, id 或者 元素 属性集都可以以同样的方式引入**

## 第三节 带参数混合 ##

> 在 LESS 中，还可以像函数一样定义一个带参数的属性集合:

.border-radius (@radius) {
      border-radius: @radius;
      -moz-border-radius: @radius;
      -webkit-border-radius: @radius;
    }

然后在其他class中像这样调用它:

#header {
      .border-radius(4px);
    }
    .button {
      .border-radius(6px);  
    }

我们还可以像这样给参数设置默认值:

.border-radius (@radius: 5px) {
      border-radius: @radius;
      -moz-border-radius: @radius;
      -webkit-border-radius: @radius;
    }

所以现在如果我们像这样调用它的话:

#header {
      .border-radius;  
    }

.wrap () {
      text-wrap: wrap;
      white-space: pre-wrap;
      white-space: -moz-pre-wrap;
      word-wrap: break-word;
    }
    
    pre { .wrap }

输出:

pre {
      text-wrap: wrap;
      white-space: pre-wrap;
      white-space: -moz-pre-wrap;
      word-wrap: break-word;
    }

@arguments 变量  
@arguments包含了所有传递进来的参数. 如果你不想单独处理每一个参数的话就可以像这样写:

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
      box-shadow: @arguments;
      -moz-box-shadow: @arguments;
      -webkit-box-shadow: @arguments;
    }
    .box-shadow(2px, 5px);

将会输出:

box-shadow: 2px 5px 1px #000;
      -moz-box-shadow: 2px 5px 1px #000;
      -webkit-box-shadow: 2px 5px 1px #000;

## 第四节 嵌套规则 ##

LESS 可以以嵌套的方式编写层叠样式，就像写结构一样

#header { color: black; }
    #header .navigation {
      font-size: 12px;
    }
    #header .logo { 
      width: 300px; 
    }
    #header .logo:hover {
      text-decoration: none;
    }

在 LESS 中，就可以这样写:

#header {
      color: black;
    
      .navigation {
        font-size: 12px;
      }
      .logo {
        width: 300px;
        &:hover { text-decoration: none }
      }
    }

或者这样写:

#header        { color: black;
      .navigation  { font-size: 12px }
      .logo        { width: 300px;
        &:hover    { text-decoration: none }
      }
    }

注意 `&` 符号的使用—如果你想写串联选择器，而不是写后代选择器，就可以用到`&`了. 这点对伪类尤其有用如 `:hover` 和 `:focus`  
例如:

.bordered {
      &.float {
        float: left; 
      }
      .top {
        margin: 5px; 
      }
    }

会输出

.bordered.float {
      float: left;  
    }
    .bordered .top {
      margin: 5px;
    }

## 第五节 运算 ##

任何数字、颜色或者变量都可以参与运算  
**例：**

@base: 5%;
    @filler: @base * 2;
    @other: @base + @filler;
    
    color: #888 / 4;
    background-color: @base-color + #111;
    height: 100% / 2 + @filler;

LESS 的运算已经超出了我们的期望，它能够分辨出颜色和单位。如果像下面这样单位运算的话:

@var: 1px + 5;

LESS 会输出 6px.  
括号也同样允许使用:

width: (@var + 5) * 2;

并且可以在复合属性中进行运算:

border: (@width * 2) solid black;

## 第六节 作用域 ##

跟其他编程语言非常类似，首先会从本地查找变量或者混合模块，如果没找到的话会去父级作用域中查找，直到找到为止.

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

## 第七节 注释 ##

与JS雷同

## 第八节 避免编译 ##

有时候我们需要输出一些不正确的CSS语法或者使用一些 LESS不认识的专有语法.  
要输出这样的值我们可以在字符串前加上一个 `~`  
例：

.class {
      filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
    }

我们可以将要避免编译的值用 “”包含起来，输出结果为:

.class {
      filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
    }