property-accessors.less 927 Bytes
Newer Older
Kriengkrai Yothee's avatar
Kriengkrai Yothee 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

.block_1 {
  color: red;
  background-color: $color;
  @width: 50px;
  width: @width;
  height: ($width / 2);
  @color: red;
  border: 1px solid lighten($color, 10%);
  &:hover {
    color: $color;
    background-color: $color;
    .mixin1();
  }
  .one {
    background: $color;
  }
  content: "${color}";
  prop: $color;

}

.block_2 {
  color: red; 
  .two {
    background-color: $color; 
  }
  color: blue;  
}

.block_3 {
  color: red; 
  .three {
    background-color: $color;
  }
  .mixin2();
  color: blue;
}
.block_4 {
  color: red; 
  .four {
    background-color: $color;
  }
  color: blue;
  .mixin2();
}
// property merging
a {
    background-color+: red;
    background-color+: foo;

    &b {
        background: $background-color;
    }
}

.value_as_property {
  prop1: color;
  ${prop1}: #FF0000;  // not sure why you'd want to do this, but ok
}

.mixin1() {
  color: green;
}
.mixin2() { 
  color: yellow;
}