123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185 |
- 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:@{theme} {
- color:black;
- }
- }
- @num: 3;
- :nth-child(@{num}) {
- selector: interpolated;
- }
- .test {
- &:nth-child(@{num}) {
- selector: interpolated;
- }
- &:nth-child(odd):not(:nth-child(3)) {
- color: #ff0000;
- }
- }
- [prop],
- [prop=10%],
- [prop="value@{num}"],
- [prop*="val@{num}"],
- [|prop~="val@{num}"],
- [*|prop$="val@{num}"],
- [ns|prop^="val@{num}"],
- [@{num}^="val@{num}"],
- [@{num}=@{num}],
- [@{num}] {
- attributes: yes;
- }
- /*
- Large comment means chunk will be emitted after } which means chunk will begin with whitespace...
- blank blank blank blank blank blank blank blank blank blank blank blank blank blank blank blank
- blank blank blank blank blank blank blank blank blank blank blank blank blank blank blank blank
- blank blank blank blank blank blank blank blank blank blank blank blank blank blank blank blank
- blank blank blank blank blank blank blank blank blank blank blank blank blank blank blank blank
- blank blank blank blank blank blank blank blank blank blank blank blank blank blank blank blank
- */
- @{selector} {
- color: red;
- }
- .only-nested {
- .level2 {
- .foo:not(.tst&:hover) {
- test: only-nested;
- }
- }
- }
- .nestend-and-non-nested {
- .foo&:not(.tst&:hover) {
- test: nestend-and-non-nested;
- }
- }
- .selector:not(&:hover) {
- test: global scope;
- }
- // https://github.com/less/less.js/issues/2206
- .extend-this {
- content: '\2661';
- }
- .first-level {
- .second-level {
- .active&:extend(.extend-this) { }
- &.active2:extend(.extend-this) { }
- }
- }
|