/* 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,') 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(); }