【Less】-- 使用步骤与语法介绍

目录

♡ ‧₊˚ Less简介 ₊˚ ♡ 

♡ ‧₊˚ Less使用 ₊˚ ♡

 ♡ ‧₊˚ Less语法 ₊˚ ♡ 

 变量（Variables）

 混合（Mixins）

嵌套（Nesting）

运算（operations）

转义（Escaping）

函数（Functions）

命名空间和访问符

映射（Maps）

作用域（Scope）

导入（Importing）

---

♡ ‧₊˚ Less简介 ₊˚ ♡ 

        less是一门CSS扩展语言，也就是CSS预处理器，（Leaner Style Sheets）简称less，它只不过是为css新增这些的功能，比如说：变量、函数、作用域等等。它的优点是：更具有维护性、扩展性等，可以降低了维护的成本，根据按这样的话，那么less可以让我们写更少的代码做更多的事情。

♡ ‧₊˚ Less使用 ₊˚ ♡

先在vscode中安装一个插件

 

安装项目依赖：

cnpm i -S less

创建xxx.less文件并编写less样式

使用lessc xxx.less 命令将上一步创建的文件转换生成一个新的xxx.css文件

如：

lessc 1-变量.css

 把css引入到页面html中 

    <link rel="stylesheet/less" href="./2-less使用.less">

还需要从cdn上引入一个less编译器

 <!-- 需要一个less编译器 需要引入less -->
 <script src="https://cdn.bootcdn.net/ajax/libs/less.js/4.1.3/less.js"></script>

 

 ♡ ‧₊˚ Less语法 ₊˚ ♡ 

 变量（Variables）

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}