less简单笔记
来源:互联网 发布:淘宝头像 编辑:程序博客网 时间:2024/05/20 03:07
less
less是一种动态样式语言,属于css预处理器的范畴,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展
less的中文官网:http://lesscss.cn/
bootstrap中关于less的介绍
Less编译工具
koala 官网:www.koala-app.com
less中的注释
以//开头的注释,不会被编译到css文件中 以/**/包裹的注释会被编译到css文件中
less中的变量
使用@来申明一个变量:@w:width; 在使用这些定义的变量的使用,必须使用{}来将其包起来。
例如:@{w}:200px;
- 1.作为普通属性值来使用:直接使用@w width:@w;
- 2.作为选择器和属性名:#@{selector的值}的形式
- 3.作为URL:@{url}
- 4.变量的延迟加载: (在less文件中,一个{}就表示一个作用域,当作用域执行完之后变量才生效)
less中的嵌套规则
- 1.基本嵌套规则
- 2.&的使用 (&表示他之前的祖先元素选择器)
less中的混合
混合就是将一系列属性从一个规则集引入到另一个规则集的方式
- 1.普通混合
- 2.不带输出的混合 (将定义不输出的名字,带上括号,表示不会将编译内容显示在CSS上)
- 3.带参数的混合(传递多个参数时使用逗号隔开,在调用时使用分号隔开)
- 4.带参数并且有默认值的混合
- 5.带多个参数的混合
- 6.命名参数
- 7.匹配模式
- 8.arguments变量
- 9.@_ :表示默认为每一个选择器都加载这个样式。(不必调用,自动加载)
less运算
在less中可以进行加减乘除的运算
注意:
如果使用引用的less方式来编译less文件,必须将less文件放在样式的后面加载,因为他是通过正则表达式来匹配样式的。这样做会消耗浏览器的资源,因为不推荐这么做。
1物理像素
这里使用a的伪类来实现1物理像素的。
.onePx(@_){//生成a的伪类时,内容为空,并且是块元素。这是生成的1px的线 &:before{ content=""; display:block; height:1px; background:black; transform:translateY(0.5);//将线缩放为原来的0.5,变为0.5px的细线,但是浏览器显示的数值还是为1px. }}.onePx(top){ position:relative; top:0;}#text{//在这个高宽为100px的块元素上面有一条细线。 .onePx(top); height:100px; width:100px; background:orange;}
阅读全文
0 0
- less简单笔记
- less笔记-less概要
- less笔记
- less笔记
- bootstrap学习笔记(3)--less语言的简单实用
- less之简单介绍
- LESS Hat简单教程
- 简单的LESS Tutorial
- less简单入门
- less的简单使用
- LESS 简单基础运用
- less简单应用
- Less学习笔记
- less学习笔记
- less学习笔记
- Less学习笔记
- LESS学习笔记(下)
- LESS框架笔记
- 数据结构--堆
- css——三角形的实现
- 互斥资源加锁的实现方式
- 用面向对象的方法实现互斥资源加锁
- 串行队列/并发队列&异步任务/同步任务代码演练
- less简单笔记
- Simple Class Serialization With JsonCpp
- 【HDU1069】 Monkey and Banana(动态规划)
- windows10 64位 redis3.0.*下载以及安装
- 多线程入门
- 容斥原理 + 大数模板(跳蚤 POJ
- 中缀表达式转换为后缀表达式&后缀表达式的计算
- 密码学----基础概念(二)
- 单调队列