CSS预处理器-Less知识点汇总

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文件