Less文件中的变量,及混合引用,函数及编译后css效果

来源: 易习特达网 www.easytd.com 时间: 2016-07-29 09:50:29

Less包括变量,混合变量,函数

1.变量

  例如:

  @color:#FFFFFF;

  div{

   color:@color;

  }

 输出:

 div{

  color:#FFFFFF;

 }


 2.混合引用

 Mixins是一群属性从一套规则应用到另一套规则中

 比如定义一个样式:

 .first{

  border:1px solid red;

 }

 .second{

  .first;

  border-color:#000;

 }

 这样就自动的把第一个类的样式应用到第二个类中了


3.嵌套样式:

  Less让你可以使用级联的嵌套在编译过程中。

  比如通常我们在css中写的这样:

  #header{

    color:red;

  }

  #header .nav{

    font-size:12px;

  }

  #header .title{

   font-weight:bold;

  }

  那么在Less的嵌套样式中,我们可以这样写:

  #header{

    color:red;

    .nav{

      font-size:12px;

    }

    .title{

font-weight:bold;

    }

  }

  

  也可以使用伪类,比如经常用的clear_fix及其伪类:after

  ,通过使用&代表当前选择器的父级别

  .clear_fix{

    display:block;

    zoom:1;


    &:after{

     content:" ";

     display:block;

     clear:both;

    }

  }



嵌套指令及冒泡:

 

 指令比如media或keyframe可以和selector类选择器一样可以嵌套。

 指令可以放在顶层并且相对于里面的元素的相同规则而不改变

 称之为冒泡。


 例如:

 .screen-style{

    @media screen {

     color:green;

     @media(min-width:768px){

      color:red;

    }


  }

   @media tv{

    color:black;

   }

 }


 编译后的结果:

  @media screen{

    .screen-style{

      color:green;

    }

  }

  @media screen and(min-width:768px){

     .screen-style{

       color:red;

     }

  }

  @media tv{

     .screen-style{

       color:black;

     }

  }


 一级一级往上叠加,而样式不改变


 其他非条件的指令比如font-face及keyframes也一样可以冒泡


 例如:

 #a{

   color:blue;

   @font-face{

    src:made-up-url;

   }

   padding:2px 2px 2px 2px;

 }

 输出结果:

 #a{

  color:blue

 }

 @font-face{

  src:made-up-url

 }

 #a{

  padding:2px 2px 2px 2px;

 }

本页地址:http://www.easytd.com/tuxingwangye/d_16072909402.html

常用工具