openrat-cms

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README

less.html (4066B)

      1 <!doctype html>
      2 
      3 <title>CodeMirror: LESS mode</title>
      4 <meta charset="utf-8"/>
      5 <link rel=stylesheet href="../../doc/docs.css">
      6 
      7 <link rel="stylesheet" href="../../lib/codemirror.css">
      8 <script src="../../lib/codemirror.js"></script>
      9 <script src="../../addon/edit/matchbrackets.js"></script>
     10 <script src="css.js"></script>
     11 <style>.CodeMirror {border: 1px solid #ddd; line-height: 1.2;}</style>
     12 <div id=nav>
     13   <a href="http://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../../doc/logo.png"></a>
     14 
     15   <ul>
     16     <li><a href="../../index.html">Home</a>
     17     <li><a href="../../doc/manual.html">Manual</a>
     18     <li><a href="https://github.com/codemirror/codemirror">Code</a>
     19   </ul>
     20   <ul>
     21     <li><a href="../index.html">Language modes</a>
     22     <li><a class=active href="#">LESS</a>
     23   </ul>
     24 </div>
     25 
     26 <article>
     27 <h2>LESS mode</h2>
     28 <form><textarea id="code" name="code">@media screen and (device-aspect-ratio: 16/9) { … }
     29 @media screen and (device-aspect-ratio: 1280/720) { … }
     30 @media screen and (device-aspect-ratio: 2560/1440) { … }
     31 
     32 html:lang(fr-be)
     33 
     34 tr:nth-child(2n+1) /* represents every odd row of an HTML table */
     35 
     36 img:nth-of-type(2n+1) { float: right; }
     37 img:nth-of-type(2n) { float: left; }
     38 
     39 body > h2:not(:first-of-type):not(:last-of-type)
     40 
     41 html|*:not(:link):not(:visited)
     42 *|*:not(:hover)
     43 p::first-line { text-transform: uppercase }
     44 
     45 @namespace foo url(http://www.example.com);
     46 foo|h1 { color: blue }  /* first rule */
     47 
     48 span[hello="Ocean"][goodbye="Land"]
     49 
     50 E[foo]{
     51   padding:65px;
     52 }
     53 
     54 input[type="search"]::-webkit-search-decoration,
     55 input[type="search"]::-webkit-search-cancel-button {
     56   -webkit-appearance: none; // Inner-padding issues in Chrome OSX, Safari 5
     57 }
     58 button::-moz-focus-inner,
     59 input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
     60   padding: 0;
     61   border: 0;
     62 }
     63 .btn {
     64   // reset here as of 2.0.3 due to Recess property order
     65   border-color: #ccc;
     66   border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
     67 }
     68 fieldset span button, fieldset span input[type="file"] {
     69   font-size:12px;
     70 	font-family:Arial, Helvetica, sans-serif;
     71 }
     72 
     73 .rounded-corners (@radius: 5px) {
     74   border-radius: @radius;
     75   -webkit-border-radius: @radius;
     76   -moz-border-radius: @radius;
     77 }
     78 
     79 @import url("something.css");
     80 
     81 @light-blue:   hsl(190, 50%, 65%);
     82 
     83 #menu {
     84   position: absolute;
     85   width: 100%;
     86   z-index: 3;
     87   clear: both;
     88   display: block;
     89   background-color: @blue;
     90   height: 42px;
     91   border-top: 2px solid lighten(@alpha-blue, 20%);
     92   border-bottom: 2px solid darken(@alpha-blue, 25%);
     93   .box-shadow(0, 1px, 8px, 0.6);
     94   -moz-box-shadow: 0 0 0 #000; // Because firefox sucks.
     95 
     96   &.docked {
     97     background-color: hsla(210, 60%, 40%, 0.4);
     98   }
     99   &:hover {
    100     background-color: @blue;
    101   }
    102 
    103   #dropdown {
    104     margin: 0 0 0 117px;
    105     padding: 0;
    106     padding-top: 5px;
    107     display: none;
    108     width: 190px;
    109     border-top: 2px solid @medium;
    110     color: @highlight;
    111     border: 2px solid darken(@medium, 25%);
    112     border-left-color: darken(@medium, 15%);
    113     border-right-color: darken(@medium, 15%);
    114     border-top-width: 0;
    115     background-color: darken(@medium, 10%);
    116     ul {
    117       padding: 0px;  
    118     }
    119     li {
    120       font-size: 14px;
    121       display: block;
    122       text-align: left;
    123       padding: 0;
    124       border: 0;
    125       a {
    126         display: block;
    127         padding: 0px 15px;  
    128         text-decoration: none;
    129         color: white;  
    130         &:hover {
    131           background-color: darken(@medium, 15%);
    132           text-decoration: none;
    133         }
    134       }
    135     }
    136     .border-radius(5px, bottom);
    137     .box-shadow(0, 6px, 8px, 0.5);
    138   }
    139 }
    140 </textarea></form>
    141     <script>
    142       var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
    143         lineNumbers : true,
    144         matchBrackets : true,
    145         mode: "text/x-less"
    146       });
    147     </script>
    148 
    149     <p>The LESS mode is a sub-mode of the <a href="index.html">CSS mode</a> (defined in <code>css.js</code>).</p>
    150 
    151     <p><strong>Parsing/Highlighting Tests:</strong> <a href="../../test/index.html#less_*">normal</a>,  <a href="../../test/index.html#verbose,less_*">verbose</a>.</p>
    152   </article>