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

     
    1.koala可以用来编译less;
     
    2.less注释:
    //不会被编译
    /*此注释会编译到css里*/
     
    3.定义变量:
    less:
    @test_300px;
    .box {
    @test_width;//编译在css为300px;
    height:@test_width;
    background:pink;
    }
     
    html:
    <div class="box">
     
    </div>
     
    4. &用法:
    a{
      color:blue;
      &:hover{
        color:red;
      }
    }//&就相当于a
    再比如,父元素叫.wrap  儿子元素中有一个叫 .wrap_2,那就可以这样写
    .wrap{
      &_2{}
    }
    5.嵌套
    less:
    .nest{
    widows: 300px;
    height: 60px;
     
    h1{
    font-size: 30px;
    color: #1b6d85;
    a{
    text-decoration: none;
    &:hover{
    color: cadetblue;
    }
    }
    }
    p{
    font-size: 20px;
    color: #1A8ECE;
    }
    }
     
    html:
    <div class="nest">
    <h1><a>this is a blue world!</a></h1>
    <p>i know one thing,you know nothing</p>
    </div>
     
    6.混合的例子
    .border_radius(@radius: 5px){
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
    }//此不会被编译到css
     
    .radius_test {
    100px;
    height: 20px;
    background: pink;
    .border_radius();//括号里可以自定义如(15px)等
    }
     
    //变量名做作为变量
    @co:color;
    @color:pink;
    #box3 {
    background: @@co+19*2;//@@co等于@color
    color: @color;
    }
     
     
    7.@arguments参数
    .boxShadow(@x:0;@y:0;@blur:1px;@color:gray){
    box-shadow: @arguments;
    }
    #box3 {
    .boxShadow(3px,2px,3px,yellow);
    }
  • 相关阅读:
    class线程信息
    Class 文件简介
    JVM对象及垃圾回收处理
    jvm体系结构
    查找

    二叉树
    队列


  • 原文地址:https://www.cnblogs.com/iriliguo/p/6795886.html
Copyright © 2011-2022 走看看