Anchor Less

Source onGitHub

By Category:

Mixins

Helpers

Variables

Mixins

Mixins

Mixins are sets of code that can be configured to modify an element's properties. Grouped by property:

Animation and Transition

Name Syntax
.animation(...); @name, @duration, @timing, @delay, @iteration, @direction, @fill-mode, @play-state
.transition(...); @property, @duration, @timing, @delay

Box-model

Name Syntax
.border(...); @width, @style, @color
.display(...); @display, @horiz-width, @vert-height, @comp
.minmax-size(...); @min-width, @max-width, @min-height, @max-height
.overflow(...); @overflow-x, @overflow-y
.size(...); @width, @height
.spacing(...); @margin, @padding

Filters

Name Syntax
.blur(...); @pixels
.brightnes(...); @percentage
.contrast(...); @percentage
.drop-shadow(...); @offset, @blur, @color
.filter(...); @pixels
.grayscale(...); @percentage
.hue-rotate(...); @pixels
.invert(...); @percentage
.saturate(...); @percentage
.sepia(...); @percentage
.svg(...); @svg-url

Layout

Name Syntax
.align(...); @top, @right, @bottom, @left
.float(...); @float
list-style(...); @type, @position, @image
position(...); @position, @top, @right, @bottom, @left
.z-index(...); @index

Media Query

Name Syntax
.query(...); @ruleset, @min-width, @max-width

Transform

Name Syntax
.backface(...); @visibility
.transform-origin(...); @x-axis, @y-axis, @z-axis
.perspective(...); @length;
.resize(...); @direction;
.rotate3d(...); @x-axis, @y-axis, @z-axis, @angle
.scale3d(...); @x-axis, @y-axis, @z-axis
.skew(...); @x-axis, @y-axis
.transform(...); @function
.translate3d(...); @x-axis, @y-axis, @z-axis

Typography

Name Syntax
.font(...); @size, @line-height, @weight, @family1, @family2, @family3, @family4, @family5
.fontface(...); @family, @path, @weight, @style, @compatibility
.text(...); @align, @indent, @transform
.text-decoration(...); @line, @style, @color
.text-shadow(...); @spread, @color, @alpha

Visual properties

Name Syntax
.background(...); @color, @image, @repeat, @position, @size, @repeat, @origin, @clip, @attachment
.color(...); @text, @background, @border
.gradient(...); @direction, @start, @stop1[, @stop2, @stop3]
.opacity(...); @level;
.rounded(...); @top-right @bottom-right @bottom-left
.shadow(...); @offset, @color, @alpha[, @inset]

Helpers

Helpers

Helpers are sets of code to create or modify an specific html element.

Assets

Name Description
.clearfix(); A snippet for an element to clear after itself
.ellipsis(); Applies properties to an element to render an ellipsis '...'
.hide-text(); A way have text without showing it up
.hyphens(); Splits words whenever available
.line-break(); Clears a left floated element
.nowrap();
.word-break();
.wrap();

Centering

Name Syntax
.center(...); @mode, @width, @height, @container-width, @container-height
.center-h(...); @mode, @width, @container-width
.center-v(...); @mode, @height, @container-height

Pseudo

Name Syntax
.after(...); @content, @width, @height
.before(...); @content, @width, @height
.first-letter(...); @size, @style, @color, @text-shadow
.first-line(...); @size, @style, @color, @text-shadow
.placeholder(...); @text-color, @background-color, @text-shadow
.selection(...); @text-color, @background-color, @text-shadow

Others

Name Syntax
.custom(...); @property1, @value1, @property2, @value2, @property3, @value3;
.table-cell-color(...); @text-color, @background-color, @rows
.triangle(...); @direction, @width, @height, @color

Variables

Shortcodes

Shortcodes and Build-in resources.

Color Names

Gray Shades

Name Value
@hex0 #000000
@hex1 #111111
@hex2 #222222
@hex3 #333333
@hex4 #444444
@hex5 #555555
@hex6 #666666
@hex7 #777777
@hex8 #888888
@hex9 #999999
@hexa #aaaaaa
@hexb #bbbbbb
@hexc #cccccc
@hexd #dddddd
@hexe #eeeeee
@hexf #ffffff
@hexf0 #f0f0f0
@hexf1 #f1f1f1
@hexf2 #f2f2f2
@hexf3 #f3f3f3
@hexf4 #f4f4f4
@hexf5 #f5f5f5
@hexf6 #f6f6f6
@hexf7 #f7f7f7
@hexf8 #f8f8f8
@hexf9 #f9f9f9

Easing

Name Description
@ease-in-back Further reference http://matthewlein.com/ceaser/
@ease-out-back
@ease-in-out-back
@ease-in-cubic
@ease-out-cubic
@ease-in-out-cubic
@ease-in-circ
@ease-out-circ
@ease-in-out-circ
@ease-in-expo
@ease-out-expo
@ease-in-out-expo
@ease-in-quad
@ease-out-quad
@ease-in-out-quad
@ease-in-quart
@ease-out-quart
@ease-in-out-quart
@ease-in-quint
@ease-out-quint
@ease-in-out-quint
@ease-in-sine
@ease-out-sine
@ease-in-out-sine

Web Safe Fonts

Name Output
@safe-font-monospace Menlo, Monaco, Consolas, monospace
@safe-font-sans-serif Helvetica Neue, Helvetica, Arial, sans-serif
@safe-font-script Brush Script MT, cursive
@safe-font-serif Georgia, Times New Roman, Times, serif

Svg filters

Name Output
@svg-grayscale Grayscale filter
@svg-grayscale-ie10 IE10 Grayscale filter

All

Reference

Index: A | B | C | D | E | F | G | H | I | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z

A

  • .after(...);
  • .animation(...);
  • .align(...);

B

  • .backface(...);
  • .background(...);
  • .before(...);
  • .blur(...);
  • .border(...);
  • .brightness(...);

C

  • .center(...);
  • .center-h(...);
  • .center-v(...);
  • .clearfix();
  • .color(...);
  • .contrast(...);
  • .custom(...);

D

  • .display(...);
  • .drop-shadow(...);

E

  • .ellipsis();

F

  • .filter(...);
  • .first-letter(...);
  • .first-line(...);
  • .float(...);
  • .font(...);
  • .fontface(...);

G

  • .gradient(...);
  • .grayscale(...);

H

  • .hide-text();
  • .hue-rotate(...);
  • .hyphens();

I

  • .invert(...);

K

    L

    • .line-break();
    • .list-style(...);

    M

    • .minmax-size(...);

    N

    • .nowrap();

    O

    • .opacity(...);
    • .overflow(...);

    P

    • .perspective(...);
    • .placeholder(...);
    • .position(...);

    Q

    • .query(...);

    R

    • .resize(...);
    • .rounded(...);
    • .rotate3d(...);

    S

    • .saturate(...);
    • .scale3d(...);
    • .selection(...);
    • .sepia(...);
    • .shadow(...);
    • .size(...);
    • .skew(...);
    • .spacing(...);
    • .svg(...);

    T

    • .table-cell-color(...);
    • .text(...);
    • .text-decoration(...);
    • .text-shadow(...);
    • .transform(...);
    • .transform-origin(...);
    • .translate3d(...);
    • .triangle(...);

    U

    V

      W

      • .word-break();
      • .wrap();

      Z

      • .z-index(...);