mixins.less 2.06 KB
Newer Older
liang ce committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145
.mixin { border: 1px solid black; }
.mixout { border-color: orange; }
.borders { border-style: dashed; }
.mixin > * { border: do not match me; }

#namespace {
  .borders {
    border-style: dotted;
  }
  .biohazard {
    content: "death";
    .man {
      color: transparent;
    }
  }
}
#theme {
  > .mixin {
    background-color: grey;
  }
}
#container {
  color: black;
  .mixin;
  .mixout;
  #theme > .mixin;
}

#header {
  .milk {
    color: white;
    .mixin;
    #theme > .mixin;
  }
  #cookie {
    .chips {
      #namespace .borders;
      .calories {
        #container;
      }
    }
    .borders;
  }
}
.secure-zone { #namespace .biohazard .man; }
.direct {
  #namespace > .borders;
}

.bo, .bar {
    width: 100%;
}
.bo {
    border: 1px;
}
.ar.bo.ca {
    color: black;
}
.jo.ki {
    background: none;
}
.amp {
    &.support {
        color: orange;
        .higher {
            top: 0px;
        }
        &.deeper {
            height: auto;
        }
    }
}
.extended {
    .bo;
    .jo.ki;
    .amp.support;
    .amp.support.higher;
    .amp.support.deeper;
}
.do .re .mi .fa {
    .sol .la {
        .si {
            color: cyan;
        }
    }
}
.mutli-selector-parents {
    .do.re.mi.fa.sol.la.si;
}
.foo .bar {
  .bar;
}
.has_parents() {
  & .underParents {
    color: red;
  }
}
.has_parents();
.parent {
  .has_parents();
}
.margin_between(@above, @below) {
     * + & { margin-top: @above; }
     legend + & { margin-top: 0; }
     & + * { margin-top: @below; }
}
h1 { .margin_between(25px, 10px); }
h2 { .margin_between(20px, 8px); }
h3 { .margin_between(15px, 5px); }

.mixin_def(@url, @position){
    background-image: @url;
    background-position: @position;
}
.error{
  @s: "/";
  .mixin_def( "@{s}a.png", center center);
}
.recursion() {
  color: black;
}
.test-rec {
  .recursion {
    .recursion();
  }
}
.paddingFloat(@padding) { padding-left: @padding; }

.button {
    .paddingFloat(((10px + 12) * 2));

    &.large { .paddingFloat(((10em * 2) * 2)); }
}
.clearfix() {
  // ...
}
.clearfix {
  .clearfix();
}
.clearfix {
  .clearfix();
}
.foo {
  .clearfix();
}