BVB Source Codes

prettier Show less_docs.css Source code

Return Download prettier: download less_docs.css Source code - Download prettier Source code - Type:.css
  1. @nice-blue: #5B83AD;
  2. @light-blue: @nice-blue + #111;
  3.  
  4. #header {
  5.   color: @light-blue;
  6. }
  7.  
  8.  
  9. #header {
  10.   color: #6c94be;
  11. }
  12.  
  13.  
  14. .bordered {
  15.   border-top: dotted 1px black;
  16.   border-bottom: solid 2px black;
  17. }
  18.  
  19.  
  20. #menu a {
  21.   color: #111;
  22.   .bordered;
  23. }
  24.  
  25. .post a {
  26.   color: red;
  27.   .bordered;
  28. }
  29.  
  30.  
  31. #header {
  32.   color: black;
  33. }
  34. #header .navigation {
  35.   font-size: 12px;
  36. }
  37. #header .logo {
  38.   width: 300px;
  39. }
  40.  
  41.  
  42. #header {
  43.   color: black;
  44.   .navigation {
  45.     font-size: 12px;
  46.   }
  47.   .logo {
  48.     width: 300px;
  49.   }
  50. }
  51.  
  52.  
  53. .clearfix {
  54.   display: block;
  55.   zoom: 1;
  56.  
  57.   &:after {
  58.     content: " ";
  59.     display: block;
  60.     font-size: 0;
  61.     height: 0;
  62.     clear: both;
  63.     visibility: hidden;
  64.   }
  65. }
  66.  
  67.  
  68. .screen-color {
  69.   @media screen {
  70.     color: green;
  71.     @media (min-width: 768px) {
  72.       color: red;
  73.     }
  74.   }
  75.   @media tv {
  76.     color: black;
  77.   }
  78. }
  79.  
  80.  
  81. @media screen {
  82.   .screen-color {
  83.     color: green;
  84.   }
  85. }
  86. @media screen and (min-width: 768px) {
  87.   .screen-color {
  88.     color: red;
  89.   }
  90. }
  91. @media tv {
  92.   .screen-color {
  93.     color: black;
  94.   }
  95. }
  96.  
  97.  
  98. #a {
  99.   color: blue;
  100.   @font-face {
  101.     src: made-up-url;
  102.   }
  103.   padding: 2 2 2 2;
  104. }
  105.  
  106.  
  107. #a {
  108.   color: blue;
  109. }
  110. @font-face {
  111.   src: made-up-url;
  112. }
  113. #a {
  114.   padding: 2 2 2 2;
  115. }
  116.  
  117.  
  118. // numbers are converted into the same units
  119. @conversion-1: 5cm + 10mm; // result is 6cm
  120. @conversion-2: 2 - 3cm - 5mm; // result is -1.5cm
  121.  
  122. // conversion is impossible
  123. @incompatible-units: 2 + 5px - 3cm; // result is 4px
  124.  
  125. // example with variables
  126. @base: 5%;
  127. @filler: @base * 2; // result is 10%
  128. @other: @base + @filler; // result is 15%
  129.  
  130.  
  131. @base: 2cm * 3mm; // result is 6cm
  132.  
  133.  
  134. @color: #224488 / 2; //results in #112244
  135. background-color: #112244 + #111; // result is #223355
  136.  
  137.  
  138. .weird-element {
  139.   content: ~"^//* some horrible but needed css hack";
  140. }
  141.  
  142.  
  143. @base: #f04615;
  144. @width: 0.5;
  145.  
  146. .class {
  147.   width: percentage(@width); // returns `50%`
  148.   color: saturate(@base, 5%);
  149.   background-color: spin(lighten(@base, 25%), 8);
  150. }
  151.  
  152.  
  153. #bundle {
  154.   .button {
  155.     display: block;
  156.     border: 1px solid black;
  157.     background-color: grey;
  158.     &:hover {
  159.       background-color: white
  160.     }
  161.   }
  162.   .tab { ... }
  163.   .citation { ... }
  164. }
  165.  
  166.  
  167. #header a {
  168.   color: orange;
  169.   #bundle > .button;
  170. }
  171.  
  172.  
  173. @var: red;
  174.  
  175. #page {
  176.   @var: white;
  177.   #header {
  178.     color: @var; // white
  179.   }
  180. }
  181.  
  182.  
  183. @var: red;
  184.  
  185. #page {
  186.   #header {
  187.     color: @var; // white
  188.   }
  189.   @var: white;
  190. }
  191.  
  192.  
  193. /* One hell of a block
  194. style comment! */
  195. @var: red;
  196.  
  197. // Get in line!
  198. @var: white;
  199.  
  200.  
  201. @import "library"; // library.less
  202. @import "typo.css";
  203.  
  204.  
  205. a,
  206. .link {
  207.   color: #428bca;
  208. }
  209. .widget {
  210.   color: #fff;
  211.   background: #428bca;
  212. }
  213.  
  214.  
  215. // Variables
  216. @link-color:        #428bca; // sea blue
  217. @link-color-hover:  darken(@link-color, 10%);
  218.  
  219. // Usage
  220. a,
  221. .link {
  222.   color: @link-color;
  223. }
  224. a:hover {
  225.   color: @link-color-hover;
  226. }
  227. .widget {
  228.   color: #fff;
  229.   background: @link-color;
  230. }
  231.  
  232.  
  233. // Variables
  234. @my-selector: banner;
  235.  
  236. // Usage
  237. .@{my-selector} {
  238.   font-weight: bold;
  239.   line-height: 40px;
  240.   margin: 0 auto;
  241. }
  242.  
  243.  
  244. .banner {
  245.   font-weight: bold;
  246.   line-height: 40px;
  247.   margin: 0 auto;
  248. }
  249.  
  250.  
  251. // Variables
  252. @images: "../img";
  253.  
  254. // Usage
  255. body {
  256.   color: #444;
  257.   background: url("@{images}/white-sand.png");
  258. }
  259.  
  260.  
  261. // Variables
  262. @themes: "../../src/themes";
  263.  
  264. // Usage
  265. @import "@{themes}/tidal-wave.less";
  266.  
  267.  
  268. @property: color;
  269.  
  270. .widget {
  271.   @{property}: #0ee;
  272.   background-@{property}: #999;
  273. }
  274.  
  275.  
  276. .widget {
  277.   color: #0ee;
  278.   background-color: #999;
  279. }
  280.  
  281.  
  282. @fnord:  "I am fnord.";
  283. @var:    "fnord";
  284. content: @@var;
  285.  
  286.  
  287. content: "I am fnord.";
  288.  
  289.  
  290. .lazy-eval {
  291.   width: @var;
  292. }
  293.  
  294. @var: @a;
  295. @a: 9%;
  296.  
  297.  
  298. .lazy-eval-scope {
  299.   width: @var;
  300.   @a: 9%;
  301. }
  302.  
  303. @var: @a;
  304. @a: 100%;
  305.  
  306.  
  307. .lazy-eval-scope {
  308.   width: 9%;
  309. }
  310.  
  311.  
  312. @var: 0;
  313. .class {
  314.   @var: 1;
  315.   .brass {
  316.     @var: 2;
  317.     three: @var;
  318.     @var: 3;
  319.   }
  320.   one: @var;
  321. }
  322.  
  323.  
  324. .class {
  325.   one: 1;
  326. }
  327. .class .brass {
  328.   three: 3;
  329. }
  330.  
  331.  
  332. // library
  333. @base-color: green;
  334. @dark-color: darken(@base-color, 10%);
  335.  
  336. // use of library
  337. @import "library.less";
  338. @base-color: red;
  339.  
  340.  
  341. nav ul {
  342.   &:extend(.inline);
  343.   background: blue;
  344. }
  345.  
  346.  
  347. nav ul {
  348.   &:extend(.inline);
  349.   background: blue;
  350. }
  351. .inline {
  352.   color: red;
  353. }
  354.  
  355.  
  356. nav ul {
  357.   background: blue;
  358. }
  359. .inline,
  360. nav ul {
  361.   color: red;
  362. }
  363.  
  364.  
  365. .a:extend(.b) {}
  366.  
  367. // the above block does the same thing as the below block
  368. .a {
  369.   &:extend(.b);
  370. }
  371.  
  372.  
  373. .c:extend(.d all) {
  374.   // extends all instances of ".d" e.g. ".x.d" or ".d.x"
  375. }
  376. .c:extend(.d) {
  377.   // extends only instances where the selector will be output as just ".d"
  378. }
  379.  
  380.  
  381. .e:extend(.f) {}
  382. .e:extend(.g) {}
  383.  
  384. // the above an the below do the same thing
  385. .e:extend(.f, .g) {}
  386.  
  387.  
  388. .big-division,
  389. .big-bag:extend(.bag),
  390. .big-bucket:extend(.bucket) {
  391.   // body
  392. }
  393.  
  394.  
  395. pre:hover,
  396. .some-class {
  397.   &:extend(div pre);
  398. }
  399.  
  400.  
  401. pre:hover:extend(div pre),
  402. .some-class:extend(div pre) {}
  403.  
  404.  
  405. .bucket {
  406.   tr { // nested ruleset with target selector
  407.     color: blue;
  408.   }
  409. }
  410. .some-class:extend(.bucket tr) {} // nested ruleset is recognized
  411.  
  412.  
  413. .bucket tr,
  414. .some-class {
  415.   color: blue;
  416. }
  417.  
  418.  
  419. .bucket {
  420.   tr & { // nested ruleset with target selector
  421.     color: blue;
  422.   }
  423. }
  424. .some-class:extend(tr .bucket) {} // nested ruleset is recognized
  425.  
  426.  
  427. tr .bucket,
  428. .some-class {
  429.   color: blue;
  430. }
  431.  
  432.  
  433. .a.class,
  434. .class.a,
  435. .class > .a {
  436.   color: blue;
  437. }
  438. .test:extend(.class) {} // this will NOT match the any selectors above
  439.  
  440.  
  441. *.class {
  442.   color: blue;
  443. }
  444. .noStar:extend(.class) {} // this will NOT match the *.class selector
  445.  
  446.  
  447. *.class {
  448.   color: blue;
  449. }
  450.  
  451.  
  452. link:hover:visited {
  453.   color: blue;
  454. }
  455. .selector:extend(link:visited:hover) {}
  456.  
  457.  
  458. link:hover:visited {
  459.   color: blue;
  460. }
  461.  
  462.  
  463. :nth-child(1n+3) {
  464.   color: blue;
  465. }
  466. .child:extend(:nth-child(n+3)) {}
  467.  
  468.  
  469. :nth-child(1n+3) {
  470.   color: blue;
  471. }
  472.  
  473.  
  474. [title=identifier] {
  475.   color: blue;
  476. }
  477. [title='identifier'] {
  478.   color: blue;
  479. }
  480. [title="identifier"] {
  481.   color: blue;
  482. }
  483.  
  484. .noQuote:extend([title=identifier]) {}
  485. .singleQuote:extend([title='identifier']) {}
  486. .doubleQuote:extend([title="identifier"]) {}
  487.  
  488.  
  489. [title=identifier],
  490. .noQuote,
  491. .singleQuote,
  492. .doubleQuote {
  493.   color: blue;
  494. }
  495.  
  496. [title='identifier'],
  497. .noQuote,
  498. .singleQuote,
  499. .doubleQuote {
  500.   color: blue;
  501. }
  502.  
  503. [title="identifier"],
  504. .noQuote,
  505. .singleQuote,
  506. .doubleQuote {
  507.   color: blue;
  508. }
  509.  
  510.  
  511. .a.b.test,
  512. .test.c {
  513.   color: orange;
  514. }
  515. .test {
  516.   &:hover {
  517.     color: green;
  518.   }
  519. }
  520.  
  521. .replacement:extend(.test all) {}
  522.  
  523.  
  524. .a.b.test,
  525. .test.c,
  526. .a.b.replacement,
  527. .replacement.c {
  528.   color: orange;
  529. }
  530. .test:hover,
  531. .replacement:hover {
  532.   color: green;
  533. }
  534.  
  535.  
  536. @variable: .bucket;
  537. @{variable} { // interpolated selector
  538.   color: blue;
  539. }
  540. .some-class:extend(.bucket) {} // does nothing, no match is found
  541.  
  542.  
  543. .bucket {
  544.   color: blue;
  545. }
  546. .some-class:extend(@{variable}) {} // interpolated selector matches nothing
  547. @variable: .bucket;
  548.  
  549.  
  550. .bucket {
  551.   color: blue;
  552. }
  553.  
  554.  
  555. .bucket {
  556.   color: blue;
  557. }
  558. @{variable}:extend(.bucket) {}
  559. @variable: .selector;
  560.  
  561.  
  562. .bucket, .selector {
  563.   color: blue;
  564. }
  565.  
  566.  
  567. @media print {
  568.   .screenClass:extend(.selector) {} // extend inside media
  569.   .selector { // this will be matched - it is in the same media
  570.     color: black;
  571.   }
  572. }
  573. .selector { // ruleset on top of style sheet - extend ignores it
  574.   color: red;
  575. }
  576. @media screen {
  577.   .selector {  // ruleset inside another media - extend ignores it
  578.     color: blue;
  579.   }
  580. }
  581.  
  582.  
  583. @media print {
  584.   .selector,
  585.   .screenClass { /*  ruleset inside the same media was extended */
  586.     color: black;
  587.   }
  588. }
  589. .selector { /* ruleset on top of style sheet was ignored */
  590.   color: red;
  591. }
  592. @media screen {
  593.   .selector { /* ruleset inside another media was ignored */
  594.     color: blue;
  595.   }
  596. }
  597.  
  598.  
  599. @media screen {
  600.   .screenClass:extend(.selector) {} // extend inside media
  601.   @media (min-width: 1023px) {
  602.     .selector {  // ruleset inside nested media - extend ignores it
  603.       color: blue;
  604.     }
  605.   }
  606. }
  607.  
  608.  
  609. @media screen and (min-width: 1023px) {
  610.   .selector { /* ruleset inside another nested media was ignored */
  611.     color: blue;
  612.   }
  613. }
  614.  
  615.  
  616. @media screen {
  617.   .selector {  /* ruleset inside nested media - top level extend works */
  618.     color: blue;
  619.   }
  620.   @media (min-width: 1023px) {
  621.     .selector {  /* ruleset inside nested media - top level extend works */
  622.       color: blue;
  623.     }
  624.   }
  625. }
  626.  
  627. .topLevel:extend(.selector) {} /* top level extend matches everything */
  628.  
  629.  
  630. @media screen {
  631.   .selector,
  632.   .topLevel { /* ruleset inside media was extended */
  633.     color: blue;
  634.   }
  635. }
  636. @media screen and (min-width: 1023px) {
  637.   .selector,
  638.   .topLevel { /* ruleset inside nested media was extended */
  639.     color: blue;
  640.   }
  641. }
  642.  
  643.  
  644. .alert-info,
  645. .widget {
  646.   /* declarations */
  647. }
  648.  
  649. .alert:extend(.alert-info, .widget) {}
  650.  
  651.  
  652. .alert-info,
  653. .widget,
  654. .alert,
  655. .alert {
  656.   /* declarations */
  657. }
  658.  
  659.  
  660. .animal {
  661.   background-color: black;
  662.   color: white;
  663. }
  664.  
  665.  
  666. <a class="animal bear">Bear</a>
  667.  
  668.  
  669. .animal {
  670.   background-color: black;
  671.   color: white;
  672. }
  673. .bear {
  674.   background-color: brown;
  675. }
  676.  
  677.  
  678. <a class="bear">Bear</a>
  679.  
  680.  
  681. .animal {
  682.   background-color: black;
  683.   color: white;
  684. }
  685. .bear {
  686.   &:extend(.animal);
  687.   background-color: brown;
  688. }
  689.  
  690.  
  691. .my-inline-block() {
  692.   display: inline-block;
  693.   font-size: 0;
  694. }
  695. .thing1 {
  696.   .my-inline-block;
  697. }
  698. .thing2 {
  699.   .my-inline-block;
  700. }
  701.  
  702.  
  703. .thing1 {
  704.   display: inline-block;
  705.   font-size: 0;
  706. }
  707. .thing2 {
  708.   display: inline-block;
  709.   font-size: 0;
  710. }
  711.  
  712.  
  713. .my-inline-block {
  714.   display: inline-block;
  715.   font-size: 0;
  716. }
  717. .thing1 {
  718.   &:extend(.my-inline-block);
  719. }
  720. .thing2 {
  721.   &:extend(.my-inline-block);
  722. }
  723.  
  724.  
  725. .my-inline-block,
  726. .thing1,
  727. .thing2 {
  728.   display: inline-block;
  729.   font-size: 0;
  730. }
  731.  
  732.  
  733. li.list > a {
  734.   // list styles
  735. }
  736. button.list-style {
  737.   &:extend(li.list > a); // use the same list styles
  738. }
  739.  
  740.  
  741. .a, #b {
  742.   color: red;
  743. }
  744. .mixin-class {
  745.   .a();
  746. }
  747. .mixin-id {
  748.   #b();
  749. }
  750.  
  751.  
  752. .a, #b {
  753.   color: red;
  754. }
  755. .mixin-class {
  756.   color: red;
  757. }
  758. .mixin-id {
  759.   color: red;
  760. }
  761.  
  762.  
  763. // these two statements do the same thing:
  764. .a();
  765. .a;
  766.  
  767.  
  768. .my-mixin {
  769.   color: black;
  770. }
  771. .my-other-mixin() {
  772.   background: white;
  773. }
  774. .class {
  775.   .my-mixin;
  776.   .my-other-mixin;
  777. }
  778.  
  779.  
  780. .my-mixin {
  781.   color: black;
  782. }
  783. .class {
  784.   color: black;
  785.   background: white;
  786. }
  787.  
  788.  
  789. .my-hover-mixin() {
  790.   &:hover {
  791.     border: 1px solid red;
  792.   }
  793. }
  794. button {
  795.   .my-hover-mixin();
  796. }
  797.  
  798.  
  799. button:hover {
  800.   border: 1px solid red;
  801. }
  802.  
  803.  
  804. #outer {
  805.   .inner {
  806.     color: red;
  807.   }
  808. }
  809.  
  810. .c {
  811.   #outer > .inner;
  812. }
  813.  
  814.  
  815. // all do the same thing
  816. #outer > .inner;
  817. #outer > .inner();
  818. #outer .inner;
  819. #outer .inner();
  820. #outer.inner;
  821. #outer.inner();
  822.  
  823.  
  824. #my-library {
  825.   .my-mixin() {
  826.     color: black;
  827.   }
  828. }
  829. // which can be used like this
  830. .class {
  831.   #my-library > .my-mixin();
  832. }
  833.  
  834.  
  835. #namespace when (@mode=huge) {
  836.   .mixin() { /* */ }
  837. }
  838.  
  839. #namespace {
  840.   .mixin() when (@mode=huge) { /* */ }
  841. }
  842.  
  843.  
  844. #sp_1 when (default()) {
  845.   #sp_2 when (default()) {
  846.     .mixin() when not(default()) { /* */ }
  847.   }
  848. }
  849.  
  850.  
  851. .foo (@bg: #f5f5f5, @color: #900) {
  852.   background: @bg;
  853.   color: @color;
  854. }
  855. .unimportant {
  856.   .foo();
  857. }
  858. .important {
  859.   .foo() !important;
  860. }
  861.  
  862.  
  863. .unimportant {
  864.   background: #f5f5f5;
  865.   color: #900;
  866. }
  867. .important {
  868.   background: #f5f5f5 !important;
  869.   color: #900 !important;
  870. }
  871.  
  872.  
  873. .border-radius(@radius) {
  874.   -webkit-border-radius: @radius;
  875.      -moz-border-radius: @radius;
  876.           border-radius: @radius;
  877. }
  878.  
  879.  
  880. #header {
  881.   .border-radius(4px);
  882. }
  883. .button {
  884.   .border-radius(6px);
  885. }
  886.  
  887.  
  888. .border-radius(@radius: 5px) {
  889.   -webkit-border-radius: @radius;
  890.      -moz-border-radius: @radius;
  891.           border-radius: @radius;
  892. }
  893.  
  894.  
  895. #header {
  896.   .border-radius;
  897. }
  898.  
  899.  
  900. .wrap() {
  901.   text-wrap: wrap;
  902.   white-space: -moz-pre-wrap;
  903.   white-space: pre-wrap;
  904.   word-wrap: break-word;
  905. }
  906.  
  907. pre { .wrap }
  908.  
  909.  
  910. pre {
  911.   text-wrap: wrap;
  912.   white-space: -moz-pre-wrap;
  913.   white-space: pre-wrap;
  914.   word-wrap: break-word;
  915. }
  916.  
  917.  
  918. .mixin(@color) {
  919.   color-1: @color;
  920. }
  921. .mixin(@color; @padding: 2) {
  922.   color-2: @color;
  923.   padding-2: @padding;
  924. }
  925. .mixin(@color; @padding; @margin: 2) {
  926.   color-3: @color;
  927.   padding-3: @padding;
  928.   margin: @margin @margin @margin @margin;
  929. }
  930. .some .selector div {
  931.   .mixin(#008000);
  932. }
  933.  
  934.  
  935. .some .selector div {
  936.   color-1: #008000;
  937.   color-2: #008000;
  938.   padding-2: 2;
  939. }
  940.  
  941.  
  942. .mixin(@color: black; @margin: 10px; @padding: 20px) {
  943.   color: @color;
  944.   margin: @margin;
  945.   padding: @padding;
  946. }
  947. .class1 {
  948.   .mixin(@margin: 20px; @color: #33acfe);
  949. }
  950. .class2 {
  951.   .mixin(#efca44; @padding: 40px);
  952. }
  953.  
  954.  
  955. .class1 {
  956.   color: #33acfe;
  957.   margin: 20px;
  958.   padding: 20px;
  959. }
  960. .class2 {
  961.   color: #efca44;
  962.   margin: 10px;
  963.   padding: 40px;
  964. }
  965.  
  966.  
  967. .box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
  968.   -webkit-box-shadow: @arguments;
  969.      -moz-box-shadow: @arguments;
  970.           box-shadow: @arguments;
  971. }
  972. .big-block {
  973.   .box-shadow(2px; 5px);
  974. }
  975.  
  976.  
  977. .big-block {
  978.   -webkit-box-shadow: 2px 5px 1px #000;
  979.      -moz-box-shadow: 2px 5px 1px #000;
  980.           box-shadow: 2px 5px 1px #000;
  981. }
  982.  
  983.  
  984. .mixin(...) {}        // matches 0-N arguments
  985. .mixin() {}           // matches exactly 0 arguments
  986. .mixin(@a: 1) {}      // matches 0-1 arguments
  987. .mixin(@a: 1; ...) {} // matches 0-N arguments
  988. .mixin(@a; ...) {}    // matches 1-N arguments
  989.  
  990.  
  991. .mixin(@a; @rest...) {
  992.    // @rest is bound to arguments after @a
  993.    // @arguments is bound to all arguments
  994. }
  995.  
  996.  
  997. .mixin(@s; @color) { ... }
  998.  
  999. .class {
  1000.   .mixin(@switch; #888);
  1001. }
  1002.  
  1003.  
  1004. .mixin(dark; @color) {
  1005.   color: darken(@color, 10%);
  1006. }
  1007. .mixin(light; @color) {
  1008.   color: lighten(@color, 10%);
  1009. }
  1010. .mixin(@_; @color) {
  1011.   display: block;
  1012. }
  1013.  
  1014.  
  1015. @switch: light;
  1016.  
  1017. .class {
  1018.   .mixin(@switch; #888);
  1019. }
  1020.  
  1021.  
  1022. .class {
  1023.   color: #a2a2a2;
  1024.   display: block;
  1025. }
  1026.  
  1027.  
  1028. .mixin(@a) {
  1029.   color: @a;
  1030. }
  1031. .mixin(@a; @b) {
  1032.   color: fade(@a; @b);
  1033. }
  1034.  
  1035.  
  1036. .mixin() {
  1037.   @width:  100%;
  1038.   @height: 200px;
  1039. }
  1040.  
  1041. .caller {
  1042.   .mixin();
  1043.   width:  @width;
  1044.   height: @height;
  1045. }
  1046.  
  1047.  
  1048. .caller {
  1049.   width:  100%;
  1050.   height: 200px;
  1051. }
  1052.  
  1053.  
  1054. .average(@x, @y) {
  1055.   @average: ((@x + @y) / 2);
  1056. }
  1057.  
  1058. div {
  1059.   .average(16px, 50px); // "call" the mixin
  1060.   padding: @average;    // use its "return" value
  1061. }
  1062.  
  1063.  
  1064. div {
  1065.   padding: 33px;
  1066. }
  1067.  
  1068.  
  1069. .mixin() {
  1070.   @size: in-mixin;
  1071.   @definedOnlyInMixin: in-mixin;
  1072. }
  1073.  
  1074. .class {
  1075.   margin: @size @definedOnlyInMixin;
  1076.   .mixin();
  1077. }
  1078.  
  1079. @size: globaly-defined-value; // callers parent scope - no protection
  1080.  
  1081.  
  1082. .class {
  1083.   margin: in-mixin in-mixin;
  1084. }
  1085.  
  1086.  
  1087. .unlock(@value) { // outer mixin
  1088.   .doSomething() { // nested mixin
  1089.     declaration: @value;
  1090.   }
  1091. }
  1092.  
  1093. #namespace {
  1094.   .unlock(5); // unlock doSomething mixin
  1095.   .doSomething(); //nested mixin was copied here and is usable
  1096. }
  1097.  
  1098.  
  1099. #namespace {
  1100.   declaration: 5;
  1101. }
  1102.  
  1103.  
  1104. // declare detached ruleset
  1105. @detached-ruleset: { background: red; };
  1106.  
  1107. // use detached ruleset
  1108. .top {
  1109.     @detached-ruleset();
  1110. }
  1111.  
  1112.  
  1113. .top {
  1114.   background: red;
  1115. }
  1116.  
  1117.  
  1118. .desktop-and-old-ie(@rules) {
  1119.   @media screen and (min-width: 1200px) { @rules(); }
  1120.   html.lt-ie9 &                         { @rules(); }
  1121. }
  1122.  
  1123. header {
  1124.   background-color: blue;
  1125.  
  1126.   .desktop-and-old-ie({
  1127.     background-color: red;
  1128.   });
  1129. }
  1130.  
  1131.  
  1132. header {
  1133.   background-color: blue;
  1134. }
  1135. @media screen and (min-width: 1200px) {
  1136.   header {
  1137.     background-color: red;
  1138.   }
  1139. }
  1140. html.lt-ie9 header {
  1141.   background-color: red;
  1142. }
  1143.  
  1144.  
  1145. @my-ruleset: {
  1146.     .my-selector {
  1147.       background-color: black;
  1148.     }
  1149.   };
  1150.  
  1151.  
  1152. @my-ruleset: {
  1153.     .my-selector {
  1154.       @media tv {
  1155.         background-color: black;
  1156.       }
  1157.     }
  1158.   };
  1159. @media (orientation:portrait) {
  1160.     @my-ruleset();
  1161. }
  1162.  
  1163.  
  1164. @media (orientation: portrait) and tv {
  1165.   .my-selector {
  1166.     background-color: black;
  1167.   }
  1168. }
  1169.  
  1170.  
  1171. // detached ruleset with a mixin
  1172. @detached-ruleset: {
  1173.     .mixin() {
  1174.         color:blue;
  1175.     }
  1176. };
  1177. // call detached ruleset
  1178. .caller {
  1179.     @detached-ruleset();
  1180.     .mixin();
  1181. }
  1182.  
  1183.  
  1184. .caller {
  1185.   color: blue;
  1186. }
  1187.  
  1188.  
  1189. @detached-ruleset: {
  1190.     @color:blue; // this variable is private
  1191. };
  1192. .caller {
  1193.     color: @color; // syntax error
  1194. }
  1195.  
  1196.  
  1197. @detached-ruleset: {
  1198.   caller-variable: @caller-variable; // variable is undefined here
  1199.   .caller-mixin(); // mixin is undefined here
  1200. };
  1201.  
  1202. selector {
  1203.   // use detached ruleset
  1204.   @detached-ruleset();
  1205.  
  1206.   // define variable and mixin needed inside the detached ruleset
  1207.   @caller-variable: value;
  1208.   .caller-mixin() {
  1209.     variable: declaration;
  1210.   }
  1211. }
  1212.  
  1213.  
  1214. selector {
  1215.   caller-variable: value;
  1216.   variable: declaration;
  1217. }
  1218.  
  1219.  
  1220. @variable: global;
  1221. @detached-ruleset: {
  1222.   // will use global variable, because it is accessible
  1223.   // from detached-ruleset definition
  1224.   variable: @variable;
  1225. };
  1226.  
  1227. selector {
  1228.   @detached-ruleset();
  1229.   @variable: value; // variable defined in caller - will be ignored
  1230. }
  1231.  
  1232.  
  1233. selector {
  1234.   variable: global;
  1235. }
  1236.  
  1237.  
  1238. @detached-1: { scope-detached: @one @two; };
  1239. .one {
  1240.   @one: visible;
  1241.   .two {
  1242.     @detached-2: @detached-1; // copying/renaming ruleset
  1243.     @two: visible; // ruleset can not see this variable
  1244.   }
  1245. }
  1246.  
  1247. .use-place {
  1248.   .one > .two();
  1249.   @detached-2();
  1250. }
  1251.  
  1252.  
  1253. ERROR 1:32 The variable "@one" was not declared.
  1254.  
  1255.  
  1256. #space {
  1257.   .importer-1() {
  1258.     @detached: { scope-detached: @variable; }; // define detached ruleset
  1259.   }
  1260. }
  1261.  
  1262. .importer-2() {
  1263.   @variable: value; // unlocked detached ruleset CAN see this variable
  1264.   #space > .importer-1(); // unlock/import detached ruleset
  1265. }
  1266.  
  1267. .use-place {
  1268.   .importer-2(); // unlock/import detached ruleset second time
  1269.    @detached();
  1270. }
  1271.  
  1272.  
  1273. .use-place {
  1274.   scope-detached: value;
  1275. }
  1276.  
  1277.  
  1278. .foo {
  1279.   background: #900;
  1280. }
  1281. @import "this-is-valid.less";
  1282.  
  1283.  
  1284. @import "foo";      // foo.less is imported
  1285. @import "foo.less"; // foo.less is imported
  1286. @import "foo.php";  // foo.php imported as a less file
  1287. @import "foo.css";  // statement left in place, as-is
  1288.  
  1289.  
  1290. .navbar:extend(.navbar all) {}
  1291.  
  1292.  
  1293. @import (less) "foo.css";
  1294.  
  1295.  
  1296. @import (css) "foo.less";
  1297.  
  1298.  
  1299. @import "foo.less";
  1300.  
  1301.  
  1302. @import (once) "foo.less";
  1303. @import (once) "foo.less"; // this statement will be ignored
  1304.  
  1305.  
  1306. // file: foo.less
  1307. .a {
  1308.   color: green;
  1309. }
  1310. // file: main.less
  1311. @import (multiple) "foo.less";
  1312. @import (multiple) "foo.less";
  1313.  
  1314.  
  1315. .a {
  1316.   color: green;
  1317. }
  1318. .a {
  1319.   color: green;
  1320. }
  1321.  
  1322.  
  1323. .mixin (@a) when (lightness(@a) >= 50%) {
  1324.   background-color: black;
  1325. }
  1326. .mixin (@a) when (lightness(@a) < 50%) {
  1327.   background-color: white;
  1328. }
  1329. .mixin (@a) {
  1330.   color: @a;
  1331. }
  1332.  
  1333.  
  1334. .class1 { .mixin(#ddd) }
  1335. .class2 { .mixin(#555) }
  1336.  
  1337.  
  1338. .class1 {
  1339.   background-color: black;
  1340.   color: #ddd;
  1341. }
  1342. .class2 {
  1343.   background-color: white;
  1344.   color: #555;
  1345. }
  1346.  
  1347.  
  1348. .truth (@a) when (@a) { ... }
  1349. .truth (@a) when (@a = true) { ... }
  1350.  
  1351.  
  1352. .class {
  1353.   .truth(40); // Will not match any of the above definitions.
  1354. }
  1355.  
  1356.  
  1357. @media: mobile;
  1358.  
  1359. .mixin (@a) when (@media = mobile) { ... }
  1360. .mixin (@a) when (@media = desktop) { ... }
  1361.  
  1362. .max (@a; @b) when (@a > @b) { width: @a }
  1363. .max (@a; @b) when (@a < @b) { width: @b }
  1364.  
  1365.  
  1366. .mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }
  1367.  
  1368.  
  1369. .mixin (@a) when (@a > 10), (@a < -10) { ... }
  1370.  
  1371.  
  1372. .mixin (@b) when not (@b > 0) { ... }
  1373.  
  1374.  
  1375. .mixin (@a; @b: 0) when (isnumber(@b)) { ... }
  1376. .mixin (@a; @b: black) when (iscolor(@b)) { ... }
  1377.  
  1378.  
  1379. .mixin (@a) when (@a > 0) { ...  }
  1380. .mixin (@a) when (default()) { ... } // matches only if first mixin does not, i.e. when @a <= 0
  1381.  
  1382.  
  1383. .my-optional-style() when (@my-option = true) {
  1384.   button {
  1385.     color: white;
  1386.   }
  1387. }
  1388. .my-optional-style();
  1389.  
  1390.  
  1391. button when (@my-option = true) {
  1392.   color: white;
  1393. }
  1394.  
  1395.  
  1396. & when (@my-option = true) {
  1397.   button {
  1398.     color: white;
  1399.   }
  1400.   a {
  1401.     color: blue;
  1402.   }
  1403. }
  1404.  
  1405.  
  1406. .loop(@counter) when (@counter > 0) {
  1407.   .loop((@counter - 1));    // next iteration
  1408.   width: (10px * @counter); // code for each iteration
  1409. }
  1410.  
  1411. div {
  1412.   .loop(5); // launch the loop
  1413. }
  1414.  
  1415.  
  1416. div {
  1417.   width: 10px;
  1418.   width: 20px;
  1419.   width: 30px;
  1420.   width: 40px;
  1421.   width: 50px;
  1422. }
  1423.  
  1424.  
  1425. .generate-columns(4);
  1426.  
  1427. .generate-columns(@n, @i: 1) when (@i =< @n) {
  1428.   .column-@{i} {
  1429.     width: (@i * 100% / @n);
  1430.   }
  1431.   .generate-columns(@n, (@i + 1));
  1432. }
  1433.  
  1434.  
  1435. .column-1 {
  1436.   width: 25%;
  1437. }
  1438. .column-2 {
  1439.   width: 50%;
  1440. }
  1441. .column-3 {
  1442.   width: 75%;
  1443. }
  1444. .column-4 {
  1445.   width: 100%;
  1446. }
  1447.  
  1448.  
  1449. .mixin() {
  1450.   box-shadow+: inset 0 0 10px #555;
  1451. }
  1452. .myclass {
  1453.   .mixin();
  1454.   box-shadow+: 0 0 20px black;
  1455. }
  1456.  
  1457.  
  1458. .myclass {
  1459.   box-shadow: inset 0 0 10px #555, 0 0 20px black;
  1460. }
  1461.  
  1462.  
  1463. .mixin() {
  1464.   transform+_: scale(2);
  1465. }
  1466. .myclass {
  1467.   .mixin();
  1468.   transform+_: rotate(15deg);
  1469. }
  1470.  
  1471.  
  1472. .myclass {
  1473.   transform: scale(2) rotate(15deg);
  1474. }
  1475.  
  1476.  
  1477. a {
  1478.   color: blue;
  1479.   &:hover {
  1480.     color: green;
  1481.   }
  1482. }
  1483.  
  1484.  
  1485. a {
  1486.   color: blue;
  1487. }
  1488.  
  1489. a:hover {
  1490.   color: green;
  1491. }
  1492.  
  1493.  
  1494. .button {
  1495.   &-ok {
  1496.     background-image: url("ok.png");
  1497.   }
  1498.   &-cancel {
  1499.     background-image: url("cancel.png");
  1500.   }
  1501.  
  1502.   &-custom {
  1503.     background-image: url("custom.png");
  1504.   }
  1505. }
  1506.  
  1507.  
  1508. .button-ok {
  1509.   background-image: url("ok.png");
  1510. }
  1511. .button-cancel {
  1512.   background-image: url("cancel.png");
  1513. }
  1514. .button-custom {
  1515.   background-image: url("custom.png");
  1516. }
  1517.  
  1518.  
  1519. .link {
  1520.   & + & {
  1521.     color: red;
  1522.   }
  1523.  
  1524.   & & {
  1525.     color: green;
  1526.   }
  1527.  
  1528.   && {
  1529.     color: blue;
  1530.   }
  1531.  
  1532.   &, &ish {
  1533.     color: cyan;
  1534.   }
  1535. }
  1536.  
  1537.  
  1538. .link + .link {
  1539.   color: red;
  1540. }
  1541. .link .link {
  1542.   color: green;
  1543. }
  1544. .link.link {
  1545.   color: blue;
  1546. }
  1547. .link, .linkish {
  1548.   color: cyan;
  1549. }
  1550.  
  1551.  
  1552. .grand {
  1553.   .parent {
  1554.     & > & {
  1555.       color: red;
  1556.     }
  1557.  
  1558.     & & {
  1559.       color: green;
  1560.     }
  1561.  
  1562.     && {
  1563.       color: blue;
  1564.     }
  1565.  
  1566.     &, &ish {
  1567.       color: cyan;
  1568.     }
  1569.   }
  1570. }
  1571.  
  1572.  
  1573. .grand .parent > .grand .parent {
  1574.   color: red;
  1575. }
  1576. .grand .parent .grand .parent {
  1577.   color: green;
  1578. }
  1579. .grand .parent.grand .parent {
  1580.   color: blue;
  1581. }
  1582. .grand .parent,
  1583. .grand .parentish {
  1584.   color: cyan;
  1585. }
  1586.  
  1587.  
  1588. .header {
  1589.   .menu {
  1590.     border-radius: 5px;
  1591.     .no-borderradius & {
  1592.       background-image: url('images/button-background.png');
  1593.     }
  1594.   }
  1595. }
  1596.  
  1597.  
  1598. .header .menu {
  1599.   border-radius: 5px;
  1600. }
  1601. .no-borderradius .header .menu {
  1602.   background-image: url('images/button-background.png');
  1603. }
  1604.  
  1605.  
  1606. p, a, ul, li {
  1607.   border-top: 2px dotted #366;
  1608.   & + & {
  1609.     border-top: 0;
  1610.   }
  1611. }
  1612.  
  1613.  
  1614. p,
  1615. a,
  1616. ul,
  1617. li {
  1618.   border-top: 2px dotted #366;
  1619. }
  1620. p + p,
  1621. p + a,
  1622. p + ul,
  1623. p + li,
  1624. a + p,
  1625. a + a,
  1626. a + ul,
  1627. a + li,
  1628. ul + p,
  1629. ul + a,
  1630. ul + ul,
  1631. ul + li,
  1632. li + p,
  1633. li + a,
  1634. li + ul,
  1635. li + li {
  1636.   border-top: 0;
  1637. }
  1638.  
downloadless_docs.css Source code - Download prettier Source code
Related Source Codes/Software:
storybook - 2017-06-07
ionicons - The premium icon font for Ionic ... 2017-06-07
AsyncDisplayKit - Smooth asynchronous user interfaces for iOS apps. ... 2017-06-07
lottie-android - Render After Effects animations natively on Androi... 2017-06-07
parse-server - Parse-compatible API server module for Node/Expres... 2017-06-07
inferno - An extremely fast, React-like JavaScript library f... 2017-06-08
guetzli - Perceptual JPEG encoder 2017-06-08
cs-video-courses - List of Computer Science courses with video lectur... 2017-06-08
interviews - Everything you need to know to get the job. 2017-06-08
prepack - Prepack is a partial evaluator for JavaScript. Pre... 2017-06-08
CRYENGINE - CRYENGINE is a powerful real-time game development... 2017-06-11
postal - 2017-06-11
reactide - Reactide is the first dedicated IDE for React web ... 2017-06-11
rkt - rkt is a pod-native container engine for Linux. It... 2017-06-11
uWebSockets - Tiny WebSockets https://for... 2017-06-11
realworld - TodoMVC for the RealWorld - Exemplary fullstack Me... 2017-06-11
goreplay - GoReplay is an open-source tool for capturing and ... 2017-06-10
pyenv - Simple Python version management 2017-06-10
redux-saga - An alternative side effect model for Redux apps ... 2017-06-10
angular-starter - 2017-06-10

 Back to top