# 第八模块:前端开发-LESS
平常我们写的CSS叫做原生CSS,缺点在于层次不够友好,无法重用等。LESS可以帮助我们解决这些问题,但是浏览器无法直接识别LESS,需要把LESS编译成原生CSS,有很多方法,其中本地软件手动编译 https://koala-app.com/
# 01 变量
@color: red;
div{
color: @color;
}
# 编译为
div{
color: red;
}
# 02 混合
混合将一组属性混入到调用方中
.triangle{
height: 0;
width: 0;
border-width: 20px;
border-style: solid;
border-color: red transparent transparent transparent;
}
#main{
.triangle();
}
# 03 嵌套
// 编译到CSS中,该注释看不见,给开发人看
/* 编译到CSS中,该注释 看得见 */
@color:pink;
.center(@c){
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 100px;
height: 100px;
background-color: @c;
}
#wrap{
position: relative;
width: 300px;
height: 400px;
border: 1px solid;
margin: 0 auto;
.inner{
.center(@color);
&:hover{
background-color: green;
}
}
}
# 04 运算
@height: 100 + 2px;
- 特例 cacl
# 05 转义
任何 ~"anything" 或 ~'anything' 形式的内容都将按原样输出
@min768: ~"(min-width: 768px)";
# 06 函数
Less 内置了多种函数用于转换颜色、处理字符串、算术运算等
# 07 导入
若导入的文件是.less扩展名,扩展名可省略
@import "library"; // library.less
@import "typo.css";