Add Sass like extend

test/css/extend-clearfix.css

@@ -0,0 +1,15 @@
+.clearfix, .foo, .bar {
+  *zoom: 1;
+}
+.clearfix:after, .foo:after, .bar:after {
+  content: '';
+  display: block;
+  clear: both;
+  height: 0;
+}
+.foo {
+  color: red;
+}
+.bar {
+  color: blue;
+}

test/css/extend-nest.css

@@ -0,0 +1,15 @@
+.sidebar, .sidebar2, .type1 .sidebar3 {
+  width: 300px;
+  background: red;
+}
+.sidebar .box, .sidebar2 .box, .type1 .sidebar3 .box {
+  background: #FFF;
+  border: 1px solid #000;
+  margin: 10px 0;
+}
+.sidebar2 {
+  background: blue;
+}
+.type1 .sidebar3 {
+  background: green;
+}

test/css/extend.css

@@ -0,0 +1,24 @@
+.error, .badError {
+  border: 1px #f00;
+  background: #fdd;
+}
+.error.intrusion, .badError.intrusion {
+  font-size: 1.3em;
+  font-weight: bold;
+}
+.intrusion .error, .intrusion .badError {
+  display: none;
+}
+.badError {
+  border-width: 3px;
+}
+.foo .bar,
+.foo .baz,
+.ext1 .ext2 .bar,
+.ext1 .ext2 .baz,
+.ext3 .bar,
+.ext4 .bar,
+.ext3 .baz,
+.ext4 .baz {
+  display: none;
+}

test/less/extend-clearfix.less

@@ -0,0 +1,19 @@
+.clearfix {
+  *zoom: 1;
+  &:after {
+    content: '';
+    display: block;
+    clear: both;
+    height: 0;
+  }
+}
+
+.foo {
+  +.clearfix;
+  color: red;
+}
+
+.bar {
+  +.clearfix;
+  color: blue;
+}

test/less/extend-nest.less

@@ -0,0 +1,22 @@
+.sidebar {
+  width: 300px;
+  background: red;
+
+  .box {
+    background: #FFF;
+    border: 1px solid #000;
+    margin: 10px 0;
+  }
+}
+
+.sidebar2 {
+  +.sidebar;
+  background: blue;
+}
+
+.type1 {
+    .sidebar3 {
+      +.sidebar;
+      background: green;
+    }
+}

test/less/extend.less

@@ -0,0 +1,27 @@
+.error {
+  border: 1px #f00;
+  background: #fdd;
+}
+.error.intrusion {
+  font-size: 1.3em;
+  font-weight: bold;
+}
+.intrusion .error {
+  display: none;
+}
+.badError {
+  +.error;
+  border-width: 3px;
+}
+
+.foo .bar, .foo .baz {
+    display: none;
+}
+
+.ext1 .ext2 {
+    +.foo;
+}
+
+.ext3, .ext4 {
+    +.foo;
+}