Less在CSS基础上,引入了变量、Mixin、运算以及函数,大大简化了CSS的编写
常见的CSS预处理器 Less 、Sass
Less是一门css预处理语言,它扩展了CSS的动态特性
Less变量
@变量名:值
@color:pink;
div{
background-color:@color
}
Less嵌套
- 子元素直接写进父元素内
div元素包含一个a标签
@color:pink;
@Color:red;
div{
background-color:@color;
a{
color:@Color
}
}
- 伪类、伪元素选择器、交集选择器等内层选择器前面加 &
@color:pink;
@Color:red;
div{
background-color:@color;
a{
color:@Color
};
&:hover{
font-size: 12px;
};
&::before{
content: "";
}
}
Less运算
- 如果计算的两个值只有一个值有单位,则运算结果取这个单位
- 如果计算的两个值都有单位,且单位不一致,则取第一个值的单位
Less转化成 CSS
Less文件只有转化成CSS文件,才可以引入到html中;可用VS code 中插件 easy less转化,会在同文件夹下生成一个同名的 css文件