百度站长工具是什么意思,h5建站系统,常用的网站建设技术,深圳市龙华区区长一、什么是Less#xff1f;
Less官网
Less中文网 Less 是一种更加简洁的样式代码#xff0c;它非常像 CSS #xff0c;但又不太一样#xff0c;它让编写样式变得更容易。 Less 代码虽好#xff0c;但它无法被浏览器识别#xff0c;因此需要一个工具将其转换为纯正的 CS…一、什么是Less
Less官网
Less中文网 Less 是一种更加简洁的样式代码它非常像 CSS 但又不太一样它让编写样式变得更容易。 Less 代码虽好但它无法被浏览器识别因此需要一个工具将其转换为纯正的 CSS 代码。 由于 node 环境具有读写文件的能力于是在 node 环境中可以轻松的完成文件的转换。 npm 上有一个包叫做 less 它运行在 node 环境中通过它可以完成对 Less 代码的转换。 下面是 CSS 代码和 Less 代码的对比它们都表达了一样的含义。 可以看出 node 环境在前端工程化中充当了一个辅助的角色它并不直接运行前端代码而是让我们编写前端代码更加舒适便利。 转换代码称之为编译 (compile) 转换代码的工具称之为编译器 (compiler) 。
二、安装Less
1、使用 npm 下载 less less 包提供了一个 cli 工具 lessc 有两种方案使用它。
方案一全局安装Less
这种方案可以在任何终端目录使用 lessc 命令但不利于版本控制。
方案二本地安装less
npm i -D less
这种方案会把 less 安装到工程目录的 node_modules 中你无法全局使用 lessc 命令但可以在当前工程目录中使用 npx lessc 运行该命令。
npx lessc -v // 查看lessc版本 npx 是 npm 提供的一个小工具它可以运行当前项目中安装到 node_modules 的 cli 命令。 如果配置 package.json 脚本无须使用 npx 。 如果可以应该尽量使用本地安装而非全局安装
2、使用 lessc 命令对编写的 less 文件进行编译
// 将index.less编译成为index.css
lessc index.less index.css
3、配置 package.json 脚本使用 npm 命令将 less 文件转换为 css 文件
在终端运行命令会生成一个 index.css 文件。
// package.json
scripts: {c: lessc index.less index.css},// 终端
npm run c
4、新建一个页面引用编译结果 index.css
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlelink relstylesheet href./index.css //headbodydiv classlist123/div/body
/html
三、 Less 基本语法
1.变量
// less写法
width: 10px;
height: width 10px;
gray:#ccc#header {width: width;height: height;color: gray;
}// 编译后
#header {width: 10px;height: 20px;color: #ccc;
}
2.混合Mixins
混合Mixin是一种将一组属性从一个规则集包含或混入到另一个规则集的方法。假设我们定义了一个类class如下
.bordered {border-top: dotted 1px black;border-bottom: solid 2px black;
}
如果我们希望在其它规则集中使用这些属性呢没问题我们只需像下面这样输入所需属性的类class名称即可如下所示
#menu a {color: #111;.bordered();
}.post a {color: red;.bordered();
} .bordered 类所包含的属性就将同时出现在 #menu a 和 .post a 中了。注意你也可以使用 #ids 作为 mixin 使用。
3.嵌套 Less 提供了使用嵌套(nesting)代替层叠或与层叠结合使用的能力。
用 Less 书写的代码更加简洁并且模仿了 HTML 的组织结构。
// css代码
#header {color: black;
}
#header .navigation {font-size: 12px;
}
#header .logo {width: 300px;
}// Less代码
#header {color: black;.navigation {font-size: 12px;}.logo {width: 300px;}
}
你还可以使用此方法将伪选择器pseudo-selectors与混合mixins一同使用。下面是一个经典的 clearfix 技巧重写为一个混合mixin (表示当前选择器的父级
.clearfix {display: block;zoom: 1;::after {content: ;display: block;font-size: 0;height: 0;clear: both;visibility: hidden;}
} 4.注释
块注释和行注释都可以使用
行注释只存在于 less 代码中不会被编译到 css 中。
块注释是普通的 css 注释会生成到编译结果中。
/* 一个块注释* style comment! */
var: red;// 这一行被注释掉了
var: white; 5.导入 “导入”的工作方式和你预期的一样。你可以导入一个 .less 文件此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名则可以将扩展名省略掉
import library; // library.less
import typo.css; 以上就是 less 的基本用法更多用法请关注官网~
