lesses

Useful less mixin

Installation

npm i lesses

Usage

Only use the mixin less

@import "mixin/all";

Also use the ripe less by class

@import "ripe/all";

Check the example page

Mixin

util

• .clearfix
• .size(width[, height])
• .color(color[, background-color])
• .color-reverse(color[, background-color])
• .opacity(value)
• .border(color[, border-radius]) border always use 1px solid @color

grid

TODO

gradient

• .horizontal(start, end) end default equals to start
• .vertical(start, end)
• .reset-filter only need when reset old ie

position

• .center horizontal center
• .middle(height) vertical middle, but it needs a height

text

• .text-size(font-size[, line-height: 1])
• .text-line(line-height[, count: 1]) limit text lines
• .text-left
• .text-right
• .text-center

shadow

• .shadow([value])
• .inset-shadow([value])

default value is 1px 2px 8px 1px rgba(0, 0, 0, 0.25), can use in most situation

transition

• .transition([value])

default value is all 0.4s ease-in-out

global var

• ie-compat default is true to support ie6+ as possible as it can

Handful class

• .clearfix
• .left
• .right
• .block
• .inline
• .inline-block
• .text-left
• .text-right
• .text-center
• .hidden display none and visibility hidden
• .invisible only visibility hidden
• .circle
• .round
• .fixed
• .absolute
• .relative

Notice

lesses do nothing about compat prefix, only old ie and w3c

use autoprefixer to add vendor prefixes

e.g.

npm i -g less-plugin-autoprefix
lessc style.less --autoprefix="> 1%"

# if you are from China, then use
lessc style.less --autoprefix="> 0%" # all browser(IE6+) prefix

License