less基础

LESS

less(leaner Style Sheets 的缩写）是一门CSS扩展语言，扩展了CSS的动态特性。

LESS使用方式

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

Less可以通过npm在命令行上使用，可以作为脚本文件下载给浏览器使用，也可以在各种第三方工具中使用。

1.npm命令行

安装

通过node.js软件包管理器npm进行：

$ npm install -g less

命令行用法

安装后，您可以从命令行调用编译器，如下所示：

$ lessc styles.less

这会将编译后的CSS输出到stdout.要将CSS结果保存到您选择的文件中，请使用：

$ lessc styles.less styles.css

要输出缩小的内容，您可以使用clean-css插件CSS。安装插件后，将使用--clean-css选项指定缩小的CSS输出：

$ lessc --clean-css styles.less styles.min.css

2.作为脚本加载

上面的<style="text/less"></style>,下面 <script src="less.js" type="text/javascript"> </script>，

这种方式是运行时编译，违背了预编译。

3.使用VSCODE插件编译less

LESS的使用

• less变量

变量是无固定的，可改变的值。在CSS中一些颜色与数值经常使用。

@变量名：值；

 必须有@前缀；不能包含特殊字符；不能以数字开头；大小写敏感。

• less嵌套

 .nav{
    .logo{
        color:green;
    }
}

  若遇到（交集、伪类、伪元素选择器）

   在伪类前增加&即可

a{
    color:red;
    &:hover{
        color:green;
    }
}

• less运算

任何数字、颜色、变量都可以参与运算，加减乘除+ - * / 

运算符的左右有空格隔开：如：1px + 5

两个数若是不同的单位，运算后以第一个单位为准。