zoukankan      html  css  js  c++  java
  • less笔记

    less注释

    /**/会在编译的时候加入到.css文件中
    // 不会编译到.css文件中

    less变量

    @200px;

    less混合

    .red{background:red;}
    .box{
        width:200px;
        height:200px;
        .red;
    }
    编译的结果:
    .box{
        width:200px;
        height:200px;
        background:red;
    }

    混合-带参数

    .border(@border_width){
        border:solid red @border_width;
    }
    .box{
        width:200px;
        height:200px;
        .border(5px);
    }
    编译的结果:
    .box{
        width:200px;
        height:200px;
        border:solid red 5px;
    }

    混合-默认带值

    .border(@border_10px){
        border:solid red @border_width;
    }
    .box{
        width:200px;
        height:200px;
        .border(); //也可以最近传值,如:.border(20px);
    }
    编译的结果:
    .box{
        width:200px;
        height:200px;
        border:solid red 10px;
    }

    混合例子

    .border-radius(@radius){
        -webkit-border-radius:@radius;
        -moz-border-radius:@radius;
        border-radius:@radius;
    }
    .box{
        width:200px;
        height:200px;
        background:red;
        .border-radius(5px);
    }
    编译的结果:
    .box{
        width:200px;
        height:200px;
        background:red;
        -webkit-border-radius:5px;
        -moz-border-radius:5px;
        border-radius:5px;
    }

    less匹配模式

    .pos(r){
        position:relative;
    }
    .pos(a){
        position:absolute;
    }
    .pos(f){
        position:fixed;
    }
    .box{
        width:200px;
        height:200px;
        background:red;
        .pos(r);
    }
    
    编译的结果:
    .box{
        width:200px;
        height:200px;
        background:red;
        position:relative;
    }

    less运算

    @200px;
    .box{
        width:@width - 100; //可加减乘除
    }
    编译的结果:
    .box{
        width:100px;
    }

    less嵌套规则

    .box{
        width:200px;
        height:200px;
        background:red;
        li{
            background:#000;
        }
    }
    编译的结果:
    .box{
        width:200px;
        height:200px;
        background:red;
    }
    .box li{
        background:#000;
    }
    a{
        color:#000;
        &:hover{ //&代表上一层
            color:red;
        }
    }
    编译的结果:
    a{
        color:#000;
    }
    a:hover{ 
        color:red;
    }

    less @arguments变量

    .border_arg(@w,@c,@type){
        border:@arguments;
    }
    .box{
        width:200px;
        height:200px;
        background:red;
        .border_arg(3px,red,solid);
    }
    编译的结果:
    .box{
        width:200px;
        height:200px;
        background:red;
        border:3px red solid;
    }

    less避免编译

    .box{
        width:~'cale(300px - 30px)'
    }
    编译的结果:
    .box{
        width:cale(300px - 30px);
    }

    less !important

    .red{color:red}
    .box{
        .red !important;
    }
    编译的结果:
    .box{
        color:red !important;
    }
  • 相关阅读:
    控件还是还原到客户端的好
    练习之彩票一 需求整理和分析
    Oracle 查询并删除重复记录的SQL语句
    C# 如何生成CHM帮助文件
    C#生成CHM帮助文件—>续
    datagridview中用Enter代替tab实现焦点切换,可换行
    博客园的dotaer
    winfrom中datagridview指定单元格为编辑状态
    C#生成CHM帮助文件(linq版)
    C语言03
  • 原文地址:https://www.cnblogs.com/xiaojiu9/p/4587011.html
Copyright © 2011-2022 走看看