less的使用

一.使用方法

1.在页面中 引入 Less.js

需要注意的是，link 标签一定要在 Less.js 之前引入，并且 link 标签的 rel 属性要设置为stylesheet/less。

<link rel="stylesheet/less" href="style.less">
 <script src="less.min.js"></script>

2.在命令行 使用npm安装

npm install -g less

具体使用命令

$ lessc styles.less > styles.css

二.Less 的功能特性

1.变量

(1)值变量

以 @ 开头 定义变量，并且使用时 直接 键入 @名称。

/* Less */
      @color: #999;
      @bgColor: skyblue;//不要添加引号
      @ 50%;
      #wrap {
        color: @color;
         @width;
      }   
      /* 生成后的 CSS */
      #wrap {
        color: #999;
         50%;
      }

(2)选择器变量

让 选择器 变成 动态

 /* Less */
      @mySelector: #wrap;
      @Wrap: wrap;
      @{mySelector}{ //变量名 必须使用大括号包裹
        color: #999;
         50%;
      }
      .@{Wrap}{
        color:#ccc;
      }
      #@{Wrap}{
        color:#666;
      }
      /* 生成的 CSS */
      #wrap{
        color: #999;
         50%;
      }
      .wrap{
        color:#ccc;
      }
      #wrap{
        color:#666;
      }

(3)属性变量

  /* Less */
      @borderStyle: border-style;
      @Soild:solid;
      #wrap{
        @{borderStyle}: @Soild;//变量名 必须使用大括号包裹
      }
      /* 生成的 CSS */
      #wrap{
        border-style:solid;
      }

(4)url变量

项目结构改变时，修改其变量即可。

/* Less */
      @images: "../img";//需要加引号
      body {
        background: url("@{images}/dog.png");//变量名 必须使用大括号包裹
      }
      /* 生成的 CSS */
      body {
        background: url("../img/dog.png");
      }

(5)声明变量

结构: @name: { 属性: 值 ;};
使用：@name();

  /* Less */
      @background: {background:red;};
      #main{
          @background();
      }
      @Rules:{
           200px;
          height: 200px;
          border: solid 1px red;
      };
      #con{
        @Rules();
      }

      /* 生成的 CSS */
      #main{
        background:red;
      }
      #con{
         200px;
        height: 200px;
        border: solid 1px red;
      }

(6)变量运算

加减法时 以第一个数据的单位为基准
乘除法时 注意单位一定要统一

 /* Less */
      @300px;
      @color:#222;
      #wrap{
        @width-20;
        height:@width-20*5;
        margin:(@width-20)*5;
        color:@color*2;
        background-color:@color + #111;
      }
    
      /* 生成的 CSS */
      #wrap{
        280px;
        height:200px;
        margin:1400px;
        color:#444;
        background-color:#333;
      }

2.嵌套

(1) & 的妙用

& ：代表的上一层选择器的名字

/* Less */
      #header{
        &:after{
          content:"Less is more!";
        }
        .title{
          font-weight:bold;
        }
        &_content{//理解方式：直接把 & 替换成 #header
          margin:20px;
        }
      }
      /* 生成的 CSS */
      #header::after{
        content:"Less is more!";
      }
      #header .title{ //嵌套了
        font-weight:bold;
      }
      #header_content{//没有嵌套！
          margin:20px;
      }

(2) 媒体查询

在以往的工作中，我们使用 媒体查询，都要把一个元素 分开写

#wrap{
        500px;
      }
      @media screen and (max-768px){
        #wrap{
          100px;
        }
      }

Less 提供了一个十分便捷的方式

 /* Less */
      #main{
          //something...
    
          @media screen{
              @media (max-768px){
                100px;
              }
          }
          @media tv {
            2000px;
          }
      }
      /* 生成的 CSS */
      @media screen and (max768px){
        #main{
            100px; 
        }
      }
      @media tv{
        #main{
          2000px;
        }
      }

3.继承

(1)extend 关键字的使用

extend 是 Less 的一个伪类。它可继承 所匹配声明中的全部样式。

 /* Less */
      .animation{
          transition: all .3s ease-out;
          .hide{
            transform:scale(0);
          }
      }
      #main{
          &:extend(.animation);
      }
      #con{
          &:extend(.animation .hide);
      }
    
      /* 生成后的 CSS */
      .animation,#main{
        transition: all .3s ease-out;
      }
      .animation .hide , #con{
          transform:scale(0);
      }

(2) all 全局搜索替换

使用选择器匹配到的 全部声明。

 /* Less */
      #main{
         200px;
      }
      #main {
        &:after {
          content:"Less is good!";
        }
      }
      #wrap:extend(#main all) {}
    
      /* 生成的 CSS */
      #main,#wrap{
         200px;
      }
      #main:after, #wrap:after {
          content: "Less is good!";
      }

4.导入

(1) 导入 less 文件 可省略后缀

import "main"; 
//等价于
import "main.less";

(2)@import 的位置可随意放置

#main{
  font-size:15px;
}
@import "style";

注：

1.使用@import (reference)导入外部文件，但不会添加 把导入的文件 编译到最终输出中，只引用。
2.once @import语句的默认行为。这表明相同的文件只会被导入一次，而随后的导入文件的重复代码都不会解析。

@import (once) "foo.less";

@import (once) "foo.less"; // 这个会被忽略

3.使用@import (multiple)允许导入多个同名文件。

/* Less */
   
// file: foo.less
.a {
  color: green;
}
// file: main.less
@import (multiple) "foo.less";
@import (multiple) "foo.less";
   
/* 生成后的 CSS */
.a {
  color: green;
}
.a {
  color: green;
}

5.注释

/* */ CSS原生注释，会被编译在 CSS 文件中。
/ / Less提供的一种注释，不会被编译在 CSS 文件中。

6.用gulp编译less

（1）安装

• 全局安装

npm install -g less

• 项目内安装

npm install gulp-less --save-dev

（2）使用

var gulp=require("gulp");
var less=require("gulp-less");

gulp.task("less",function(){
gulp.src('src/css/*.less')
.pipe(less())
.pipe(gulp.dest("src/css"));
});

//监视文件的变化
gulp.task("watch",function(){
gulp.watch("src/css/*.less",['less']);
});