less-tests/test/fixtures/selectors.less

LESS CSS test-suite. Run any kind of test on LESS stylesheets.

h1, h2, h3 {
  a, p {
    &:hover {
      color: red;
    }
  }
}

#all { color: blue; }
#the { color: blue; }
#same { color: blue; }

ul, li, div, q, blockquote, textarea {
  margin: 0;
}

td {
  margin: 0;
  padding: 0;
}

td, input {
  line-height: 1em;
}

a {
  color: red;

  &:hover { color: blue; }

  div & { color: green; }

  p & span { color: yellow; }
}

.foo {
  .bar, .baz {
    & .qux {
      display: block;
    }
    .qux & {
      display: inline;
    }
	.qux& {
	  display: inline-block;
	}
    .qux & .biz {
      display: none;
    }
  }
}

.b {
 &.c {
  .a& {
   color: red;
  }
 }
}

.b {
 .c & {
  &.a {
   color: red;
  }
 }
}

.p {
  .foo &.bar {
    color: red;
  }
}

.p {
  .foo&.bar {
    color: red;
  }
}

.foo {
  .foo + & {
    background: amber;
  }
  & + & {
    background: amber;
  }
}

.foo, .bar {
  & + & {
    background: amber;
  }
}

.foo, .bar {
  a, b {
    & > & {
      background: amber;
    }
  }
}

.other ::fnord { color: red }
.other::fnord { color: red }
.other {
  ::bnord {color: red }
  &::bnord {color: red }
}
// selector interpolation
@theme: blood;
@selector: ~".@{theme}";
@{selector} {
  color:red;
}
@{selector}red {
  color: green;
}
.red {
  #@{theme}.@{theme}&.black {
    color:black;
  }
}
@num: 3;
:nth-child(@{num}) {
	selector: interpolated;
}
.test {
  &:nth-child(odd):not(:nth-child(3)) {
    color: #ff0000;
  }
}