less-plugin-lass

Lass
====

> it's {Less} with just a little less.

Lass is an opinionated syntax for Less CSS that omits colons, semicolons, brances, and quotes in favour of indentation.

It has most of the features of Less, and assumes that you are familiar with Less.

Examples
--------

``
// lass
@color #ffcc00

.thing
background-color @color
font-size 16px
`

turns into:

`
// css
.thing {
background-color: #ffcc00;
font-size: 16px;
}
`

Just like Less (and because it's built on Less) you can reference parent selectors with &.

`
// lass
a
color blue

&:hover
color green
`

turns into:

`
// css
a {
color: blue;
}

a:hover {
color: green;
}
`

CSS properties can have their values indented.

`
.example
background-color pink
transition
opacity 0.3s,
transform 0.3s,
color 0.3s
background
red
url(tile.png)
repeat
`

Note that the commas in the transition property above have meaning in css and are nothing to do with Lass' syntax.

Note also that interpolated properties don't work:

`
@property background

.bg
@{background} // <-- WILL NOT WORK
red
url(tile.png)
repeat
`


Plus, object variables!
-----------------------

In Lass you can define variables as objects and access properties using dot notation.

`
@palette
primary #0000E0
secondary #02d7e1
warn red
social
facebook #3b5998
twitter #00aced
youtube #bb0000

// Usage
.btn
background-color @palette.primary

.facebook-thing
color @palette.social.facebook
`


Usage
-----

TBA


Things to Know
--------------

Indentation is two (2) spaces. Don't like it? You can't change it.

Under the hood Lass compiles to less, which then compiles to css using the less-plugin-lists plugin.


Why?
----

I really, really like the features of Less — especially the error reporting and import-once behaviour — but I don't like typing out colons and braces all the time and I don't like all the space they take up on screen. I could put up with it, but that's not how I roll.


Tests
=====

Run tests with npm run test`