123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159 |
- @rounded-corners {
- border-radius: 10px;
- }
- .bold {
- @font-size: 20px;
- font-size: @font-size;
- font-weight: bold;
- }
- body #window {
- @rounded-corners;
- .bold;
- line-height: @font-size * 1.5;
- }
- #bundle {
- .button {
- display: block;
- border: 1px solid black;
- background-color: grey;
- &:hover { background-color: white }
- }
- }
- #header a {
- color: orange;
- #bundle > .button; // mixin the button class
- }
- div {
- @abstract {
- hello: world;
- b {
- color: blue;
- }
- }
- @abstract > b;
- @abstract;
- }
- @poop {
- big: baby;
- }
- body {
- div;
- }
- // not using > to list mixins
- .hello {
- .world {
- color: blue;
- }
- }
- .foobar {
- .hello .world;
- }
- .butter {
- .this .one .isnt .found;
- }
- // arguments
- .spam(@something: 100, @dad: land) {
- @wow: 23434;
- foo: @arguments;
- bar: @arguments;
- }
- .eggs {
- .spam(1px, 2px);
- .spam();
- }
- .first(@one, @two, @three, @four: cool) {
- cool: @arguments;
- }
- #hello {
- .first(one, two, three);
- }
- #hello-important {
- .first(one, two, three) !important;
- }
- .rad(@name) {
- cool: @arguments;
- }
- #world {
- @hello: "world";
- .rad("@{hello}");
- }
- .second(@x, @y:skip, @z: me) {
- things: @arguments;
- }
- #another {
- .second(red, blue, green);
- .second(red blue green);
- }
- .another(@x, @y:skip, @z:me) {
- .cool {
- color: @arguments;
- }
- }
- #day {
- .another(one,two, three);
- .another(one two three);
- }
- .to-be-important() {
- color: red;
- @color: red;
- height: 20px;
- pre {
- color: @color;
- }
- }
- .mix-suffix {
- .to-be-important() !important;
- }
- #search-all {
- .red() {
- color:#f00 !important;
- }
- }
- #search-all {
- .green() {
- color: #0f0 !important;
- }
- }
- .search-test {
- #search-all > .red();
- #search-all > .green();
- }
|