关于less的基本使用

1、介绍及概述

1.1、解释

1. less 是方便开发人员书写CSS的一门预处理语言。
2. 浏览器只认识html /css /js格式的文件，所以直接引入.less文件，没有任何的效果，需要把less文件转换成css文件

1.2、概述

1. CSS弊端：
   • 没有逻辑性、变量、函数、作用域、不利于复用，更没有计算
2. 介绍：
   • less是css的预处理语言，除了less，还有scss(sass)、stylus这些预处理语言。
3. 官网：
   • less官网地址
4. 特点：
   • LESS将CSS赋予了动态语言的特性，如：变量， 继承， 运算， 函数
   • LESS既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js在服务端运行
5. 安装
   • 在node.js中安装less工具：
     • 全局安装：npm install less -g
     • 项目依赖：npm install less --save
     • 检查版本，测试是否安装成功：输入lessc -v，检查版本号
   • 在vscode安装插件 "easy less"

2、变量使用及解释

// 声明变量 => 使用@符号，代码结束后需要添加；分号
     @w: 100px;
     @h: 100px;
     @color: skyblue;

// 1、变量运算 => + - 两边需要有空格，单位不一致的情况下，以左边的单位为准
     .box3 {
       width: @w + 10; // 结果：100px + 10 = 110px
       height: @h - 30rem; // 结果：100px - 30 = 70px，这里因为单位不同，以左边为准，所以是70px
       background-color: @color;
       font-weight: @w*4rem; // 结果：100px * 4 = 400px，单位还是以px为准
       font-size: (@h / 2); // 结果：100px / 2 = 50px，除法需要添加()
     }

// 2、作用域 => 全局/局部作用域：变量作用域遵循就近原则
     // 2.1、@w: 300px; => 会覆盖前面@w的值，也就是全局作用域、全局变量
     // 2.2、局部作用域
         .box4 {
           @w: 300px; // 不会覆盖前面@w的值，也就是局部作用域，局部变量
           width: @w;
         }

// 3、选择器变量（了解）
     // 3.1、声明变量让它=选择器
         @bb: #wrap; // 这个id为wrap的值，赋值给@bb使用
     // 3.2、使用变量来设置元素的宽度，但注意：需要使用{}去包裹一下，表示这是一个元素，而不是变量
         @{bb} {
           width: @w;
         }
     // 3.3、还可以只存值，使用时前面携带选择器符号 
         @aa: content;
         .@{aa} {
           height: @h;
         }

// 4、属性变量，可以减少代码的书写量
     @mr: margin-right; // 把属性名赋值给变量，使用时，用{}包裹即可
     .box5 {
       @{mr}: 5px;
     }

// 5、url 变量
     @url: "../../img"; // 把重复的路径地址赋值给变量
     .box6 {
       background: url("@{url}/1.png");
     }
     .box7 {
       background: url("@{url}/2.png");
     }

// 6、声明变量 => 类似于下面的混合方法，存储多个样式值，使用时写成：@变量名()即可
     @bg: {
       background-color: blue;
       color: red;
     };
     
     .box9 {
       @bg();
     } 
     .box10 {
       width: @w;
       height: @h;
       @bg();
     }

3、常用语法

// 1、嵌套
     .wrap {
       background-color: #ccc;
       .header {
         color: #333;
         padding: 10px;
         .left {
           float: left;
           #info {
             a {
               color: #333;
             }
             // 2、父级引用 => &：代表了父级元素，也可以使用#info::after这种原本的形式添加
             &::after {
               font-size: 30px;
             }
           }
         }
         .right {
           float: right;
         }
       }
     }


// 3、媒体查询
     .component {
       width: 300px;
       @media (min-width: 768px) {
         width: 600px;
         @media (min-resolution: 192dpi) {
           background: red;
         }
       }
       @media (min-width: 980px) {
         background-color: yellow;
       }
     }


// 4、混合 => 注意：声明的时候，加()，就不会在css中生成
     .card {
       color: pink;
     }
     // 4.1、第一种写法：无参，调用时不添加()
     .box11 {
       .card; 
       font-size: 20px;
     }
     // 4.2、第二种写法：无参，调用时添加()
     .box12 {
       .card(); 
       margin: 10px;
     }
     // 4.3、携带参数
       // 1）编写
         .card2(@a,@b,@c){ // 1.1、声明形参：@a,@b,@c3个变量
           margin: @a @b;  // 1.1、使用实参中的值，设置外边距和字体大小
           font-size: @c;
         }
       // 2）使用 
         .box13 {
           .card2(10px, 20px,30px);
         }
     // 4.4、携带参数，并设置默认参数
     .card2(@a,@b,@c:10px) {
       margin: @a @b;
       font-size: @c;
     }
     .box14 {
       .card2(10px, 20px);
     }


// 5、@import 导入文件，可以引入任何css和less文件
     @import url("./03.27-11b.less");

4、补充——sass和stylus

4.1、sass语法

1. 安装:
   • 安装全局：npm i sass -g
   • 项目中安装依赖：npm i sass -D
2. vscode安装插件easy sass
3. 创建sass文件
   • sass/scss，说明：sass是老版本，scss是新版本的语法升级，支持css3特性 {}
   • 文件后缀 .scss
4. 文档地址：
   • 文档地址
5. 示例

/* sass */
.father
    width:100px;
	.son
        width:50px;
/* scss */
.father{
    width:100px;
    .son{
        width:50px;
    }
}

4.2、stylus

1. 官网地址：stylus
2. 文件后缀：.styl
3. 简单介绍：以截图形式