初识less

半年瞎忙活了,就找到了一只手的工作,算是安稳了,内心还是很纠结,里面有两个小人,黑人说去互联网吧,年轻,总要努力奋斗吧,你甘心在一个国企里,没有技术大牛可仰慕,没有潮流技术追赶,天天碌碌无为,有什么意思?白人在说,女孩子家家的,当什么码农,加班多压力大,而且还要嫁人照顾家庭,现在不是很好嘛,待遇不错,很清闲,没事的时候可以搞些副业神马的。啊,神啊,人生怎么过才能有意义,是努力奋斗?还是尽情享受?奋斗成功留名的也就那几个人,享受生活的就敢于平庸吗?什么是有意义,头疼~~~~吐槽一下,然后决定即使周围人不关心技术,我还是要继续学习!!重拾半年前的博客,电脑重装后由npm到github上传都走了一遍,不熟的人都来看看撒,说不定有帮助。

less是什么?

一种动态样式语言.
LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承, 运算, 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox),也可以借助Node.js或者Rhino在服务端运行。

之前我们是针对样式, 直接写css, 很多颜色, 字体等重复, 我们也只能尽量整合, 因此很多并不认为css是一个语言, 因为是固定的。 那么less让css变的更像语言了。

为什么会有less?

  1. 通用组件, 例如各种内核都兼容的圆角效果或者下三角形,这种组件生成的CSS效果都是一样的,如果每个用到的都复制一份代码, 这样子代码复用性就会很差。 这样子我们可以想一下代码复用常用的模块~, 我们为何不把这个组件封装起来, 然后在调用? 就像bootstrap等各种框架内, 把常用的组件写死, 我们只要设置label或者class就行了。
  2. 常用属性的频繁更改:例如空间主题颜色更换,或者字体更换, 这时候我们不可能手动找到各个颜色地方去修改,要是有变量管着这些或者一个接口管着就行了, 我们只需要改一个接口值。
  3. 还有一个很玄乎的, 没看懂呢~,估计等用熟了就能理解吧。 如果html层级结构比较复杂,怎么结构化你的css,做到selector的精确打击。这个怕是很困难的吧。
    上边这些SASS和LESS都可以解决,而这还只是给CSS带来的最浅显的好处。

对应的应该是一下:
1:变量定义,@navColor:#96CDCD,这样后面就不用还去取样,查表之类的。
2:mixin,减少n多代码量。ps:带参数的更帅。
3:嵌套,逻辑清楚。
4:颜色函数。

less使用情况(个人情绪)

作为一个说一下感受啦~
我觉得一个人随意写写可以尝试用一下, 最难点我觉得应该是怎么判断哪些通用? 那些可以提炼出来,没用过就不怎么说啦, 借知乎的话~
1、less适合有css经验的人使用
2、less用于网站重构非常不错
3、less可用于写css框架

less语法与编译

1 客户端解析
在这个之前加载less文件

2 nodejs lessc
lessc 源文件 目的文件

3 借助第三方软件 koala
直接添加less文件夹, 然后会自动在相应目录下创建一个css文件夹进行解析

这样子客户端解析会浪费时间, 还是尽量在后台解析好, 然后传给前台

文章目录
  1. 1. less是什么?
  2. 2. 为什么会有less?
  3. 3. less使用情况(个人情绪)
  4. 4. less语法与编译