你的位置:首页 > 网页设计

[网页设计]less中的部分语法详解


less中的语法详解,主要是介绍一些平时常用的语法,如果有更多更实用的语法欢迎大家和我交流。

一、变量。

  变量是识别符号是@,在less中以@开头的则是变量,关于变量名的命名方法,大家可以参考js中命名的规则,毕竟是做前端的,有着统一的习惯有助于我们统一风格。个人推荐变量名的命名规则使用驼峰命名法。第一个单词首写字母小写,从第二个开始,单词首写字母大写。如boxAaa,boxBbbb,boxContainer,……,当然也是可是使用香肠命名法用下划线“_”来命名。如,box_main,border_bottom,……。

二、混合。

     这个模式比较常见,例如:规定的主背景色,主文字颜色等,可以事先定义好相关的颜色。在使用的时候直接调用,例如。 

  .border_radius(@radius:5px){
    border-radius: @radius;
    -webkit-border-radius:@radius;
  }
  .box_02{
    margin-left: 50%;
    width: 200px;
    height:60px;
    .border_radius();
    background:#ccc;
  }

这样方便与后期维护。

三、匹配模式

  匹配模式有助于我们更好的节省代码和唤起记忆。

     例:  

  .triangle(top,@w:5px,@c:#ccc){
    .sanjiao_001();
    border-width: @w;
    border-color: transparent transparent @c transparent;
    border-style: dashed dashed solid dashed;
  }
  .triangle(bottom,@w:5px,@c:#ccc){
    .sanjiao_001();
    border-width:@w;
    border-color: @c transparent transparent transparent;
    border-style: solid dashed dashed dashed;
  }

调用的时候可以直接使用:

  .sanjiao{
    .triangle(bottom);
  }

四、运算

     在less中的运算是默认使用有单位的一方为基础单位运算,

    @w= 100px;

  .bar_002{
    width:@w - 30;
    height:20px;
    margin:0 auto;
    background:#cdecde;
  }

      此时采用的计算单位就是px为其默认的计算单位。

      在less中有一点和css3中不一样的地方就是采用百分比的单位不能和其他单位混合使用,例:

       

  .bar_002{
    width:100% - 30px;
    height:20px;
    margin:0 auto;
    background:#cdecde;
  }

  在上面的计算中编辑的时候就会报错,不能这样使用,推荐使用的方法是采用css原生的使用方法来使用。

     

  .bar_002{
    width:~“calc(100% - 30px)”;
    height:20px;
    margin:0 auto;
    background:#cdecde;
  }

      使用“~”符号来告诉less引号里面的内容不需要编译。

五、嵌套规则

      嵌套规则其实和css中的层级选择器一样,没有太多区别(层级最好控制在3层以内,这样有助于浏览器的识别)。

      另外还有个符号不得不说的就是“&”,此符号与相对路径中使用的“../”具有相同的意义,是返回上一次的意思,这个对使用为元素:hover,:avtice等有着很好的选择效果。

六、@arguments变量

      当我们给变量设置很多默认值,这个时候我们又不想修改,想直接应用,那么arguments无疑是便捷的方式,使用此参数,可以直接全部使用默认变量。

      例:

  .bar_004(@w: 100%,@xx: solid,@c: #ccc){
  border:@arguments;
  }

七、使用important来提升优先级。

      在我们使用important,不仅可以使用给变量也可以使用给一个类。用此来提升优先级来达到我们想要的效果。