前言
大家好,我是小张啊,一个刚踏入IT行业的小白。其实也还不算正式踏入,因为目前还在学习中,并没有参加工作,发布图文的目的呢,就是为了说加深一下自己对知识点的理解,然后就是分享啦,毕竟以后作为一名程序猿,分享技术还是很重要滴!以后也会不定期发布一些自己所学感觉比较重要的知识点。好了废话不多说,今天给大家带来的是Less。
Less是什么?
Less
Less是一门CSS预处理语言,或者说它就是CSS的预处理器。它扩充了CSS语言,增加了诸如变量、嵌套、计算等功能,使CSS具备一定的逻辑性与计算能力。
了解了Less是什么,那么它的用法与作用是什么?
1.less的计算能力。众所周知,CSS是不具备计算能力的,这个弊端尤其在移动适配无限放大。而less可以直接书写计算表达式。
①加、减、乘在less里都可直接书写,例:
②除法则需要添加小括号或者.
2.less嵌套。可利用其快速生成后代选择器,避免因嵌套关系深,类名长引起不必要的错误,也可折叠所有有嵌套关系的样式,进行快速复制。
注意:不生成后代选择器,表示当前选择器,通常配合伪类或伪元素使用。
3.less变量。提前给一个样式设置好变量,需要用时直接调用即可(乍看之下好像没什么用,可是当页面需要统一修改某个样式的属性值时呢,你就会发现less变量的好用之处),类似于给一个样式提前起好类名。
语法:定义变量:
变量名:值;使用变量:CSS属性:
变量名;4.less注释。其实less注释与CSS、JS注释并没有什么大的差别,唯一需要注意的就是less的单行注释是不会编译到CSS中的。
语法:
单行注释://注释内容快捷键:ctrl+/
块级注释:/*注释内容*/快捷键:shift+alt+a
注意:快捷键可修改为自己熟悉的,具体操作如下:
5.less导入。可以使用less导入写法引入其他less文件,例如引入初始化样式文件及公共样式文件后,这两个文件设置的样式就都会被引入到当前less文件中了,也可以在编译后的CSS文件中看到具体都有哪些样式。
语法:导入:
import"文件路径";注意:如引入的是less文件,那么写不写文件后缀名都可以。
6.less导出。less导出编译的CSS文件有两种方式,一种是配置EasyLess插件在固定位置导出,另外一种则是在less文件顶部书写代码,单独指定路径导出。
①方式一:
②方式二:
7.less禁止导出。在工作中有些文件是无需被导出的,例如初始化文件等,直接引入即可。
语法:在less文件首行添加://out:false
好了,今天整理的less相关内容就这么多了,可能less在其他场景还会有别的用法,但目前作为初学者的我只是把学习中所掌握的内容整理出来,加深自己理解的同时也供大家参考,以后在学习过程中再慢慢深究吧。
有其他用法需要交流的朋友可以私我哈。
最后有句话想分享给和我一样正在学习中的各位朋友们。
学习是一个漫长的过程,道阻且长,行则将至,请从容!我们共勉!