less 直接子元素_前端开发：less-gulp如何使用？

大家好，我来了，本期为大家带来的前端入门知识是”前端开发：less-gulp如何使用？“，有兴趣做前端的朋友，和我一起来看看吧！

主要内容

1. less
2. gulp

less和gulp

学习目标

第一节 less上

1.less介绍

是css的预处理语言。除了less，还有scss(sass)、stylus这些预处理语言。

特点：LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承， 运算， 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。

2.less编译：

1.安装less命令行工具：

全局安装：npm install less -g 
项目依赖：npm install less --save

使用命令行工具编译less文件

编译在命令窗口：lessc xx.less
输出编译之后的 CSS 代码到文件：lessc xx.less xx.css

2.卡拉工具

1.安装考拉工具

2.把less文件所在文件夹拖拽到考拉工具中

3.点击编译，然后最小化即可

3.其他编译打包工具

Gulp、webpack

本节作业：

1. 会使用命令行工具编译less文件
2. 会使用考拉编译less文件

第二节 less语法

1.变量

Less 中的变量十分强大，可化万物，值得一提的是，其变量是常量 ，所以只能定义一次，不能重复使用。

值变量

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

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

在平时工作中，我们就可以把 常用的变量 封装到一个文件中，这样利于代码组织维护。

@lightPrimaryColor: #c5cae9;
      @textPrimaryColor: #fff;
      @accentColor: rgb(99, 137, 185);
      @primaryTextColor: #646464;
      @secondaryTextColor: #000;
      @dividerColor: #b6b6b6;
      @borderColor: #dadada;

选择器变量

让 选择器 变成 动态

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

属性变量

可减少代码书写量

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

url 变量

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

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

声明变量

有点类似于 下面的 混合方法

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

.

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

变量运算

不得不提的是，Less 的变量运算完全超出我的期望，十分强大。

- 加减法时 以第一个数据的单位为基准

- 乘除法时 注意单位一定要统一

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

变量作用域

一句话理解就是：就近原则，不要跟我提闭包。

 /* Less */
      @var: @a;
      @a: 100%;
      #wrap {
    
        width: @var;
        @a: 9%;
      }
 
      /* 生成的 CSS */
      #wrap {
    
        width: 9%;
      }

用变量去定义变量

/* Less */
      @fnord:  "I am fnord.";
      @var:    "fnord";
      #wrap::after{
    
        content: @@var; //将@var替换为其值 content:@fnord;
      }
      /*