less语言基本语法教程(入门)
一、CSS解析
css是一门标记性语言,语法简单,对使用者的要求也比较低。
缺点:1、对于css:使用css时需要书写大量的看似没有逻辑的代码,不方便维护和扩展,不利于复用;
2、对于开发者:如果一个程序员缺乏对css的编写经验,那么想写出组织良好且易于维护的css代码是一件很困难的事情。
二、LESS简介
LESS 是一门 CSS 预处理语言,LESS在CSS的语法基础上增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展,可以让我们用更少的代码做更多的事情。另外,LESS可以运行在 Node 或浏览器端。
官网地址:http://lesscss.org/ (英文网)
http://less.bootcss.com/ (中文网)
bootstrap官网中less教程: http://www.bootcss.com/p/lesscss/
三、LESS引入
1、客户端使用.less文件: 先要从 http://lesscss.org 下载 less.js 文件,然后在我们需要引入 LESS 源文件的 HTML 中加入如下代码:
(1)<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
(2)引入手机端初始化.css(reset.css)
(3)用rem来写的话必须引入media-100.css和iconfont.css (media-100.css文件是封装好的css,两者属于可选)
(4)<link rel="stylesheet/less" type="text/css" href="styles.less">
注意 :此处的rel属性值是“ stylesheet/less ”。
自己写的less源文件一定要在less.js引入之前引入 ,才能保证自己的less源文件正确编译解析。
(5)<script src="less.min.js" type="text/javascript"></script>
2.在开发工具中使用:主要是借助于LESS的编译器,将less源文件编译生成最终的css文件( 推荐 )
以HBulider开发工具为例:
(1)打开HBuilder--工具 -- 预编译器设置 - -新建 -- 文件后缀 .less--触发命令地址 (选择...找到.cmd的路径)--命令参数 %FileName% %FileBaseName%.min.js --- 智能完成/确定
(2)在项目里面新建less文件,写less时系统会自动编译成css文件(如果没有成功,关闭HBuilder,右键以管理员身份打开)
四、LESS的使用(CSS样式处理)
1、变量:一次定义可以重复使用
变量允许我们单独定义一系列通用的样式,然后在需要的时候去调用,所以在做全局样式调整的时候我们只需要修改几行的代码就OK了。
| |
2、混入--Mixins:先申明一个类,然后在其它类中调用当前这个类
混合可以将一个定义好的classA引入到另一个classB中,从而简单的实现classB继承classA中的所有属性,我们还可以带参数调用,就像使用函数一样。
| |
3、继承
有类A用了一组样式,另外一个类B也想用这个样式,这样的话类B可以继承类A的样式:
| |
4、嵌套规则
我们可以在一个选择器中嵌套另一个选择器来实现继承,这样很大程度上减少了代码量,并且代码看起来更加的清晰,
其中&符号的使用——如果你想写串联选择器而不是后代选择器,就可以用到&了,这点对伪类尤其有用,如:hover 和:focus。
| |
5、函数&运算
运算提供了加减乘除操作;我们可以做属性和颜色的运算,这样就可以实现属性值之间的复杂关系。
LESS中的函数——映射了JavaScript代码,还可以操作属性值。
|
|
|
|
6、作用域
LESS中的作用域和其他编程语言相似,LESS会从本地查找变量或者混合模块,如果没找到的话会去父级作用域中查到,直到找到为止。
| |