摘要: Extend就相当于Java的继承,它允许一个选择器继承另一个选择器的样式。Extend有两种语法格式。 一种是: 另一种是: 假设有一个 .inline 的类: 现在希望 nav ul 选择器能够让继承 .inline类的 color 属性,就可以使用以下两种方式的任意一种来实现: 或者 这两种方 阅读全文
posted @ 2017-11-28 20:39 歪脖先生 阅读(8984) 评论(0) 推荐(1) 编辑
摘要: 合并是LESS的一个特性,它允许通过指定的语法来为某个属性添加使用逗号或空格分隔的值的列表。对于文本阴影、盒阴影、背景、变换等允许使用值的列表的属性,合并非常有用。 合并的语法,就是在属性名称和冒号之间,添加一个 “+” 或 “+_” 标志: 1)当使用 “+” 标志时,列表间以逗号分隔。如: 编译 阅读全文
posted @ 2017-11-28 20:36 歪脖先生 阅读(658) 评论(0) 推荐(0) 编辑
摘要: Less循环 在Less中,mixin可以调用它自身。通过这种递归调用,再结合Guard表达式和模式匹配,就可以写出各种循环结构。如,使用循环来创建一个网格类: 编译后的CSS代码为: 阅读全文
posted @ 2017-11-28 20:35 歪脖先生 阅读(2217) 评论(0) 推荐(0) 编辑
摘要: Less的条件表达式 当需要根据表达式,而不是参数的值或数量进行匹配时,条件表达式(Guards)就显得非常有用。如果你熟悉函数式编程的话,对条件表达式也不会陌生。 为了尽可能地接近CSS的语言结构,Less使用关键字 when 而不是 if/else来实现条件判断,因为 when 已经在CSS的 阅读全文
posted @ 2017-11-28 11:01 歪脖先生 阅读(9080) 评论(0) 推荐(0) 编辑
摘要: Less的模式匹配 Less提供了一种机制,允许根据参数的值来改变 mixin的行为。比如,以下代码就可以让 .mixin 根据不同的 @switch 值而表现各异: 此时,在调用 .mixin 时:如果 @switch 设为 light,就会得到浅色;如果 @switch 设为 dark,就会得到 阅读全文
posted @ 2017-11-28 10:54 歪脖先生 阅读(835) 评论(0) 推荐(0) 编辑
摘要: Less的!important关键字 在调用 mixin 时,如果在后面追加 !important 关键字,就可以将 mixin 里面的所有属性都标记为 !important。如,以下Less代码: 编译后的CSS代码为: 阅读全文
posted @ 2017-11-28 10:53 歪脖先生 阅读(1560) 评论(0) 推荐(0) 编辑
摘要: Less的@import指令 Less中,可以通过 @import指令来导入外部文件。@import指令可以放在代码中的任何位置,导入文件时的处理方式取决于文件的扩展名: 如果扩展名是 .css,文件内容将被原样输出。 如果是任何其他扩展名,将作为LESS文件被导入。 如果没有扩展名,将给他添加一个 阅读全文
posted @ 2017-11-28 10:19 歪脖先生 阅读(14553) 评论(0) 推荐(2) 编辑
摘要: Less命名空间 当我们拥有了大量选择器的时候,特别是团队协同开发时,如何保证选择器之间重名问题?如果你是 java 程序员或 C++ 程序员,我猜你肯定会想到命名空间 Namespaces。 Less 也采用命名空间来对名字进行分组,来避免重名问题。如以下Less代码: 这样我们就定义了一个名为 阅读全文
posted @ 2017-11-28 10:17 歪脖先生 阅读(653) 评论(0) 推荐(0) 编辑
摘要: Less注释语法 适当的注释是保证代码可读性的必要手段,Less支持两种类型的注释:多行注释和单行注释。 1)形如 /* */ 的多行注释。如: 2) 双斜线的单行注释。如: 但需要注意的是:单行注释是不会出现在编译后的 CSS 文件中,如果是针对样式说明的注释,建议使用多行注释。 阅读全文
posted @ 2017-11-28 10:16 歪脖先生 阅读(3947) 评论(0) 推荐(0) 编辑