关于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 = 110pxheight: @h - 30rem; // 结果：100px - 30 = 70px，这里因为单位不同，以左边为准，所以是70pxbackground-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 */
.fatherwidth:100px;.sonwidth:50px;
/* scss */
.father{width:100px;.son{width:50px;}
}

4.2、stylus

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