zoukankan      html  css  js  c++  java
  • less一些用法整理

    前提理解:第一个,less是单独的一种文件,可以理解为css的升级版,完全按照css写也没问题,不过它提供了很多便利的东西,可以省好多代码量。第二个,html只认css,所以需要配套一些软件将less解析成css,引用时候,直接引用css就好。gulp,koala 都是常用的,Koala好像简单且方便一点。

    嵌套

    less的优势有很多,最常用也是最让人舒坦的应该就是它的嵌套规则。 我们写css时如果元素过多,每个都像

    .test .contnet ul li{ }

    这样写的话,大概会疯,结构不清晰,查找起来也不知道哪块归哪块,反正长长的都是css。在less中,则可以这样写

    .test{

      .content{

        ul{

        li{}

        }

      }

    }

    看起来好像很烦,其实不是,因为css要写起来,需要四个块,每个块都得把父元素写清楚,不然有可能重名出错(尤其项目大起来的时候,几十个页面,class重名太常见了),而less只需要一个块, .test连同其后代元素全部在它的包裹内设定好,每个元素名称只需要写一次就够了。

    &

    这个符号在less中可以代替父级元素,举个栗子

    a{

      color:blue;

      &:hover{

        color:red;

      }

    }

    再比如,父元素叫.wrap  儿子元素中有一个叫 .wrap_2,那就可以这样写

    .wrap{

      &_2{}

    }

    优点:块和块界限可以更清楚,很多东西不需要并列写;时不时还可以偷个懒,比如爸爸类的名字改来改去的时候,写&也省心好多。

    变量

    重要说明:变量需要@开头,比如@width,@height,名字可以随便取

    定义的话在相应位置直接写就好,类似于这种(写.box外面也可以)

    .box{

      @200px;

      @height:500px;

      @my_color:#ccc;

      

      @width;

      height:@height;

      background:@my_color;

    }

    例子比较简单可能看不出什么优越性,事实上大量重复的,或者是统一的样式使用变量就很方便,而且便于查找和修改,比如统一的背景色,或者统一的字体,字体大小;

    注意点:变量有作用域,只能给自己和后代元素用,出了最外层的{},别的类没法调用。

    运算

    有变量当然可以计算,比如

    @500px;

    .box{

      width:@width-50;

    }

    意思就是450px,这里的计算加减乘除皆可,单位可加可不加。

    混合

    有点类似于函数的调用,这里的话就要说点别的东西了,工作前,我对于css的理解大概就是给html对应的元素设定样式,工作后我才发现,不对,css应该是罗列各种各样的样式,html里只是选择了其中的一款。为什么会产生这种感觉,因为样式会重复,组件会重复,这个页面有个tab切换,别的页面也有tab切换;这个位置有个按钮,其他好几个位置也有一个按钮。如果每个页面都私人定制,那就意味着我们需要不断的写重复的东西,在css中我们没有办法,最多花点时间拷贝过来,但是less中可以方便很多。

    /*这里是按钮的统一设置,最好写最外层,方便调用*/

    .btn{

      120px;

      height:30px;

      line-height:30px;

      border-radius:15px;

      color:#fff;

      font-size:14px;

      text-align:center;

      background:#55E276;

      cursor:pointer;

    }

    //下方为各种位置的按钮,less中允许双斜线的注释

    .submit,.buy,.star{

      .btn;

    }

    一次书写,直接调用就好。

    但按钮和按钮毕竟是不一样的,所以需要有所区别,区别可能是颜色,也可能是大小长度,解决方法有两个,planA:公用部分直接调用,区别的部分自己写。planB:传入参数。

    planA

    /*这里是按钮的统一设置,最好写最外层,方便调用*/

    .btn{

      120px;

      height:30px;

      line-height:30px;

      border-radius:15px;

      color:#fff;

      font-size:14px;

      text-align:center;

      background:#55E276;

      cursor:pointer;

    }

    //下方为各种位置的按钮,less中允许双斜线的注释

    .submit{

      .btn;

      box-shadow:0 1px 5px #ccc;

    }

    .star{

      .btn;

      &:hover{

        background:#E65151;

      }

    }

    .buy{

      .btn;

      border:1px solid #ccc;

    }

    planB

    /*传参类似于函数,所以这里的变量作用域仅在{}之内,取什么名字都随意*/

    .btn(@color){ //这里加个了括号放参数

      120px;

      height:30px;

      line-height:30px;

      border-radius:15px;

      color:#fff;

      font-size:14px;

      text-align:center;

      background:@color; //用参数表示

      cursor:pointer;

    }

    //下方为各种位置的按钮,背景颜色作为参数传入

    .submit{

      .btn(red);

      box-shadow:0 1px 5px #ccc;

    }

    .star{

      .btn(#55E276);

      &:hover{

        background:#E65151;

      }

    }

    其实最后我把两个方案相当于合并了一下,共用但是有区别的用传参解决,独有的,直接写就可以了。

    传参也可以放入默认值,具体这样写

    .btn(@500px){@width;}

    调用时候是这样的

    .submit{

      .btn();  //这里一定要加括号,需要改默认值,直接写括号里,否则宽度就是500px

    }

    匹配模式

    还是上面的例子,如果我一定要用一个.btn(xxxxx)解决,涵盖所有按钮样式,可不可以,答案是可以。匹配模式就是这种可以随便定制的东西,其实理解起来也很简单,括号里多一个命名而已,比如调用这个.btn(no_border,#55E276); 表示无边框样式,背景色为#55E276(注意,命名是没有@符号的),如果调用.btn(border,#E65151); 表示有边框样式,背景色为#E65151,具体写法如下

    .btn(@_,@color){ //不同命名的公共部分要这样写,必须是@_,表示公共部分

      120px;

      height:30px;

      line-height:30px;

      border-radius:15px;

      color:#fff;

      font-size:14px;

      text-align:center;

      background:@color; //用参数表示

      cursor:pointer;

    }

    .btn(no_border,@color){

      //可以直接这样放着,或者写个border:none   这里的列子举得不好,如果换成左浮动右浮动,或者绝对定位的上下左右,应该更好点

    }

    .btn(border,@color){

      border:1px solid #ccc;

    }

    .btn(border); //表示默认背景色有边框,边框颜色也可以写个参数进去

    .btn(border,#E65151)//表示背景色#E65151,有边框

    小结

    常用的大概就上面那些,避免编译的  ~"..." 或者 用于调试时候的!impotant 这些我都没怎么用过。less相关的函数还有一些,一些高级功能可以去官网上查找,但就我目前而言,工作中使用上面的肯定足够足够了,它已经节省了我大量的时间,免去了很多重复劳动。

    摘自:https://www.cnblogs.com/grey-zhou/p/5796496.html

  • 相关阅读:
    SQL Server 全文搜索 配置、查询初体验
    SQL Server 触发器
    SQL Server 锁
    SQL Server 事务语法
    SQL Server 表变量和临时表的区别
    SQL Server系统存储过程
    SQL 语句转换格式函数Cast、Convert
    SQL Server 系统视图
    T-SQL 批处理
    SQL Server 分区表
  • 原文地址:https://www.cnblogs.com/liAnran/p/10172806.html
Copyright © 2011-2022 走看看