动态样式语言Less学习笔记
2014-02-21 16:49
423 查看
介绍资料参见:http://www.bootcss.com/p/lesscss/
LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承,运算, 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可以借助Node.js或者Rhino在服务端运行。
1、在引入
2、变量
变量允许我们单独定义一系列通用的样式,然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。
3、混合
混合可以将一个定义好的class A轻松的引入到另一个class B中,从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用,就像使用函数一样。
4、嵌套规则
我们可以在一个选择器中嵌套另一个选择器来实现继承,这样很大程度减少了代码量,并且代码看起来更加的清晰。
5、函数 & 运算
运算提供了加,减,乘,除操作;我们可以做属性值和颜色的运算,这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码,如果你愿意的话可以操作属性值。
6、引导
当我们想根据表达式进行匹配,而非根据值和参数匹配时,导引就显得非常有用。如果你对函数式编程非常熟悉,那么你很可能已经使用过导引。
为了尽可能地保留CSS的可声明性,LESS通过导引混合而非if/else语句来实现条件判断,因为前者已在@media query特性中被定义。
when关键字用以定义一个导引序列(此例只有一个导引)。
在导引序列中可以使用
7、is*函式
如果想基于值的类型进行匹配,我们就可以使用is*函式:
如果你想判断一个值是纯数字,还是某个单位量,可以使用下列函式:
8、运算
任何数字、颜色或者变量都可以参与运算.
9、Color 函数
LESS 提供了一系列的颜色运算函数. 颜色会先被转化成 HSL 色彩空间, 然后在通道级别操作
10、Math 函数
LESS提供了一组方便的数学函数,你可以使用它们处理一些数字类型的值
11、命名空间
有时候,你可能为了更好组织CSS或者单纯是为了更好的封装,将一些变量或者混合模块打包起来, 你可以像下面这样在
12、作用域
LESS 中的作用域跟其他编程语言非常类似,首先会从本地查找变量或者混合模块,如果没找到的话会去父级作用域中查找,直到找到为止.
13、Importing
你可以在main文件中通过下面的形势引入
14、字符串插值
变量可以用类似ruby和php的方式嵌入到字符串中,像
15、JavaScript 表达式
JavaScript 表达式也可以在.less 文件中使用. 可以通过反引号的方式使用
LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承,运算, 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可以借助Node.js或者Rhino在服务端运行。
1、在引入
less.js前先要把你的样式文件引入 :
<link rel="stylesheet/less" type="text/css" href="styles.less"> <script src="less.js" type="text/javascript"></script>
2、变量
变量允许我们单独定义一系列通用的样式,然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。
3、混合
混合可以将一个定义好的class A轻松的引入到另一个class B中,从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用,就像使用函数一样。
4、嵌套规则
我们可以在一个选择器中嵌套另一个选择器来实现继承,这样很大程度减少了代码量,并且代码看起来更加的清晰。
5、函数 & 运算
运算提供了加,减,乘,除操作;我们可以做属性值和颜色的运算,这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码,如果你愿意的话可以操作属性值。
6、引导
当我们想根据表达式进行匹配,而非根据值和参数匹配时,导引就显得非常有用。如果你对函数式编程非常熟悉,那么你很可能已经使用过导引。
为了尽可能地保留CSS的可声明性,LESS通过导引混合而非if/else语句来实现条件判断,因为前者已在@media query特性中被定义。
when关键字用以定义一个导引序列(此例只有一个导引)。
在导引序列中可以使用
and,not关键字实现与条件
7、is*函式
如果想基于值的类型进行匹配,我们就可以使用is*函式:
iscolor
isnumber
isstring
iskeyword
isurl
如果你想判断一个值是纯数字,还是某个单位量,可以使用下列函式:
ispixel
ispercentage
isem
8、运算
任何数字、颜色或者变量都可以参与运算.
9、Color 函数
LESS 提供了一系列的颜色运算函数. 颜色会先被转化成 HSL 色彩空间, 然后在通道级别操作
10、Math 函数
LESS提供了一组方便的数学函数,你可以使用它们处理一些数字类型的值
11、命名空间
有时候,你可能为了更好组织CSS或者单纯是为了更好的封装,将一些变量或者混合模块打包起来, 你可以像下面这样在
#bundle中定义一些属性集之后可以重复使用
12、作用域
LESS 中的作用域跟其他编程语言非常类似,首先会从本地查找变量或者混合模块,如果没找到的话会去父级作用域中查找,直到找到为止.
13、Importing
你可以在main文件中通过下面的形势引入
.less文件,
.less后缀可带可不带
14、字符串插值
变量可以用类似ruby和php的方式嵌入到字符串中,像
@{name}这样的结构
15、JavaScript 表达式
JavaScript 表达式也可以在.less 文件中使用. 可以通过反引号的方式使用
相关文章推荐
- 解决Sublime3下Less2CSS插件报错,并且不能修改设置解决的问题
- 常用的CSS缩写语法小结可帮助你减少CSS文件大小
- css特效 一道闪光在图片上划过代码
- CSS学习笔记(基本知识)
- CSS样式表中的优先权
- CSS中overflow的含义与属性
- css3的一个书签页
- css3 box-flex 弹性盒模型的应用
- html css将表头固定的最直接的方法
- 10个CSS简写/优化技巧
- CSS定义Radio单选项和Checkbox复选框样式有效代码
- css3中检验表单的required,focus,valid和invalid样式
- 测试css2.1选择器IE6/7/8支持情况,属性选择器/子元素/相邻
- CSS入门三
- 利用好CSS,实现Qt控件美化
- css布局学习笔记之box-sizing
- 16进制颜色对应表
- 常用的CSS命名规则
- 原生CSS动画回调事件
- 原生CSS动画回调事件