extend-selector.less 1.53 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
.error {
  border: 1px #f00;
  background: #fdd;
}
.error.intrusion {
  font-size: 1.3em;
  font-weight: bold;
}
.intrusion .error {
  display: none;
}
.badError:extend(.error all) {
  border-width: 3px;
}

.foo .bar, .foo .baz {
    display: none;
}

.ext1 .ext2
    :extend(.foo all) {
}

.ext3:extend(.foo all),
.ext4:extend(.foo all) {
}

div.ext5,
.ext6 > .ext5 {
    width: 100px;
}

.should-not-exist-in-output,
.ext7:extend(.ext5 all) {
}

.ext {
  test: 1;
}
// same as
// .a .c:extend(.ext all)
// .b .c:extend(.ext all)
// .a .c .d
// .b .c .d
.a, .b {
  test: 2;
  .c:extend(.ext all) {
    test: 3;
    .d {
      test: 4;
    }
  }
}

.replace.replace,
.c.replace + .replace {
  .replace,
  .c {
    prop: copy-paste-replace;
  }
}
.rep_ace:extend(.replace all) {}

.attributes {
  [data="test"] {
    extend: attributes;
  }
  .attribute-test {
    &:extend([data="test"] all);
  }
  [data] {
    extend: attributes2;
  }
  .attribute-test2 {
    &:extend([data] all); //you could argue it should match [data="test"]... not for now though...
  }
  @attr-data: "test3";
  [data=@{attr-data}] {
    extend: attributes2;
  }
  .attribute-test {
    &:extend([data="test3"] all);
  }
}

.header {
  .header-nav {
    background: red;
    &:before {
      background: blue;
    }
  }
}

.footer {
  .footer-nav {
    &:extend( .header .header-nav all );
  }
}

.issue-2586-bordered {
    border: solid 1px black;
}
.issue-2586-somepage {
    .content:extend(.issue-2586-bordered) {
        &>span {
            margin-bottom: 10px;
        }
    }
}