tests.less

/* LESS syntax coloring tests */

// --------------------------------------------------
// LESS functions

escape(@string);               // URL encodes a string
e(@string);                    // escape string content
%(@string, values...);         // formats a string

unit(@dimension, [@unit: ""]); // remove or change the unit of a dimension
color(@string);                // parses a string to a color
data-uri([mimetype,] url);       // * inlines a resource and falls back to url()

ceil(@number);                 // rounds up to an integer
floor(@number);                // rounds down to an integer
percentage(@number);           // converts to a %, e.g. 0.5 -> 50%
round(number, [places: 0]);    // rounds a number to a number of places
sqrt(number);                  // * calculates square root of a number
abs(number);                   // * absolute value of a number
sin(number);                   // * sine function
asin(number);                  // * arcsine - inverse of sine function
cos(number);                   // * cosine function
acos(number);                  // * arccosine - inverse of cosine function
tan(number);                   // * tangent function
atan(number);                  // * arctangent - inverse of tangent function
pi();                          // * returns pi
pow(@base, @exponent);     // * first argument raised to the power of the second argument
mod(number, number);       // * first argument modulus second argument

convert(number, units);    // * converts between number types
unit(number, units);       // *changes number units without converting it
color(string);             // converts string or escaped value into color

rgb(@r, @g, @b);                             // converts to a color
rgba(@r, @g, @b, @a);                        // converts to a color
argb(@color);                                // creates a #AARRGGBB
hsl(@hue, @saturation, @lightness);          // creates a color
hsla(@hue, @saturation, @lightness, @alpha); // creates a color
hsv(@hue, @saturation, @value);              // creates a color
hsva(@hue, @saturation, @value, @alpha);     // creates a color

hue(@color);           // returns the `hue` channel of @color in the HSL space
saturation(@color);    // returns the `saturation` channel of @color in the HSL space
lightness(@color);     // returns the 'lightness' channel of @color in the HSL space
hsvhue(@color);        // * returns the `hue` channel of @color in the HSV space
hsvsaturation(@color); // * returns the `saturation` channel of @color in the HSV space
hsvvalue(@color);      // * returns the 'value' channel of @color in the HSV space
red(@color);           // returns the 'red' channel of @color
green(@color);         // returns the 'green' channel of @color
blue(@color);          // returns the 'blue' channel of @color
alpha(@color);         // returns the 'alpha' channel of @color
luma(@color);          // returns the 'luma' value (perceptual brightness) of @color

saturate(@color, 10%);                  // return a color 10% points *more* saturated
desaturate(@color, 10%);                // return a color 10% points *less* saturated
lighten(@color, 10%);                   // return a color 10% points *lighter*
darken(@color, 10%);                    // return a color 10% points *darker*
fadein(@color, 10%);                    // return a color 10% points *less* transparent
fadeout(@color, 10%);                   // return a color 10% points *more* transparent
fade(@color, 50%);                      // return @color with 50% transparency
spin(@color, 10);                       // return a color with a 10 degree larger in hue
mix(@color1, @color2, [@weight: 50%]);  // return a mix of @color1 and @color2
greyscale(@color);                      // returns a grey, 100% desaturated color
contrast(@color1, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%]);
                                        // return @darkcolor if @color1 is > 43% luma
                                        // otherwise return @lightcolor, see notes

multiply(@color1, @color2);
screen(@color1, @color2);
overlay(@color1, @color2);
softlight(@color1, @color2);
hardlight(@color1, @color2);
difference(@color1, @color2);
exclusion(@color1, @color2);
average(@color1, @color2);
negation(@color1, @color2);

iscolor(@colorOrAnything);              // returns true if passed a color, including keyword colors
isnumber(@numberOrAnything);            // returns true if a number of any unit
isstring(@stringOrAnything);            // returns true if it is passed a string
iskeyword(@keywordOrAnything);          // returns true if it is passed keyword
isurl(@urlOrAnything);                  // returns true if it is a string and a url
ispixel(@pixelOrAnything);              // returns true if it is a number and a px
ispercentage(@percentageOrAnything);    // returns true if it is a number and a %
isem(@emOrAnything);                    // returns true if it is a number and an em
isunit(@numberOrAnything, "rem");       // * returns if a parameter is a number and is in a particular unit

// * These functions are only available in the 1.4.0 beta

// --------------------------------------------------
// Built-in + vendor functions

background: url("/images/some/place/nice.jpg");
background: url('/images/some/place/nice.jpg');
background: url(images/some/place/nice.jpg);
background: url(http://i.imgur.com/Da1eUqj.gif);

rgba(255, 255, 255, 0.5);
linear-gradient(0deg, blue, green 40%, red);
matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
translate(12px, 50%);

.transformer {
  transform: translateX(10px) rotate(10deg) translateY(5px);
  -webkit-transform: translate3d(@x, @y, @z);
}

-webkit-linear-gradient(0deg, blue, green 40%, red);
-webkit-gradient();
-webkit-radial-gradient();
-webkit-interpolation-mode();
-webkit-search-decoration();
-moz-search-cancel-button();
-webkit-farts();

customFunction(blah);

// --------------------------------------------------
// Strings / Interpolation

@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");

.test-strings {
  filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
  filter: ~'ms:alwaysHasItsOwnSyntax.For.Stuff()';
  -moz-transform: ~"@{op}(@{val})";
}

img.testOK {
    -ms-filter: ~"progid:DXImageTransform.Microsoft.AlphaImageLoader";
    /* syntax color ok... */
}

img.testKO {
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(...)";
    -ms-filter: ~"progid:DXImageTransform.Microsoft.AlphaImageLoader(...)";
    /* syntax color ok... */
}

@name: '-black';
.selector@{name} {
    color: black;
}

@str: "hello";
@var: ~`"@{str}".toUpperCase() + '!'`;
@color: color(`window.colors.baseColor`);
@darkcolor: darken(@color, 10%);

.svg-url-test {
  border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0,0 24,26"><filter id="dropshadow" height="150%" width="150%"><feGaussianBlur in="SourceAlpha" stdDeviation="2"></feGaussianBlur><feOffset dx="0" dy="1" result="offsetblur"></feOffset><feMerge><feMergeNode></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter><polygon fill="hsl(0, 0%, 100%)" filter="url(#dropshadow)" points="12,3 2,13 12,23 22,13"></polygon></svg>') 30.76923% 29.16667% repeat;
  border-width: 0 0 8px;
  border-style: solid;
}

@font-face {
  font-family: 'hybrid';
  src: url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AABKAAAsAAAAAGvQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAABCAAAD0QAABYWvgI5ZkZGVE0AABBMAAAAGgAAABxl3Qs+R0RFRgAAEGgAAAAdAAAAIAA6AARPUy8yAAAQiAAAAEsAAABgL+jdgmNtYXAAABDUAAAAPQAAAVLgHPLNaGVhZAAAERQAAAAuAAAANglx3MloaGVhAAARRAAAACAAAAAkEBwL4WhtdHgAABFkAAAAKAAAADIjfAFibWF4cAAAEYwAAAAGAAAABgANUABuYW1lAAARlAAAAN8AAAF3TeAOdnBvc3QAABJ0AAAADAAAACAAAwAAeJxtWAtYVNUW3gdmmBFwRGQQFAdEUlOSEQEf1weSIrfUEMl8EKGR+RYJn1miaSIHCxWTq6b4zNTMyC+5pKVcU0dFCXyggi/UvKI2eBUHsFn3X+cM1L0ln/vsfc7e673+tfZIQqMRki=) format('woff'),
  url("data:application/x-font-ttf;charset=utf-8;base64,AAEAAAANAIAAAwBQRkZUTWXdCz4AAAw4AAAAHEdERUYAPAAGAAAMGAAAACBPUy8yL8fdYgAAAVgAAABWY21hcOAe89QAAAHsAAABUmdhc3D//wADAAAMEAAAAAhnbHlmVZYD5gAAA2AAAAaYaGVhZAly3MkAAADcAAAANmhoZWEQHgviAAABFAAAACRobXR4JCYBYgAAAbAAAAA6bG9jYQfQCioAAANAAAAAIG1heHAAYAF/AAABOAAAACBuYW1lTeAOdgAACfgAAAF3cG9zdJ7/dZwAAAtwAAAAoAABAAAAAQAAs/KXr18PPPUACwIAAAAAAMG") format('truetype');
}

// --------------------------------------------------
// Variables

@nice-blue: #5B83AD;
@salmon: #FD806B;
@light-blue: @nice-blue + #111;

#header { color: @light-blue; }

// --------------------------------------------------
// Nesting

body {
  .navigation {
    color: red;
  }
}

#header {
  color: black;

  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

.child, .sibling {
    .parent & {
        color: black;
    }
    & + & {
        color: red;
    }
}

// --------------------------------------------------
// Mixins

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

#menu a {
  color: #111;
  .bordered;
}

.post a {
  color: red;
  .bordered;
}

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
}

.box-shadow(2px, 5px);

.mixin(one, two, 'three', @four, @{five}) {
  color: darken(@color, 10%);
}
.mixin(dark, @color) {
  color: darken(@color, 10%);
}
.mixin(light, @color) {
  color: lighten(@color, 10%);
}
.mixin(@_, @color) {
  display: block;
}

.mixin(@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.mixin(@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixin(@a) {
  color: @a;
}

.selector {
  background: .mixin(dark);
}

.mixin(@a, @b: 0) when (isnumber(@b)) { ... }
.mixin(@a, @b: black) when (iscolor(@b)) { ... }

.mixin .sub-mixin(@param);

#mixin() {
  color: darken(@color, 10%);
}

// --------------------------------------------------
// Operations

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;

// --------------------------------------------------
// Namespaces & Accessors

#bundle {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover { background-color: magenta }
  }
  .tab { }
  .citation { }
}

#header a {
  color: orange;
  #bundle > .button;
}

#defaults {
  @width: 960px;
  @color: black;
}

.article { color: #294366; }

.comment {
  width: #defaults[@width];
  color: .article['color'];
}

.btn-small [class^="icon-"],
.btn-small [class*=" icon-"] {
  margin-top: 0;
}

// --------------------------------------------------
// At-rules

@charset;
@import;
@namespace;
@media;
@page;
@font-face;
@keyframes;
@supports;
@document;

@import "library";
@import "typo.css";

@media (min-width: 768px) and (max-width: 979px) {
  #grid > .core(@gridColumnWidth768, @gridGutterWidth768);
  border-width: 0 0 8px;
  border-style: solid;
}

.nested {
  #grid > .core(@gridColumnWidth768, @gridGutterWidth768);
  @media screen and (min-width: 768px) and (max-width: 979px) {
    .styles;
  }

  @media @breakpoint {
    .styles;
  }
}

@font-face {
  font-family: 'HelveticaNeueLT-Bold';
  src: url('/fonts/helv-neue-bold.eot');
  src: url('/fonts/helv-neue-bold.eot?#iefix') format('embedded-opentype'),
  url('/fonts/helv-neue-bold.woff') format('woff'),
  url('/fonts/helv-neue-bold.ttf') format('truetype');
}

@-webkit-keyframes name-your-animation {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes name-your-animation {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes name-your-animation {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes name-your-animation {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

// --------------------------------------------------
// Pseudo elements / classes

a:nth-child(2) { background: darken(@grey, 5%); }

li:nth-child(4n - 7) {  /* or 4n+1 */
  color: green;
}

li:nth-child(-n + 5) {  /* or 4n+1 */
  color: blue;
}

::selection {
  background: @text-select-background;
  color: @text-select-color;
}
::-moz-selection {
  background: @text-select-background;
  color: @text-select-color;
}

button::-moz-focus-inner {}

p::first-letter { color: red }

body:not(.something) {
  padding: 10px;
}

.main:hover {
  // comment
  #somewhere:visited {
    border: 1px solid red !important;
  }
  article:before {
    margin-bottom: 3em;
  }
  .sub:active {
    @stuff;
  }
}

// --------------------------------------------------
// Issues


// https://github.com/danro/LESS-sublime/issues/39
.pseudo-elements-whitespace {
  header {margin:10px 0 20px}
  footer {div:before{color:red}}
}

// https://github.com/danro/LESS-sublime/pull/43
#_ ._ .improved-selectors {
  color: red;
}

// https://github.com/danro/LESS-sublime/pull/41
.selector:extend(.extension, .extension all) { } // comment
.selector {
  &:extend([data="attr"], .extension any, .extension all, .selector@{name});
  // comment
}
.selector:extend(.extension) { // comment
}

//https://github.com/danro/LESS-sublime/pull/49
.selector:only-child {
  property: 100px;
}
p::first-letter {
  color: @red;
  font-size: 130%;
}

//https://github.com/danro/LESS-sublime/pull/52
div {
  display: table-caption;
  display: table-cell;
  display: table-column;
  display: table-column-group;
  display: table-row-group;
}

//https://github.com/danro/LESS-sublime/issues/55
.has-scrollbar {
  > .scroll-pane {
    &::-webkit-scrollbar {
      // visibility: visible;
      property: 100px;
    }
  }
}

//https://github.com/danro/LESS-sublime/issues/62
.test {color:green;}
._test {color:green;}
.-test {color:red;}

#test {color:green;}
#_test {color:green;}
#-test {color:red;}

input {color:green;}
input:before {color:green;}
input::-webkit-input-placeholder {color:red;}
input:-moz-placeholder {color:red;}

//https://github.com/danro/LESS-sublime/issues/63
.test-case {
  // This is a comment
  font-size: 10px;

  .mixin-param-test(100px, {
    // This is a comment

    .inner-mixin(param, {
      // We must go deeper
      font-size: 10px;
    });

    font-size: 10px;
  }, param1, @param2, @{param3}, 40px);
}

@my-ruleset: {
  .my-selector {
    background-color: black;
  }
};

@my-ruleset: {
  .my-selector {
    @media tv {
      background-color: black;
    }
  }
};

@media (orientation:portrait) {
    @my-ruleset();
}