LESS学习笔记(下)

// 通过传参进行匹配，类似js中的if语句

LESS预编译：

.trianger(top,@w:5px,@c:#f00){
    border-width: @w;
    border-color:  transparent transparent @c transparent;
    border-style: dashed dashed solid dashed;
}
.trianger(@_,@w:5px,@c:#f00){
    width: 0;
    height: 0;
    overflow: hidden;
}
.pipei{
    .trianger(top,10px);
}

.pos(r){
    position: relative;
}
.pos(a){
    position: absolute;
}
.pos(f){
    position: fixed;
}
.pos-pp{
    width: 50px;
    height: 50px;
    background: red;
    top: 0;
    right: 0;
    .pos(a);
}

CSS输出：

.pipei {
  border-width: 10px;
  border-color: transparent transparent #ff0000 transparent;
  border-style: dashed dashed solid dashed;
  width: 0;
  height: 0;
  overflow: hidden;
}
.pos-pp {
  width: 50px;
  height: 50px;
  background: red;
  top: 0;
  right: 0;
  position: absolute;
}

// 避免编译【~】

LESS预编译：

.test_calc1{
    width: calc(100% - 20px);   //直接这么预编译得到的width:80%;不是我们想要的
}
.test_calc2{
    width: ~'calc(100% - 20px)';
}

CSS输出：

.test_calc1 {
  width: calc(80%);
}
.test_calc2 {
  width: calc(100% - 20px);
}

// !important 提升优先级

LESS预编译：

.border_radius(@radius:5px){
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}

.test_imp{
    .border_radius()!important;
}

CSS输出：

.test_imp {
  -webkit-border-radius: 5px !important;
  -moz-border-radius: 5px !important;
  border-radius: 5px !important;
}

// merge合并属性(用逗号分隔）对于诸如background和transform之类的属性来说，merge非常有用。
LESS预编译：

.mixin(){
    box-shadow+: 1px 1px 5px #f00;
}
.merge{
    .mixin();
    box-shadow+: 2px 2px 4px 5px #000; 
}

CSS输出：

.merge {
  box-shadow: 1px 1px 5px #f00, 2px 2px 4px 5px #000;
}

// space合并属性(用空格分隔)
LESS预编译：

.mixin2(){
    transform+_: scale(2);
}
.space{
    .mixin2();
    transform+_: rotate(15deg);
}

CSS输出：

.space {
  transform: scale(2) rotate(15deg);
}

// 改变选择器顺序（在&之前定义一个类选择器）
LESS预编译：

.head{
    .menu{
        border-radius: 5px;
        .no-radius & {
            color: red;
        }
    }
}

CSS输出：

.head .menu {
  border-radius: 5px;
}
.no-radius .head .menu {
  color: red;
}

// 组合使用（&还可以用于生成一个逗号分割列表的所有可能的选择器排列：）
LESS预编译：

a ,b ,c ,d{
    color: red;
    & + &{
        background: black;
    }
}

CSS输出：

a,
b,
c,
d {
  color: red;
}
a + a,
a + b,
a + c,
a + d,
b + a,
b + b,
b + c,
b + d,
c + a,
c + b,
c + c,
c + d,
d + a,
d + b,
d + c,
d + d {
  background: black;
}

差不多就介绍这么多了，第一部分的学习笔记更常用些，这节最后某些就不常用了，只做了解。