xCss

Table of Contents

xCss Functions Listing

xCss also supports functions, which can be used to manipulate the content of your CSS output. Functions usually take parameters, which are used in the manipulation

$function-name()
$function-name(param1, param2, param3)

Some functions behave differently depending on the number of parameters, and/or the type of parameters, that you pass in.

xCss functions always return a value, and the value is currently has two types of functions;

  • Functions returning a color value

Function names are case-insensitive, which means that, for example, $darken() is the same as $DARKEN().

Color Functions

xCss supports a number of color-manipluation functions, which allow you to take specific user-input colors, and adjust or mix them in various ways to create new colors.

A good example of this is, e.g. a beveled box. Let's suppose you want to draw a raised-looking button-style box, and want to be able to change the color easily later. Using xCss, you can;

  1. specify the body color of the box as a parameter
  2. color the box interior using the body color
  3. color the top & left borders of the box using a lighter variation of the body color
  4. color the bottom & right borders of the box using a darker variation of the body color

In other words, not only can you change the box color anytime you want, but you only have to specify one color, and the bevel colors are automatically calculated for you.

Currently, color values passed into functions must be traditional hex colors of the 6-digit (e.g. #ff00ea) form, or the 3-digit form (e.g. #f0e). You cannot use named colors in color math functions.

Measurement Functions