less简单笔记

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;
}