Less文件样式选择器selector中变量应用几种方式

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

变量除了可以用于控制css规则外,还可以用于selector选择器名,property名称及URLS

 例如:

 1.对于选择器

   @m-selector:btn;

   .@{m-selector}{

     font-size:12px;

     line-height:24px;

     margin:0 auto;

   }

  编译之后:

  .btn{ 

     font-size:12px;

     line-height:24px;

     margin:0 auto;

  }


 2.应用于变量中:

  @images:"../img/good.jpg";

  div{

   backgroud:url("@{images}");

  }

 3.应用到导入中

  @themes:"../themes";

  @import "@{themes}/good.less";

 4.应用到属性值中

  @property:color;

  .btn{

   font-size:12px;

   @{property}:#f3c;

  }

  编译后结果:

  .btn{

   font-size:12px;

   color:#f3c;

  }

  

  5.直接应用于变量

  @var1:"this is a variable";

  @var2:"var1";

  result:@@var2;

  

  输出结果为:

  result:"this is a variable";


  6.变量的懒加载

   也就是说变量可以在他使用前,不必声明

   .lazy{

     width:@var;

   }

   @var:@a;   //变量传递

   @a:91%;


   7.变量默认值

    有时候我们需要请求默认变量,也就说如果一个变量没有设置值,我们需要默认设置一个。

    这个特征不是必须的,因为我们可以在随后定义的时候直接覆盖下。

    @base:green;

    @dark:darken(@base,10%);


    随后可以再次声明下@base

    @base:red;

    这样可以避免有时候@base忘记设值情况

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

常用工具