Less的安装和简单使用

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

安装步骤

1. 安装nodejs, 根据操做系统版本从官网下载对应的安装包

官网下载连接: nodejs.org/en/download…

好比个人电脑是Windows10 64位, 就选择这个连接:

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

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

node -v
复制代码

若是安装成功, 会出现版本号:

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

npm install -g less
复制代码

4. 检查是否安装成功, 使用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提供了 加 (+), 减 (-), 乘 (*), 除 (/) 算术运算.

注意:

1. 参与运算的两个数字, 能够一个有单位, 一个没有单位, 最终单位就是惟一的那个单位.
2. 参与运算的两个数字, 若是两个都有单位, 最终单位取第一个数字的单位.
3. 运算符左右必须加空格, 不然有时候会出问题 (常见于加法).
4. 除法要加括号, 不然不生效.

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;
  }
}
复制代码