Less笔记
1. Less使用方法
1. Less引入
// node命令
// 全局安装less
npm install -g less
// 本地安装less
npm init
npm i less --save-dev
2. Less使用
// 安装完毕后先查看less版本信息,确定是否安装
lessc -v
// 确认安装后,新建less文件 index.less,书写less代码后,执行下命令,将less文件编译成css文件,在html引入这个css文件就可以使用了
lessc index.less index.css
3. 中文文档
https://less.bootcss.com/
2. 变量使用
编译前
// 变量
@width: 100px;
@height: 200px;
.box {
width: @width;
height: @height;
background-color: pink;
}
编译后
.box {
width: 100px;
height: 200px;
background-color: pink;
}
3. 混合
编译前
// 混合
.bordered {
border-top: dotted 1px red;
border-bottom: solid 2px green
}
.text {
color: blueviolet;
// 使用混合
.bordered();
}
编译后
.bordered {
border-top: dotted 1px red;
border-bottom: solid 2px green;
}
.text {
color: blueviolet;
border-top: dotted 1px red;
border-bottom: solid 2px green;
}
4. 嵌套
编译前
// 嵌套
.parent {
width: 200px;
height: 200px;
background-color: pink;
background-color: gold;
.son {
width: 50px;
height: 50px;
background-color: blueviolet;
p {
color: white;
}
}
}
编译后
.parent {
width: 200px;
height: 200px;
background-color: pink;
background-color: gold;
}
.parent .son {
width: 50px;
height: 50px;
background-color: blueviolet;
}
.parent .son p {
color: white;
}
5. @media
媒体查询规则
编译前
// @规则与冒泡
// @规则与普通选择器规则并不相同,如下媒体查询,
/*
在最小宽度768时,
.component的样式为{width:600px;}
在最小宽度和最小分辨率192dpi时
.component的样式为{background: red}
在最小宽度1280px时,
.component的样式为{width: 800px}
而嵌套的子样式都会继承他的父样式,如在各种情况下的.component如果没有定义宽度,则宽度就为300
但是@media里的嵌套是没有继承的
所以这样写也可以把其理解为一种子代关系
*/
.component {
width: 300px;
height: 40px;
background-color: yellowgreen;
@media (min-width: 768px) {
width: 600px;
background-color: powderblue;
@media (min-resolution: 192dpi) {
background: red;
}
}
@media (min-width: 1280px) {
width: 800px;
background-color: green;
}
}
编译后
@media (min-width: 768px) {
.component {
width: 600px;
background-color: powderblue;
}
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
.component {
background: red;
}
}
@media (min-width: 1280px) {
.component {
width: 800px;
background-color: green;
}
}
6. 运算
// 运算
// 算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算
// 所有操作数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm
@incompatible-units: 2 + 5px - 3px; // 结果是 4px
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%
.num {
width: @conversion-1;
margin-top: @conversion-2;
border: @incompatible-units solid red;
height: 20+2px;
}
编译后
.num {
width: 6cm;
margin-top: -1.5cm;
border: 4px solid red;
height: 22px;
}
7. calc
特例
编译前
// calc()特例
// 为了与 CSS 保持兼容,calc() 并不对数学表达式进行计算,但是在嵌套函数中会计算变量和数学公式的值。
@var: 50vh/2;
.calc {
width: calc(50% + (@var - 20px)); // 结果是 calc(50% + (25vh - 20px))
height: 50px;
background-color: #bfa;
}
编译后
.calc {
width: calc(50% + (white - 20px));
height: 50px;
background-color: #bfa;
}
8. 转义
编译前
// 转义
@min768: ~"(min-width: 768px)";
.element {
@media @min768 {
font-size: 1.2rem;
}
}
编译后
@media (min-width: 768px) {
.element {
font-size: 1.2rem;
}
}
9. 函数
编译前
// 函数的用法非常简单
@base: #f04615;
@width: 0.5;
.fun {
// percentage()将小数转化为百分比
width: percentage(@width); // 50%
// saturate()将颜色饱和度增加5%
color: saturate(@base, 5%);
// lighten()将颜色亮度降低百分之25
// spin()并且色相值增加8
background-color: spin(lighten(@base, 25%), 8);
}
编译后
.fun {
width: 50%;
color: #f6430f;
background-color: #f8b38d;
}
10. 命名空间和访问符
编译前
// 命名空间和访问符
#bundle() {
.button {
display: block;
border: 1px solid black;
background-color: grey;
// &符代表自身
&:hover {
background-color: white;
}
}
}
// #header中.button混合到#header a中
#header a {
color: orange;
#bundle.button(); // 还可以书写为 #bundle > .button 形式
}
编译后
#header a {
color: orange;
display: block;
border: 1px solid black;
background-color: grey;
}
#header a:hover {
background-color: white;
}
11. 映射
编译前
// 映射
#colors() {
primary: blue;
secondary: green;
}
.button {
// 可以使用colors中的属性
color: #colors[primary];
border: 1px solid #colors[secondary];
}
编译后
.button {
color: blue;
border: 1px solid green;
}
12. 作用域
编译前
// 作用域
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
编译后
#page #header {
color: white;
}
13. 注释
编译前
// 注释
/* 一个块注释
* style comment!
*/
@var: red;
// 这一行被注释掉了!
@var: white;
编译后
/* 一个块注释
* style comment!
*/
/* 在css中只能识别多行注释并转化到css中,而//会在编译css后丢失
14. 导入
编译前
// 导入
@import "library"; // library.less
@import "typo.css";
编译后
/* 这是library */
/* 这是引入的library.less文件 */
/* 会直接编译 */
div {
/* library.less */
background-color: black;
}
/* 而引入的css文件不会直接编译 */
@import "typo.css"