less简介
来源:互联网 发布:linux基础教程第二版 编辑:程序博客网 时间:2024/05/22 14:15
一、什么是less?
Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。
LESS官网(中文):http://lesscss.cn/
二、less怎么用?
方式一:直接通过引入less.js文件,通过浏览器端来编译.less文件(类css文件),当然先要下载less.js文件放在项目文件中,目录就来个简单的。
—-less
—-images
—-js
index.html
- 1
- 2
- 1
- 2
.less文件是一定要在less.js文件之前引入的。我们也可以把.js
文件放在</body>
的前面。
方式二:通过编译工具将.less文件编译成css文件之后,在html文件中直接引用。
常用的编译工具有(新人知道这个就好了)Koala(考拉,国人自己开发)
–http://koala-app.com/index.html
三、less怎么写?
其实要写的话,你直接全部按照css去写也可以。当然,如果这样写的话就不需要less了,他主要是增加了变量、混合、函数、嵌套、命名空间、作用域等方便编码的写法。
比如:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
编译之后就是
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
这样是不是对于好多相同的样式设置都不用写好多遍了。
1.注释(Comments)
和js一样,单行“//”和多行“/* /”。编译时会删除“//”保留“/ */”。
2.变量(Variables)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
3.混合(Mixins)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
4.嵌套(Nested Rules)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
5.匹配模式
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
6.地址(把地址当成常量)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
写到这里基础写法就不介绍了,大家上官网大概看一遍API就OK了,然后在工作中慢慢写慢慢学吧。
初学的话我建议先看一遍API然后写点简单的例子,然后看看bootstrap的less源码,你就知道那些你常用到的类是怎么写的了。展示一些常用的给大家看下。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
以后像这种代码就不用重复写了是不是很爽。特别是那种要写内核兼容的。
最后给大家说一下我的less文件是怎么来写的。(目录–参考bootstrap)
目录:
–docs文档
–img图片
–less样式
|-variables.less变量
|-mixins.less混合
|-reset.less重置
|-layouts.less布局
|-sprites.less图标
–js插件
小文件的话直接全部写在一个文件里就好了,不过也可以分开写,通过import导入也是一样的。
开始用less写过几个页面之后就可以看看bootstrap中less和z.less是怎么写的了。然后也可以参照他们的写法调整到自己的工作用。
z.less:http://www.aibusy.com/zless/index.html
- Less简介
- Less简介
- LESS 简介
- Less 简介
- less简介
- LESS简介
- Less简介
- less简介
- Less简介
- linux less命令简介
- Linux less 简介
- linux less命令简介
- linux less命令简介
- LESS CSS 框架简介
- LESS CSS 框架简介
- LESS CSS 框架简介
- LESS CSS 框架简介
- LESS使用简介
- 系统广播
- android studio 出现Error:Execution failed for task ':app:buildInfoDebugLoader'.的解决办法
- java基础 --自己随手复习
- Android系统广播大全及开机自启动的Service
- linux下编译php中configure参数具体含义
- less简介
- IO流_FileOutputStream写出数据
- List 1 17.02.07
- HTML标签之元信息类标签
- Python及测试相关资料链接
- 35.横竖屏切换
- 统一入口(定向入口文件)-安全
- 求有环链表相交的第一个交点
- ccf试题 序列分段