对less的理解
我对less的理解:
less是写css时可以采用的另一种写法,用less的格式写出来的东西,可以通过编译器
编译成css。也就是可以使用某种方法,把less文件变成css文件。编译成的css文件和平时自己写的css没什么区别,浏览器自动可读
好处
使用less而不是直接写css有几个好处:
less使用常量的形式保存一个值,哪里用到这个常量都行,这个常量的作用域应该是这个less文件吧?(这里的常量类似于js的变量,只是常量定义了之后不能动态修改值)。
编译后可以是压缩后的css,这样就不用自己压缩啦。
-
选择器嵌套写法。
比如一个div内有几个其它DOM,css的写法是: div{display:block} div a{color:#fff} div input{border:0} 而用less可以这样 div{ display:block a{color:#fff} input{border:0} }
还有其它,我不自己写了,看这里http://www.cnblogs.com/hooray/archive/2011/12/02/2272212.html
如何使用
less有几种使用方法:
部署前编译。据说这种方法是官方推荐的,就是你的less和你的html、js是没有关联的,html中直接引用编译好的css就行。一些ide支持自动检测less文件改动并自动编译的功能,
webstorm
和phpstorm
就有。服务端编译。就是请求less的时候再编译。
-
浏览器端编译。就是引用less文件之后,再引用
less.js
来编译less文件,编译好之后会生成style
标签添加到head里。这种方法据说官方最不推荐,
在编译完成之前,body的宽度会被设为0,我也不知道为什么,但实际就是这样。
-
可以使用外部设置的变量。
在加载less.js前写 <script> less = { globalVars: { var1: '"/string value"', var2: 'regular value' } }; </script>
上面定义的变量有一个问题就是,如果你的变量是个字符串,而且第一个是
/
符号,必须像上面var1
那样用单引号+双引号来包围字符串,否则less编译时会报错。
黒之染
几年半个人练习生,喜欢ctrl c、ctrl v、delete
推荐阅读
jest如何执行单组测试用例
假如有这个文件tests/test.test.ts: {代码...} 我只想运行里面的t2,则可以这样: {代码...} 跨级别之间用空格分隔即可。相关文档:[链接]
黒之染赞 2阅读 1.5k
Less用法小记
方法一:通过双斜杠//的方式来进行注释,使用此方法来进行注释在编译成css后,注释在css文件中不会进行展示。方法二:通过斜杠加型号/** */的方式来进行注释,注释会留在编译生成的css文件中。
Qing赞 2阅读 553
这是你理解的CSS选择器权重吗?
极度投入,深度沉浸,边界清晰前端小菜鸡一枚,分享的文章纯属个人见解,若有不正确或可待讨论点可随意评论,与各位同学一起学习~欢迎关注 『前端进阶圈』 公众号 ,一起探索学习前端技术......公众号回复 加群 ...
控心crazy阅读 602
less 循环生成css3动画!(@keyframes)
为了方便调试,先全局安装一个lessnpm install -g less创建style.less文件,写入less语法使用lessc styles.less styles.css将less文件编译成css文件需要一个0%到100%的每一帧动画代码: {代码...} css文件输出结果...
阿曾的奶油汤阅读 220
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。