你的位置:首页 > 网页设计

[网页设计]LESS碎语


 

推荐在Brackets安装"LESS AutoCompile"插件,当保存less文件会自动生成或保存相应的css文件。

 

变量

 

以@开头声明变量,并且对变量进行分类,比如颜色变量、字体大小变量、模版变量、布局变量,等等。比如:

 

@fontSize:#000;

 

嵌套

 

<div >
    <p>hello</p>
</div>

.container{
    font-size: @fontSize;
    p {
        text-align:center;

        &:after{
            content: 'hel';
        }
    }
}

 

以上有3层嵌套,分别是.container, p, &:after(&表示p本身)。

 

Mixins,或者叫css rule

 

把一个类作为另一个类的样式值。

 

● 基本

.myRule {
    text-align: center;
}

p {
    .myRule;
}

 

● 定义一个带变量的类

 

.border-radius(@radius){
    -webkit-border-radius:@radius;
    -moz-border-radius:@radius;
    -o-border-radius:@radius;
    -ms-border-radius:@radius;
    border-radius: @radius;
}

 

变量可以有一个默认值:

 

.border-radius(@radius:10px){
    -webkit-border-radius:@radius;
    -moz-border-radius:@radius;
    -o-border-radius:@radius;
    -ms-border-radius:@radius;
    border-radius: @radius;
}

 

定义多个变量也是允许的:

 

.border(@width:2px, @style:solid,@color:@fontColor){
   
}

 

然后使用这个带变量的类,就像使用函数一样。

 

img {
    .border-radius(5px);
}

 

● 可以把一个Mixin放在另一个Maxin中,比如:

 

.myRule {
    text-align: center;
    .border-radius(5px);
}

● 根据变量不同的值使用不同的样式

 

.set-text-color(@bg-color) when (lightness(@bg-color) >= 50%){
    color: @dark;
    background: @bg-color;
}

.set-text-color(@bg-color) when (lightness(@bg-color) < 50%){
    color: @light;
    background: @bg-color;
}

 

然后这样应用:

.box-1{
    .set-text-color(darken(@template_color,20%));
}

 

操作符

 

@padding:10px;

.container{
   
    padding: @padding+10;
}

 

可以用+,-,*,/。

 

less的内置函数

 

● 让颜色更深:darken(@color,20%);
● 获取颜色值:color("fff"),返回#aaa
● 获取图片大小:image-size("temp.png"),返回10px 10px
● 获取图片宽度:image-width("temp.png")
● 获取图片高度:image-height("temp.png")
● 单位转换:convert(9s, "ms"), convert(14cm, mm)
● 链接资源 data-uri(mimetype,url),第一个参数可省

 

例子:data-uri('../data/temp.jpg')
CSS输出:url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==');
浏览器中输出:url('../data/temp.jpg');

例子:data-uri('image/jpeg;base64', '../data/image.jpg');
CSS输出:url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==');

例子:data-uri('image/svg+CSS输出:url("data:image/svg+

 

● 默认值 default()

 

例子:在CSS规则中,default()表示true

 

html:

    <div >
        <div >box1</div>
        <div >box2</div>
        <div >box3</div>
    </div>

 

less:

.box{
    width: 100px;
    height: 100px;
    border: 1px solid black;
}

.backcolor(red){background-color: red;}
.backcolor(green){background-color: green;}
.backcolor(@color) when (default()){background-color: @color;}

.box1{
    .backcolor(red);
}

.box2{
    .backcolor(green);
}

.box3{
    .backcolor(orange);
}

 

css:

 

.box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}
.box1 {
  background-color: red;
}
.box2 {
  background-color: green;
}
.box3 {
  background-color: orange;
}

 

● 拼接数值和单位:unit(5, px), 输出:5px
● 去掉单位获取值:unit(5px),输出5
● 获取数值单位中的单位:get-unit(5px)
● 获取封顶整型值:ceil(2.4)
● 获取底板整型值:floor(2.6)
● 获取浮点数的百分比:percentage(0.5)
● 四舍五入:round(1.67),输出2;规定精度:round(1.67,1),输出1.7
● 平方根:sqrt(25cm)
● 绝对值:abs(-5px)
● 是否是整数:isnumber()
● 是否是字符串:isstring()
● 是否是颜色: iscolor()
● 是否是CSS关键字:iskeyword
● 是否是url: isurl()
● 是否是像素:ispixeel()
● 是否加重字体:isem()
● 是否百分比:ispercentage()
● 创建颜色:rgb(90,129,32)
● 创建有透明度的颜色:rgba(90,129,32,0.5),css输出rgba(90, 129, 32, 0.5);argb(rgba(90, 23, 148, 0.5));输出#805a1794


更多参考: http://lesscss.org/functions/

 

@import

 

引入外部css文件与当前css文件合并。

@import "vendors/bootstrap/bootstrap.less";
@import "vendors/bootstrap/bootstrap.css";