首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >对less的理解

对less的理解

作者头像
黒之染
发布2018-10-19 14:25:19
1K0
发布2018-10-19 14:25:19
举报

我对less的理解:

less是写css时可以采用的另一种写法,用less的格式写出来的东西,可以通过编译器编译成css。也就是可以使用某种方法,把less文件变成css文件。编译成的css文件和平时自己写的css没什么区别,浏览器自动可读

好处

使用less而不是直接写css有几个好处:

  1. less使用常量的形式保存一个值,哪里用到这个常量都行,这个常量的作用域应该是这个less文件吧?(这里的常量类似于js的变量,只是常量定义了之后不能动态修改值)。
  2. 编译后可以是压缩后的css,这样就不用自己压缩啦。
  3. 选择器嵌套写法。 比如一个div内有几个其它DOM,css的写法是: div{display:block} div a{color:#fff} div input{border:0} 而用less可以这样 div{ display:block a{color:#fff} input{border:0} }
  4. 还有其它,我不自己写了,看这里http://www.cnblogs.com/hooray/archive/2011/12/02/2272212.html

如何使用

less有几种使用方法:

  1. 部署前编译。据说这种方法是官方推荐的,就是你的less和你的html、js是没有关联的,html中直接引用编译好的css就行。一些ide支持自动检测less文件改动并自动编译的功能,webstormphpstorm就有。
  2. 服务端编译。就是请求less的时候再编译。
  3. 浏览器端编译。就是引用less文件之后,再引用less.js来编译less文件,编译好之后会生成style标签添加到head里。
    1. 这种方法据说官方最不推荐,
    2. 在编译完成之前,body的宽度会被设为0,我也不知道为什么,但实际就是这样。
    3. 可以使用外部设置的变量。 在加载less.js前写 <script> less = { globalVars: { var1: '"/string value"', var2: 'regular value' } }; </script>
    4. 上面定义的变量有一个问题就是,如果你的变量是个字符串,而且第一个是/符号,必须像上面var1那样用单引号+双引号来包围字符串,否则less编译时会报错。
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 好处
  • 如何使用
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档