前端-CSS-Less预处理
【代码】前端-CSS-Less预处理。
·
1.嵌套结构
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
2.编译注释
以// 开头的注释,不会被编译到css文件中
以/**/包裹的注释会被编译到css文件中
3.less中的变量
块级作用域
使用@来申明一个变量:@pink:pink
1.作为普通属性值来使用:直接使用@pink
2.作为选择器和属性名:#@{selector的值}的形式
3.作为URL:@{url}
4.变量的延迟加载
4.less中的嵌套规则
1.基本的嵌套规则
2.&的使用-- 表示当前的父级选择
5.less的混合
混合就是将一系列属性从一个规则集引入到另一个规则集的方式
1.普通混合
2.不带输出的混合
3.带参数的混合
4.带参数并且有默认值的混合
5.带多个参数的混合
6.命名参数
7.匹配模式
8.arguments变量
6. less运算
// 只需要一方有单位即可
with: (100 + 100px)
7.继承
.inner: extend(.innerParent)
// 继承 innerParent 父级的所有属性
.inner: extend(.innerParent all )
更多推荐
已为社区贡献1条内容
所有评论(0)