这是我参与8月更文挑战的第4天，活动详情查看：8月更文挑战

安装步骤

安装nodejs, 根据操作系统版本从官网下载对应的安装包官网下载链接: nodejs.org/en/download…

比如我的电脑是Windows10 64位, 就选择这个链接:

下载之后, 直接双击运行, 不需要进行什么特殊设置就可以直接完成安装.

检查是否安装成功, 在命令框中输入:

node -v

如果安装成功, 会出现版本号:

基于node.js在线安装less, 使用下面命令即可:

npm install -g less

检查是否安装成功, 使用cmd查看less的版本

lessc -v

Less的使用

新建一个后缀名为.less的文件, 在这个文件中书写less语句.

Less变量

CSS中的一些颜色和数值会经常用到变量.

语法:

@变量名:值;

1. 变量命名规范

必须有@作为前缀
不能包含特殊符号
数字不能作为开头
大小写敏感

例如:

@color: pink;
@Color: deeppink;

@fs14: 14px;

变量使用规范

div {
    background-color: @color;
}

解决了css不能直接更改所有颜色的弊端, 维护更加简单

Less编译

本质上, Less包含一套自定义的语法及一个解析器, 用户根据这些语法定义自己的样式规则, 这些规则最终会通过解析器, 编译生成对应的CSS文件.

所以,我们需要把我们的.less文件, 编译生成.css文件, 这样html页面才能使用.

方法 -- 借助nodejs: 在当前.less文件夹下打开cmd命令行, 输入如下命令将现在的.less文件 (style.less) 编译成.css文件 (style.css). 这个css就是平常我们使用的css代码.

lessc style.less > style.css

VScode Less插件

Easy LESS 插件用来把less文件编译为css文件. 安装完插件后, 重新加载一下vscode, 以后只要保存less文件就会自动生成css文件

Less嵌套

之前使用的选择器:

Less嵌套写法:

如果遇见交集/伪类/伪元素选择器, 需要在内层选择器的前面加 & 符号, 这样才能被解析为父元素自身或父元素的伪类; 苟泽会被解析为父选择器的后代.

之前使用的选择器:

Less嵌套写法:

Less运算

任何数字, 颜色或者变量都可以参与运算, less提供了 加 (+), 减 (-), 乘 (*), 除 (/) 算术运算.

注意:

参与运算的两个数字, 可以一个有单位, 一个没有单位, 最终单位就是唯一的那个单位.
参与运算的两个数字, 如果两个都有单位, 最终单位取第一个数字的单位.
运算符左右必须加空格, 否则有时候会出问题 (常见于加法).
除法要加括号, 否则不生效.

common.less:

// 根据媒体查询,设置不同屏幕中的html字号
// 屏幕划分为15等份
// 默认显示html字号参考750px的宽度
@no: 15;

html {
    font-size: 50px;
}

//320px
@media screen and (min-width: 320px) {
    html {
        font-size: (320px / @no);
    }
}

//360px
@media screen and (min-width: 360px) {
    html {
        font-size: 360px / @no;
    }
}

common.css:

html {
  font-size: 50px;
}
@media screen and (min-width: 320px) {
  html {
    font-size: 21.33333333px;
  }
}
@media screen and (min-width: 360px) {
  html {
    font-size: 360px / 15;
  }
}

Less的安装和简单使用