LESS预处理器

来源:互联网 发布:wp10记录仪软件 编辑:程序博客网 时间:2024/05/29 16:26
变量:
LESS样式中唯一的区别就是变量名之前使用的是@字符



作用域:
LESS中的作用域和其它程序语言的中的作用域非常的相同,它首先会查找局部定义的变量,如果没有找到,会像冒泡一样,一级一级的往下查找,直到根为止


3.混合(JS函数的封装)
Mixins是CSS预处理器中语言中最强大的特性,简单点来说,Mixins可以将一部分样式抽出,作为单独定义的模块,被很多选择器重复使用。平时你在写样式时肯定有碰到过,某段CSS样式经常要用到多个元素中,这样你就需要重复的写多次。在CSS预处理器语言中,你可以为这些公用的CSS样式定义一个Mixin,然后在你CSS需要使用这些样式的地方直接调用你定义好的Mixin。这是一个非常有用的特性,Mixins被当作一个公认的选择器,还可以在Mixins中定义变量或者默认参数。
在LESS中,混合是指将定义好的“ClassA”中引入另一个已经定义的“Class”,就像在当前的“Class”中增加一个属性一样。

不过LESS样式中声明Mixins和Sass声明方法不一样,他更像CSS定义样式,在LESS可以将Mixins看成是一个类选择器,当然Mixins也可以设置参数,并给参数设置默认值。不过设置参数的变量名是使用“@”开头,同样参数和默认参数值之间需要使用冒号(:)分隔开。

正如Sass混合是的示例,同样在LESS样式中定义一个名叫“error”的Mixin,这个“error”设置了一个参数“@borderWidth”,在没有特别定义外,这个参数的默认值是“2px”:

转译的代码:


4.嵌套:
CSS预处理器语言中的嵌套指的是在一个选择器中嵌套另一个选择器来实现继承,从而减少代码量,并且增加了代码的可读性。比如说,我们在CSS中多个元素有一个相同的父元素,那么写样式会变得很乏味,我们需要一遍一遍的在每个元素前写这个父元素,除非给特定的元素添加类名“class”或者ID。


相反,使用CSS预处理器语言的嵌套特性,我们可以在父元素的大括号({})里写这些元素。同时可以使用“&”符号来引用父选择器。对于Sass、LESS和Stylus这三款CSS预处理器语言的嵌套选择器来说,他们都具有相同的语法:


5.继承
LESS的继承是将Mixins中的样式嵌套到每个选择器里面。这种方法的缺点就是在每个选择器中会有重复的样式产生

转译出来的css代码:


6.运算符
CSS预处理器语言还具有运算的特性,其简单的讲,就是对数值型的Value(如:数字、颜色、变量等)进行加减乘除四则运算。这样的特性在CSS样式中是想都不敢想的,但在CSS预处理器语言中对样式做一些运算是没有任何问题的


7.颜色函数
颜色函数是CSS预处理器语言中内置的颜色函数功能,这些功能可以对颜色进行处理,例如颜色的变亮、变暗、饱和度控制、色相控制,渐变颜色等处理十分的方便。


8.注释
css预处理器语言中的注释是基础部分,这三款语言处理器语言除了具有标准的css注释以外,还具有单行注释,只不过单行注释不会被转译出来。
单行注释跟javascript语言的注释一样,使用双斜杠(//),但单行注释不会输出到css中。


9.条件语句
LESS的条件语句使用有些另类,它不是我们常见的关键词if和else if之类,它的实现方式是利用关键词"when"

利用When以及<,>,=,<=,>=是非常方便的。LESS提供了很多类型检查函数还辅助条件表达式:
iscolor,isnumber,isstring,iskeyword,isurl等等。