zoukankan      html  css  js  c++  java
  • less预编译语言使用总结

    以前就使用过less和sass,其实很简单,就是很长时间不用,忘记语法了,现在来总结一片使用技巧

    一、注释

    less的注释不会被编译到css文件中,所以提倡多使用less中的注释:/**/

    二、变量

    less语言中也有自己的变量,定义变量@变量名:变量值,使用该变量时,直接@变量名,就是该变量值

    @ 300px;

    body { background-color: white; }

    .div1 { @width; }

    三、混合(mixin)

    混合可以将一个定义好的class A轻松引入到另一个class B中,从而简单实现class B继承class A中所有属性,还可以带参数地调用。

    例如定义一个样式类.border,直接用到另一个样式类.box中,另一个样式类就很方便的具有了这个类的样式,很好的实现了css代码的复用;

    再例如有一个.box2,它和.box有一些属性相同,那就直接继承.box再做特定的修改即可:

    .border{

      border:1px solid black;

    }

    .box{

      .border;

    }

    .box2{

      .box;

      margin:20px;

    }

    混合(mixin):可带参数,以实现传入变量参数来用一个样式类生成各种不同的样式:

    .border2(@border_width){   //定义变量参数

      border:@border_width solid black;

    }

    .box3{

      .border2(5px);//参数位置传入变量以控制不同的样式

    }

    .box4{

      .border2(10px);

    }

    混合(mixin)参数可带默认值(多个参数之间使用逗号隔开)

    .border3(@border_width2:5px){

      border:@border_width2 solid black;

    }

    .box5{

    .border3();

    }

    一些常见的兼容性写法就可以用混合封装起来进行简化:

    .border_radius(@border_radius:2px){

    border-radius:@border_radius;

    -moz-border-radius:@border_radius;

    }

    四、模式匹配

    有些情况想根据传入的参数来改变混合的默认呈现,比如:

    下面通过less模式匹配,定义不同央视模式的三角(top模式和bottom模式),但无论哪种模式,@_(放在模式参数位置)定义的样式所有模式都公有

    .triangle(@_,@w,@c){

      0;

      height:0;

      overflow:hidden;

    }

    .triangle(top,@w,@c){

      border-@w;

      border-color:transparent transparent @c transparent;

      borser-style:dashed dashed solid dashed;

    }

    .triangle(bottom,@w,@c){

      border-@w;

      border-color:transparent transparent @c transparent;

      borser-style:solid dashed dashed dashed;

    }

    .triangle2{

      .trangle(bottom,20px,red);

    }

    .triangle3{

      .trangle(top,30px,green);

    }

    五、运算(对变量进行加减乘除等)

    @box_100px;

    .box6{

      (@box_width-10)*2;

    }

    六、嵌套

    可以在一个选择器中直接潜逃另一个选择器来实现继承,这样很大程度减少代码量,并且代码看起来结构更清晰:

    .list1{

      600px;

      height:600px;

      li{//相当于在外边写.list1 li{}

        height:20px;

        a{

          float:left;

          &:hover{   //&代表上一层选择器,所以这样写相当于 .list1 a:hove{}

            color:red;

          }

        }

      }

    }

    七、@arguments

    @arguments包含了所有传递进来的参数,如果你不想单独处理每一个参数的话就可以像这样写:

    .box-shadow(@x:0;@y:0,@blur:1px,color:#000){

      box-shadow:@arguments;   //相当于()参数里的值放到了这

      -moz-box-shadow:@auguments;

      -webkit-box-shadow:@arguments;

    }

    .box-shaow(2px,5px);

    八、避免编译

    有时候需要输出一些不正确的css语法或者使用一些less不认识的专有语法

    //要输出这样的值我们可以在字符串前加一个~

    .class1{

      filer:~"ms:alwaysHasItsOwnSyntax.For.Stuff()";

    }

     完整的Less中文文档: 
    http://www.bootcss.com/p/lesscss/

  • 相关阅读:
    VS Code 编译运行C/C++
    滴水逆向-文件读写&内存分配-PE准备阶段
    技术从业者的未来(三)
    房价预测-California House Prices
    记录一下Linux的文件夹的rwx权限使用。
    对微任务和宏任务的执行顺序的个人理解
    算法1.4 节 ----- 算法分析
    .NetCore中间件实现原理
    谷歌浏览器禁用JS步骤
    管理经验分享
  • 原文地址:https://www.cnblogs.com/learnings/p/8884774.html
Copyright © 2011-2022 走看看