简单less学习笔记1

原创 lcy 随笔 less 982阅读 2016-01-11 21:11:55 举报

LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。

LESSCSS可以在多种语言、环境中使用,包括浏览器端、桌面客户端、服务端。

变量:允许我们单独定义一系列通用的样式,然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了
@color: #fff;

heard{ #heard{

  color:@color;=======编译后 ========== >         color:#fff;

} }

混合:可以将一个定义好的class A轻松的引入到另一个class B中,从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用,就像使用函数一样。
.rounded-corners (@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius;
}

header {

.rounded-corners;

}

footer {

.rounded-corners(10px);            -----------  编译后    -----------     -webkit-border-radius: 10px;  

}

嵌套:我们可以在一个选择器中嵌套另一个选择器来实现继承,这样很大程度减少了代码量,并且代码看起来更加的清晰

header {

h1 {
    font-size: 26px;
    font-weight: bold;
}
p {
    font-size: 12px;
    a {
        text-decoration: none;
        &:hover {
            border-width: 1px
        }
    }
}

}
编译后

header h1 {

font-size: 26px;
font-weight: bold;

}

header p {

font-size: 12px;

}

header p a {

text-decoration: none;

}

header p a:hover {

border-width: 1px;

}

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复