JR
Josef Rissling
Stories
Code
Sound
About

less-than-less.jpg
Less Than Less
CSSUtils.js: Small CSS Utility Library



less-than-less.jpg
Less Than Less
CSSUtils.js: Small CSS Utility Library
Another CSS Library

There are a lot of CSS utility libraries for JavaScript out there. Why would anybody need another one? My reasons:

1st: Write LESS-like CSS directly in JavaScript
2nd: ca. 4KB in size (that's 30 times less than LESS)
3nd: Easy to extend for custom functions
Example

Define your css in JavaScript:
var cssInput = { "@var bg-color":"hsl(0,0%,10%)", "@mixin my-mixin": { "@parameters":["left","top"], position:"absolute", color:"hsla(0,0%,10%,0.5)", left:["@left"], top:["@top"], backgroundColor:["@bg-color"], ".button" { fontSize:"2em" } }, ".leftButton": { "my-mixin":["10%","5%"] } ".rightButton": { "my-mixin":["80%","5%"] } }; var cssOutput = CSSUtils.createCSS(cssInput);
And export the processed CSS string
cssOutput
:
.leftButton { position: absolute; color: hsla(0,0%,10%,0.5); left: 10%; top: 5%; background-color: hsl(0,0%,10%); } .leftButton .button { font-size: 2em; } .rightButton { position: absolute; color: hsla(0,0%,10%,0.5); left: 80%; top: 5%; background-color: hsl(0,0%,10%); } .rightButton .button { font-size: 2em; }
Library Functions

Version: 0.7

CSSUtils.createCSS ( cssInput )

Converts an JavaScript-CSS-Object into a css string and returns it.

CSSUtils.convertPropertyName ( name, toFormat )

Converts an name and returns it into the desired format. Can be either "css" or "js".
Get the Library (BSD License)
Specification & Features


Nesting & Scopes

Variables & Concatenating

Mixins with Parameters

Custom Functions
Nesting & Scopes

Selectors can use
&
to nest parent selectors. Scopes are identified as object properties. Nested declarations (of variables etc.) are only visible to that scope.
var cssInput = { ".scope-1": { "& .scope-2": { "font-size":"12px" }, "& .scope-3": { "font-size":"25px", "& .scope-4": { "font-size":"65px" } } } };
CSS Output:
.scope-1 .scope-2 { font-size:12px } .scope-1 .scope-3 { font-size:25px } .scope-1 .scope-3 .scope-4 { font-size:65px }
Variables & Concatenating

Variables can be used from JavaScript or defined inside scopes by prefixing the attribute name with
@var
. Values of attributes are concatenated if they refer to an array property. If an item of an array property contains a name with an
@
-prefix its value will be replaced by the value of that variable. Attribute names in camel case are automatically converted to their proper css names.
var size = 20; var cssInput = { "@var hue":"100", "@var saturation":"20", "@var luminance":"50", "@var external-variable": size+"px", ".item": { fontSize:["@external-variable"], backgroundColor:["hsl(","@hue",",","@saturation","%,","@luminance","%)"] } };
CSS Output:
.item { font-size:20px; background-color:hsl(100,20%,50%); }
Mixins with Parameters

Mixins can be defined inside scopes by prefixing the attribute name with
@mixin
. Mixins are used in case where mutliple attributes and scopes are given to an scope. Parameters (variables that are passed to the mixin) can be defined inside the mixin by using an array property named
@parameters
. To use a mixin create an array property named like the mixin. Variables can be passed in the array.
var cssInput = { "@mixin position-absolute-to-zero": { position:"absolute", left:"0px", top:"0px" }, "@mixin set-size": { "@parameters":["width","height"], width:["@width"], height:["@height"] }, ".item": { "position-absolute-to-zero":[], "set-size":["100px","10%"] } };
CSS Output:
.item { position:absolute; left:0px; top:0px; width:100px; height:10%; }
Custom Functions

JavaScript Functions can be defined inside scopes by properties refering to a function. The functions can be used simular like
variables
in array properties. Instead using a string (like variables) pass an object with one array property named like the function. The given values of the array are passed to the function. Additionally, as with variables, functions can be just used from JavaScript directly.
function getRandomColor(hue) { hue = hue | Math.floor(Math.random()*360); var saturation = Math.floor( (Math.random()*50+50)) + "%"; var luminance = Math.floor( (Math.random()*50+50)) + "%"; return "hsl("+hue+","+saturation+","+luminance+")"; } var cssInput = { "getRandomColor":getRandomColor, "@var hue":110, ".item": { //call external javascript color:getRandomColor(20), //call from scope with variable backgroundColor:[{getRandomColor:["@hue"]}] } };
CSS Output:
.item { color:hsl(20,61,79%); background-color:hsl(110,75%,83%); }
2017 Josef Rissling Contact Terms of Use Nutzungsbedingungen
This site uses cookies. Read more.
Stories
Code
Sound
About