哒哒哒~ 每天学习一点点新东西
通过阅读别人的博客初识了css预处理器的强大,我选择了less预处理器作为入门,同时,我也认为利用处理器对css进行某些操作能极大地简化后期的维护和管理,在编写的时候也能带来一些便利,当然这只是我目前的认知,在系统的学习之前的认知~ 但是毫无疑问,在高速的技术迭代中,前端的发展趋于一个更加简化和智能的方向。
Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。
Less 可以运行在 Node、浏览器和 Rhino 平台上。
–来自less官方中文文档。
工欲善其事,必先利其器。
想要学东西,先要搭环境。
less可以在多种环境中编译,我选择的是桌面客户端,下载了一个非常cute的小软件koala,在把项目拖入到koala中后,第一次手动编译之后,他就会自动将less文件自动编译成css文件。也可以直接在webstrom中配置一个编译环境出来。
接下来,就要是语法部分了
lee中文文档中关于语言特性的介绍
- 注释 //和/* */两种注释,后者在编译的过程中是会被编译的
- 变量 定义变量的格式为 @变量名:设置值;使用时就直接作为一个属性值。
1 | @test_width:300px; |
- 混合(mixin) 就是一种将一系列属性从一个规则集引入(“混合”)到另一个规则集的方式。
1 | //less文件 |
这也是混合的一种实用的功能
1 | //less文件 |
匹配模式
相当于给一个函数设定不同的参数,如果学过java的话,参照函数的重载,他们参数不同拥有不同的功能,而在less模式匹配这里,参数不同对应不同的样式。(这样写暂时便于我自己的理解,以后理解的深一点了应该能把这部分解释的更好一些,顺便提醒:不要弄混了java的重载和重写)运算
可以对less中的变量进行 + — * / 的运算嵌套规则
就是很字面的意思呗
样式集合可以嵌套在另一个样式集合里~
1 | less文件 |
- arguments变量
@arguments 一次性传递所有变量~
炸了炸了,以后等我进阶了再作补充吧~
最近感觉学习的很轻松,每当这种时候就觉得很惶恐,感觉是认知停留在了一个比较浅的层次,还是得抓紧时间好好学习啊~
昨晚做梦,梦到一觉睡到了明年四月,醒过来最着急的是春招过了,而我技术还没学到家···sad,然后被自己着急醒了还好还好