您的位置：首页 > 其它

5.less常见使用

2016-02-17 17:11 281 查看

less和sass就是使用其他工具将某种格式的文本重新编译成css文件，好处在于方便工程管理、避免写大量的重复内容和利于维护。我们常常使用的方式是：写好less后在本地编译后使用编译后的css文件，虽然sass和less能做到请求时进行编译，但是会带来额外的开销，所以我们一般会本地进行编译，以下内容能让你在两个小时内迅速掌握less的使用。

设置less的字符编码方式

@charset 'utf-8';

调用其它已有的less文件(三种方式)

@import url('back.less');

@import 'back.less';

@import 'back';

使用变量

@bgcolor: #ab0;

body{
    background-color: @bgcolor;
}

需要说明的是：为了以后维护和修改的方便，我们一般将变量写在各个文件的开始位置。

简单混合的使用

<div></div>

@bordercolor: #ab0;

.border{
    border: 1px solid @bordercolor;
}

div{
    width: 300px;
    height: 300px;
    .border;
}

就是在其他选择器中调用已经有的类选择器。
在混合中调用不同的参数

在调用时传入不同的值就会得到不同的样式,遇到使用多个值的情况使用","隔开

.border(@bordercolor){
    border: @border solid 1px;
}

div{
    width: 300px;
    height: 300px;
    .border(red);
}

当然有有多层混合使用的情况

.border(@bordercolor){
    border: solid 1px @bordercolor;
}

.mix{
    .border(#ab0);
}

在混合中使用默认值

.border(@bordercolor: #ab0){
    border: @bordercolor;
}

div{
....
    .border();
}

使用默认值的混合类虽然可以直接使用.border调用,但是不建议这样使用，语义上是不明确的。只要文件中存在.border{}，不管有没有带参数和.border(){}是相同的，这时我们调用时要使用.border();明确自己使用的是什么，如果即有.border{},又有.border(){}最好将.border(){}写在.border()后面，就是使用层叠。由于.border(){}编译后不会以直接形式存在于最终文件中，所以使两种写法都会有效。

匹配模型

我们要在工程中使用各种方向的三角形

@trianglecolor: #ab0;

/* 向上的三件形 */
.triangle(top,@width,@color){
    border-width: @width;
    border-color: transparent transparent @color transparent;
    border-style: dashed dashed solid dashed;
}

/* 向右的三角形 */
.triangle(right,@width,@color){
    border-width: @width;
    border-color: transparent transparent transparent @color ;
    border-style: dashed dashed dashed solid;
}

/* 向下的三角形 */
.triangle(bottom, @width, @color){
    border-width: @width;
    border-color: @color transparent transparent transparent;
    border-style: solid dashed dashed dashed;
}

/* 向左的三角形 */
.triangle(left, @width, @color){
    border-width: @width;
    border-color: transparent @color transparent transparent;
    border-style: dashed solid dashed dashed; 
}

span{

    height: 0;
    .triangle(left,10px,@trianglecolor);
}

在span中我们在.triangle(top,...)调用不同的朝向就是不同的三角形。
假如你自己写了以上代码，会出现梯形而不是三角线，这是因为浏览器会有默认元素的宽和高。我们要将每一个朝向都添加清除浏览器默认显示,难道每一个都再写一遍吗？

.triangle(@_, @width, @color){
    display: block;
    padding: 0;
    width: 0;
    overflow: hidden;
}

这样写的目的就是当在调用时，都默认调用一次样式，就解决了上面的问题。

使用运算符

div{
    width: 100px;
    height: 100px - 20;
    background: #abc;
}

实际上在less中内置了很多函数，这里就不再介绍。
嵌套使用

<body>
    <ul>
        <li>项目一</li>
        <li>项目二</li>
        <li>项目三</li>
        <li>项目四</li>
        <a href="#">1234</a>
    </ul>
</body>

ul{
    width: 300px;
    margin: 0 auto;
    margin-top: 30px;
    list-style: none;
    background-color: #ab0;

    li{
        margin-top: 5px;
        background-color: #ccc;
        /* 相当于ul li:hover{} */
        &:hover{
            background-color: #def;
        }
    }
    a{
        color: #191919;
        font-size: 16px;
        text-decoration: none;
        &:hover{
            background-color: red;
        }
    }
}

特别注意&:的方便使用

使用arguments一组参数使用

很多css样式要调用一组样式，为了方便调用我们使用arguments

.border(@width:1px,@color:red,@style:solid){
    border: @arguments;
}

使用~告诉编译器不要编译该部分内容

div{
    width: ~'cale(300-20s)';
}

使用!important

!important和css中使用是一样的

div{
     .border() !important;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航