Less笔记
Less 笔记
Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性。Less 可以运行在 Node 或浏览器端。
开始之前,先介绍一个 vscode 插件,可以实现根据 less 编译生成对应的 css
1. 变量
通过@变量名定义,也是通过@变量名使用,不是用”=”赋值,而是和 css 的样式一样用”:”赋值
@width: 100px;
div {
width: @width;
}
编译为:
div {
width: 100px;
}
2. 混合
混合是一种将一组属性从一个规则集混入另一个规则集的方法。
.position {
left: 0;
right: 0;
}
.box div {
position: fixed;
.position();
}
编译为:
3. 嵌套
个人最常用的 Less 语法。非常方便,模仿 HTML 的组织结构,调试的时候会感觉清晰明了。
.position {
left: 0;
right: 0;
}
.box div {
position: fixed;
.position();
}
编译后:
.box {
color: #fff;
}
.box div {
background-color: pink;
}
.box div span {
font-size: 20px;
}
可以搭配”&”运算符使用,”&“表示当前选择器的父级
a {
color: red;
&:hover {
text-decoration: none;
}
}
编译后:
a {
color: red;
}
a:hover {
text-decoration: none;
}
@规则嵌套
@ 规则(例如 @media
或 @supports
)可以与选择器以相同的方式进行嵌套。@ 规则会被放在前面,同一规则集中的其它元素的相对顺序保持不变。这叫做冒泡
div {
width: 400px;
@media (min-width: 768px) {
width: 600px;
}
@media (min-width: 1280px) {
width: 800px;
}
}
编译后:
div {
width: 400px;
}
@media (min-width: 768px) {
div {
width: 600px;
}
}
@media (min-width: 1280px) {
div {
width: 800px;
}
}
4. 运算
结果会以最左侧的有单位的操作数的单位为准
+、-部分
@width: 10px - 5em;
@height: 10em - 5px;
@lineHeight: 10 - 5px + 1em;
div {
width: @width;
height: @height;
line-height: @lineHeight;
}
编译后:
div {
width: 5px;
height: 5em;
line-height: 6px;
}
*、/部分:除法需要使用()包住,否则无法正常进行运算
原因:进入 4.0 版本后, 除法运算符如果在括号外面,不执行除法运算,在小括号内可以看做是除法运算
@width: 10px * 2em;
@height: 10em * 2px;
@lineHeight: (10 * 5px / 2em);
@color: (#224488 / 2);
div {
width: @width;
height: @height;
line-height: @lineHeight;
color: @color;
}
编译后:
div {
width: 20px;
height: 20em;
line-height: 25px;
color: #112244;
}
5. 转义
转义允许使用任何字符串作为属性或变量值。任何~"anything"
形式的内容都会按原样输出
@min728: ~"(min-width: 768px)";
div {
@media @min728 {
width: 200px;
}
}
编译后:
@media (min-width: 768px) {
div {
width: 200px;
}
}
6. 函数
例子:percentage()把小数转换为百分比, length()得到数组长度
@width: 0.5;
@list: "banana", "tomato", "potato", "peach";
@n: length(@list);
.class {
width: percentage(@width);
height: @n * 200px;
}
编译后:
.class {
width: 50%;
height: 800px;
}
7. 映射
#colors() {
primary: blue;
secondary: green;
}
.button {
color: #colors[primary];
border: 1px solid #colors[secondary];
}
编译后:
.button {
color: blue;
border: 1px solid green;
}
8. 作用域
会先在本地查找有无变量,如果找不到,则会去到父级作用域中查找
@color: red;
.box {
@color: blue;
div {
@color: purple;
color: @color;
}
}
编译后:
.box div {
color: purple;
}
找不到:
@color: red;
.box {
div {
color: @color;
}
}
编译后:
.box div {
color: red;
}
9. 注释
和 js 一样,有两种形式的注释方式,//
和/**/
其中,/**/
形式的注释编译后,也会出现在生成的 css 中,而//
形式的则不会出现在生成的 css 中
/* 测试1 */
// 测试2
@color: red;
.box {
div {
color: @color;
}
}
编译后:
/* 测试1 */
.box div {
color: red;
}
10. 导入
如果导入的文件是.less
扩展名,则可以把扩展名去掉
要导入的 test.less 文件
div {
color: red;
}
index.less 文件
@import "./test";
编译后:
div {
color: red;
}
相关文章
- 干货 | 网络安全之渗透实战学习笔记总结
- 史上最牛的Linux视频教程—兄弟连 学习笔记1
- Vue笔记(9) 脚手架
- 力扣刷题笔记--12. 整数转罗马数字 python解法
- 驱动开发学习笔记(4-1)–INF文件-1
- Java的学习笔记(11)对象 六
- Cocoa框架梳理笔记
- Vue开发、学习笔记,持续记录
- 【论文笔记】Efficient Context and Schema Fusion Networks for Multi-Domain Dialogue State Tracking
- oracle复习笔记之PL/SQL程序所要了解的知识点
- spring笔记二详解编程语言
- Java学习笔记之二十final关键字在Java继承中的用法小结详解编程语言
- 使用Less在Oracle中更高效地管理数据(oracle中less)
- 手机版Outlook与脸书、印象笔记、Meetup的日历连接即将停止服务
- js数据类型转换总结笔记
- PHP学习笔记之字符串编码的转换和判断
- PHP面向对象程序设计(oop)学习笔记(四)-异常处理类Exception
- Javascript学习笔记之对象篇(四):forin循环
- oracle复习笔记之PL/SQL程序所要了解的知识点