侧边栏

LESS学习笔记

发布于 | 分类于 前端/CSS

在招聘要求中看见的需要熟悉LESS/SASS,然而我一个都没见过。

LESS是一种动态样式语言,可以对代码进行预编译生成所需的CSS代码(呃我是这么理解的,有失偏颇),反正是了结了我“HTML和CSS哪能算编程语言呢”的疑惑。查了些资料学习了一下,当然现在学到的只是皮毛,也有不少疑惑。

注:使用的编译工具是Koala

开头先感谢两篇文章w3cplusbootcss,简洁明了,通俗易懂。

变量

@vname,相当于定义了一个可重复利用的值,只需要修改定义变量的数值就可以修改使用该变量的属性,需要注意的是变量只能被定义一次(后定义的变量会覆盖前面的变量),类似于c++宏或者const常量。可以把颜色属性值red,blue等看做是css中定义好的变量,只是less中的变量使用范围广泛得多了。

变量可以计算,还可以将变量名定义为变量。

混合

可以将经常重复使用的样式整合在一起写成单独的类,再嵌套进所需要的选择器中,这个类可以传入参数甚至带上默认参数,是不是很函数很像?没错,相当于定义了一个函数并在所需要的选择器中进行调用。

多个参数可以使用逗号隔开,当传入的参数表示复合属性的时候,可以使用@arguments参数代替。

嵌套规则

当书写组合,后代选择器的时候,可以使用嵌套,很直观的看出HTML的DOM结构层次,大大减少了代码量(只是表面的假象,一味的嵌套编译生成的CSS代码选择器会多到吓死人)。

在嵌套中需要注意的是&的使用,使用&表示多类选择器,而不加&表示后代选择器。

运算符与函数

Less中的Operations主要是针对任何数字、颜色、变量的操作,可以对其是行加、减、、乘、除或者更复杂的综合运算;

而Functions主要是针对Color funtions 加减时忽略其单位名字,颜色函数主要有lighten(@color,10%),darken,saturate,desaturate,fadein,fadeout,spin等,以实参颜色为标准进行处理并返回新的颜色。

命名空间

如果有两个选择器的样式完全相同,则可以将一个选择器的样式引用到另一个选择器样式上面。

less
#one a {
    color: red;
    #two > .button;//将a标签样式引到.button类上
}

这样不会造成书写混乱不堪吗?这么做节省的代码量与逻辑条理哪个更重要呢?

变量范围

变量作用范围采用就近原则,元素先找本身有没有这个变量存在,如果本身存在,就取本身中的变量,如果本身不存在,就寻找父元素,依此类推,直到寻找到相对应的变量。

注释

跟大多数编程语言相同,支持单行//和多行/**/注释

最后

跟学习任何东西一样,如果想掌握Less需要大量的练习,目前的问题是找不到使用Less的理由,比如一个变量,在拿到设计图之后并不知道每个模块具体的尺寸颜色等,需要同设计沟通。

可能在CSS使用熟练之后会养成一定的直觉吧。多练习多练习。

使用Less能够节省很多编写CSS代码的时间,且代码的可读性很强;但是冥冥之中感受到实际编译生成的CSS代码量并不会减小,根据“样式重用”的思想,如果滥用混合可能会造成代码的臃肿,这是我个人的一点感觉,毕竟刚学习Less,应当在使用中给自己提个醒,选择性的学习,有待深入。

你要请我喝一杯奶茶?

版权声明:自由转载-非商用-保持署名和原文链接。

本站文章均为本人原创,参考文章我都会在文中进行声明,也请您转载时附上署名。