小昱个人博客
欢迎来到小昱的世界

勤学如春起之苗,不见其增,日有所长;辍学如磨刀之石,不见其损,日有所亏
[原]Less的简单应用
  • 首页 > 前端
  • 作者:小昱
  • 2016年6月9日 12:10 星期四
  • 浏览:124
  • 字号:
  • 评论:0
  • Less

    Less是一种动态样式语言,用于CSS预处理

     

    1.变量

    @variable:value;
    变量可以运算

     

    2.混合

    可以引用已经定义的class和id
    
    .clear{
      clear:both;
    }
    p{
      .clear;
    }
    编译结果:
    p{
      clear:both;
    }

     

    3.传参

    .border-radius(@width:2px){
        -webkit-border-radius:@width;
        -moz-border-radius:@width;
        border-radius:@width;
    }
    p{
        .border-radius(10px);
    }
    多参数情况(形参可用逗号或空格分开)
    
    .border(@width,@style,@color){
        border:@width @style @color;
    }
    p{
        .border(1px,solid,red);
    }

     

    4.嵌套

    ul,ol{
        li{
            float: left;
            a{
                color:#000;
                &:hover{
                    color:#f00;
                }
            }
        }
    }

     

    5.注释

    //单行注释
    /*多行注释*/

     

    6.其他

    & // 代表上一级元素

     

      您阅读这篇文章共花了:  
    二维码加载中...
    本文作者:小昱      文章标题: [原]Less的简单应用
    本文地址:http://www.xiaoyulive.top/?post=64
    版权声明:若无注明,本文皆为“小昱个人博客”原创,转载请保留文章出处。
    返回顶部| 首页| 碰碰手气| 捐赠支持| 手机版本|后花园

    Copyright © 2016-2017 小昱个人博客 滇ICP备16006294号