码迷,mamicode.com
首页 > 其他好文 > 详细

less

时间:2017-02-25 18:22:43      阅读:213      评论:0      收藏:0      [点我收藏+]

标签:cas   filter   应该   变量   alpha   case   margin   ops   city   

语法一:

注释://.less文件

    /**/.less、css文件中

语法二:变量

  变量必须加@符号

  --@value:200px;

语法三:混合

  less中的混合相当于js中的函数。

  --带参混合、不带参混合、带参默认值的混合。

语法四:匹配模式

  类似switch-case

  

.ops(r){
  position:relative;
}
.ops(a){
  position:absolute;
}
.ops(f){
  position:fixed;
}
.opsi{
  background:#090;
  color:#fff;
  height:200px;
  .pos(a);
}

  

语法五:运算符

  less运算符:+-*/任何数字、颜色或者变狼都可以参与运算,运算应该被包裹在括号中

语法六:嵌套

 

#navigation ul{
  list-style:none;
  margin:0;
  li{
    background:#f00;
    a{
      background:#ff0;
      &:hover{
            color:#0f0;
          }
    }
  }
  a{
    background:#fff;
  }
  span{
    float:left;
  }
}

语法七:@argument

  @argument包含了所有传递进来的参数。

  不想单独处理每一个参数的话可以这样写

@size:200px;
.box-shadow(@x:3px,@y:3px,@blur:1px,@color:#f00){
  box-shadow:@argument;
  -moz-box-shadow:@argument;
}
#div1{
  width:@size;
  .box-shadow();
  //.box-shadow(2px,5px);
}

 语法八:避免编译

  输出一些不正确的css语法或者一些less不认识的语法

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

.alpha1{
  filter:~"alpha(opacity=100,finishopacity=0,style=3)",
  /*矩形渐变,中间不透明,四周透明*/
}
#div1{
  width:~‘calc(300px-30px)‘;
}

  

less

标签:cas   filter   应该   变量   alpha   case   margin   ops   city   

原文地址:http://www.cnblogs.com/yaxinwang/p/6442303.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!