一、less 入门
介绍
- Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、q嵌套、函数、作用域等特性
- 提高了css代码可维护性、逻辑性、扩展性
- css 是一门非程序式语言，没有变量、函数、作用域等概念
安装 安装教程
-
简单，不需安装其他依
-
全局安装
npm install less -g -
项目中安装
npm i less --save-dev -
显示版本
lessc -v
lessc --version
编译：编译教程
- 命令行编译
- 编辑器插件编译
- 编译软件
koala - 前端自动化工具编译
- 在客户端使用less.js（简便，但推荐用于生产环境，影响性能） ---> 比sass多一种
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>
注意点：
1. 在less.js之前引入css样式表
2. link标签的rel 属性设置为 "stylesheet/less"
二、嵌套
- 父选择器
& - 层层嵌套，便于维护
- 解耦：高内聚、低耦合，利于维护
&:hover
&::before
三、变量 variales
定义变量用 @
- 定义变量、属性值为变量（不插值）
@link-color: #428bca;
.link {
color: @link-color;
}
// 被编译为：
.link {
color: #428bca;
}
变量插值 @{}
-
选择器、属性名、属性值（插值）
-
选择器、属性名中、部分片段中：必须使用插值语句
@mySelector: banner;
.@{mySelector} {
font-weight: bold;
}
// 被编译为：
.banner {
font-weight: bold;
}
@property: color;
.widget {
@{property}: #0ee;
background-@{property}: #999;
}
// 被编译为：
.widget {
color: #0ee;
background-color: #999;
}
@images: "../img";
body {
color: #444;
background: url("@{images}/white-sand.png");
}
// 被编译为：
body {
color: #444;
background: url("../img/white-sand.png");
}
四、作用域
- LESS 中的作用域跟其他编程语言非常类似，首先会从本地查找变量或者混合模块，如果没找到的话会去父级作用域中查找，直到找到为止。
五、混入 mixins
1. 混合集（输出、不输出）
.btn1 { // 被输出
color: black;
}
#btn2() { // 不被输出，加括号
font-size: 12px;
}
.class {
.btn1(); // 调用混合集的时候：括号可加可不加
#btn2;
}
// 被编译为：
.btn1 {
color: black;
}
.class {
color: black;
font-size: 12px;
}
2. 带选择器的混合集
.my-hover-mixin() {
&:hover {
border: 1px solid red;
}
}
button {
.my-hover-mixin();
}
// 被编译为：
button:hover {
border: 1px solid red;
}
3. 命名空间混入
#bundle {
.button () {
display: block;
&:hover {
background-color: white;
}
}
.tab () {
color: #fff;
}
}
#header a {
color: orange;
#bundle > .button; // 重点
}
// 被编译为：
#header a {
display: block;
}
#header a:hover {
background-color: #ffffff;
}
4.带参数混入（参数用 @ 定义）
- 单一参数：
.border-radius(@radius) {
border-radius: @radius;
}
.box {
.border-radius(4px);
}
// 被编译为
.box {
border-radius: 4px;
}
- 带默认值的参数
.border-radius(@radius: 4px) {
border-radius: @radius;
}
.box {
.border-radius;
}
// 被编译为
.box {
border-radius: 4px;
}
- 多个参数（推荐 逗号 分号 隔开）
.mixin(@color; @padding:2px) {
color: @color;
padding: @padding;
}
.selector {
.mixin(#008000);
}
// 被编译为：
.selector {
color: #008000;
padding: 2px;
}
- 命名参数（不用再注意参数的位置）
.mixin(@color: black; @margin: 10px) {
color: @color;
margin: @margin;
}
.class1 {
.mixin(@margin: 20px; @color: #33acfe);
}
// 被编译为
.class1 {
color: #33acfe;
margin: 20px;
}
六、内置函数 函数手册
列表函数
- length(列表); // 返回列表中元素的个数
- extract(列表, index); // 返回列表中指定位置的元素
七、条件语句、循环语句 when
比较运算符的完整列表为： >, >=, =, =<, <
.max (@a) when (@a > 0) { width: @a; }
.mixin (@a) when (default()) { width: 0; }
.max (10px);
// 被编译为：
.max {
width: 10px;
}
类型检测函数
-
检测参数类型
- iscolor
- isnumber
- isstring
- iskeyword
- isurl
-
检测参数单位
- ispixel
- ispercentage
- isem
- isunit
.mixin (@a; @b: 0) when (isnumber(@b)) { ... }
.mixin (@a; @b: black) when (iscolor(@b)) { ... }
less中混合调用自身，即可形成循环
.loop(@counter) when (@counter > 0) {
.loop((@counter - 1)); // 递归调用自身
width: (10px * @counter); // 每次调用时产生的样式代码
}
div {
.loop(5); // 调用循环
}
// 被编译为：
div {
width: 10px;
width: 20px;
width: 30px;
width: 40px;
width: 50px;
}
八、导入@import
less 中
@import文件可在任意位置导入；css中@import文件必须在其他类型规则之前导入
less 中导入文件的扩展名
@import "foo"; // foo.less is imported
@import "foo.less"; // foo.less is imported
@import "foo.php"; // foo.php imported as a less file
@import "foo.css"; // statement left in place, as-is
less 中导入文件选项
-
语法：@import (keyword) "filename";
- reference：使用Less文件但不输出
- inline：在输出中包含源文件但不加工它
- less：将文件作为Less文件对象，无论是什么文件扩展名
- css：将文件作为CSS文件对象，无论是什么文件扩展名
- once：只包含文件一次（默认行为）
- multiple：包含文件多次
九、注释
- /**/ 可以使用，会被编译
- // 可以使用，但不会被编译到css中
- less不认识的内容 不会被编译
网友评论