less预处理器常用的方式

(1).变量

作用:储存数据,方便后期维护修改

 1.定义@变量名:值

@color: green;
@baseSize: 37.5rem;

 2.使用:css属性名:变量名

.box {
    background-color: @color;
    font-size: (20/@baseSize);
}

(2).选择器

作用:嵌套可更好的表示后代,让层次关系更加一目了然

1.推荐后代选择器就行嵌套

div {
    p {
        a {
            color: red;
        }
    }
}

2.伪类,结构伪类选择器,伪元素要通过&符号进行书写

&符号表示包裹他的元素

注意:.需注意的是&引用所有祖先元素，不仅仅是内部元素的直接父元素。

ul {
    li {
        &:nth-child(2) {
            color: red;
        }
    }
}

(3).导入

作用:引入其它less,文件,避免生成多余css

语法1:@import '引入路经文件'; (注意:import 和'后面要打空格)

语法2:@import url(引入路经文件.);(不推荐)

@import './3-less的变量.less';
@import './02-less选择器';

// @import url(./01-体验less.less);

(4).禁止导出

作用:禁止less文件生成css文件

注意:写在第一行 才能禁止导出生成css,必须写在第一行,否则不生效

out:false