CSS细节进阶之初识LESS

前言

写CSS时总会产生大量重复代码,复用率极低,于是简单学习了LESS,让CSS的编写也模块化,灵活化起来

1.变量(Variables)

@name:value;声明变量,不能改变,不能重复声明

  1.1变量插值{} 用大括号,此时不用加@

  1.2懒加载 同一个作用域生命的变量,后面覆盖前面

  1.3拓展

2.混合(Minins)——不强调层级

将一个选择器当作属性应用在另一个选择器内,则前一个选择器内的属性就会展开在后一个选择器内

   2.1语法.a()=.a

   2.2想用一个混合属性但不想其最终应用出来,可以在名字后面加()

   2.3 伪类/伪元素选择器也会被展开

   2.4条件混合#namespace when(@mode=huge)

   2.5 !important关键字,将所有展开的所有属性标记为!important

   2.6给混合器传参/设置默认值

   2.7多个参数,用分号分隔,如果形参匿名传则按位置赋值,如果参数按变量名字传,则按变量名一一对应赋值

   2.8 @arguments,在mixins内引用代表传进来的所有参数

   2.9 @rest接受可变数量的参数,可以用@rest接收

   2.10模式匹配:如果形参不是变量,传进去的时候如果不一样就不匹配,变量匹配所有实参

   2.11模拟函数

3.嵌套——强调层级

子元素的样式可以直接写在父元素的样式内部,不需要选择器嵌套单独写

4.嵌套指令会冒泡@media @supported@document

指定一个选择器在不同情况下的属性不同,可以把不同情况下的样式写在这个选择器下,编译后,选择器和对应的样式会设置在不同的指令下

@font-face @keyframes 指令会直接冒泡到外层,因为其不依赖属性

5.操作符

可以对单位使用+-*/计算,也可以将变量当作操作符对象,单位要注意

6.转义

~‘anything’引号内的字符串不会有任何变化

7.函数

内置了一些函数

8.命名空间

想访问对象属性一样引入某一封装好的对象样式,用id选择器作为名字可以避免被覆写

9.作用域

内层变量覆盖外层变量

10.注释,同js注释语法

11.导入

@import “xxx”

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容