CSS-On-Diet

a preprocessor for designers

CSS-On-Diet Specification 1.0

This is a technical specification for CSS-On-Diet preprocessor. Check out the home page for an introduction.

Declarations
FeatureDescriptionExample
Declaration Whole declaration HAS to be in a single line
color: white;
Optional colons Colons and semicolons are optional
color white;
color: white
color white
Mnemonics Properties, values and units have mnemonics
col wh
wid 10p
Multiple declarations Semicolon can separate declarations in one line
col wh; wid 10p
Properties
MNECSS NameMNECSS NameMNECSS NameMNECSS Name
colcolor bacbackground-color b--border btwborder-top-width
widwidth baibackground-image bb-border-bottom bwiborder-width
heiheight bapbackground-position bbcborder-bottom-color bosbox-shadow
disdisplay ba-background bblborder-bottom-left-radius bozbox-sizing
concontent basbackground-size bbrborder-bottom-right-radius zoozoom
posposition barbackground-repeat bbsborder-bottom-style mawmax-width
flofloat balbackground-clip bbwborder-bottom-width miwmin-width
toptop baobackground-origin bcpborder-collapse mihmin-height
lihline-height fosfont-size bcoborder-color mahmax-height
lefleft fowfont-weight bi-border-image filfilter
zinz-index foffont-family bioborder-image-outset whswhite-space
veavertical-align fotfont-style birborder-image-repeat wosword-spacing
ov-overflow fo-font bilborder-image-slice wobword-break
ovxoverflow-x fovfont-variant bisborder-image-source wowword-wrap
ovyoverflow-y pa-padding biwborder-image-width an-animation
opaopacity palpadding-left bl-border-left annanimation-name
cleclear patpadding-top blcborder-left-color andanimation-duration
lesletter-spacing pabpadding-bottom blsborder-left-style antanimation-timing-function
curcursor parpadding-right blwborder-left-width anyanimation-delay
rigright ma-margin braborder-radius anianimation-iteration-count
oucoutline-color malmargin-left br-border-right anranimation-direction
ou-outline matmargin-top brcborder-right-color anfanimation-fill-mode
ousoutline-style mabmargin-bottom brsborder-right-style anpanimation-play-state
ouooutline-offset marmargin-right brwborder-right-width tf-transform
ouwoutline-width teatext-align bspborder-spacing tfotransform-origin
botbottom tedtext-decoration bstborder-style tfstransform-style
li-list-style tettext-transform bt-border-top ti-transition
litlist-style-type testext-shadow btcborder-top-color tiytransition-delay
liilist-style-image teitext-indent btlborder-top-left-radius tidtransition-duration
liolist-style-position teotext-overflow btrborder-top-right-radius tiptransition-property
visvisibility tertext-rendering btsborder-top-style tittransition-timing-function
Values
MNECSS ValueMNECSS ValueMNECSS Value
!i!important eaease nonone
%%100% eiease-in nrno-repeat
ababsolute eoease-out nwnowrap
alall fifixed pbpadding-box
auauto hihidden popointer
babaseline ibinline-blockrerelative
bbborder-box ifinfinite riright
bhboth ihinherit rxrepeat-x
blblock iiinitial ryrepeat-y
bobold ilinline sosolid
btbottom ioease-in-out ststatic
cacapitalize isinset tatable
cbcontent-box ititalic totop
cecenter leleft trtransparent
dadashed lilinear ununderline
dbdouble lolowercase upuppercase
dedefault mimiddle vivisible
dodotted nmnormal whwhite
Units
MNECSS Unit
ppx
eem
iin
ccm
mmm
xex
Comments
SyntaxDescription
//...One line comments. Starting from // up to the end of line.
/*...*/Ordinary CSS comments
/*../*....*/..*/Nested comments. Arbitrary level of nesting.
Defines
FeatureDescriptionExample
The at-rule format One @cod-defines rule per one file
@cod-defines {
  ...
}
Define declaration One per line. The first word is a define name.
myblue #C4E3EE
myshadow 1px 1px #7C7466
Macro declaration The same like define declaration. Additionally _ARG1_, _ARG2_, ... represent macro parameters.
uniblue rgb(67,12,168,_ARG1_)
Defines expansion in the file Substitute whole words matching a define name in the whole file. Even before @cod-defines rule.
color:myblue;
col myblue
Defines expansion in the @cod-defines body Substitute strings matching a define name from declarations above it. Words boundaries are unimportant.
tail C7EE
anotherblue #C4tail
Macros expansion Same rules like for defines expansion. Additionally _ARG1_, _ARG2_, ... expand from arguments in parentheses.
color: uniblue(0.45);
A define name Case sensitive. Letters, digits, underscore and hyphen!
my_long-NAME12
Arithmetics
FeatureDescriptionExampleResult
Operators Four arithmetics operators and parentheses: +, -, *, /, ()
200-(20+3)*2
154
Whitespace outside Expressions have to be surrounded by whitespaces
word 10+2 20-3word
word 12 20-3word
Whitespaces inside No whitespaces allowed inside an expression
20-3 30 *2
17 30 *2
Units processing Standard units and COD mnemonics allowed
20px+10px 30%+10%
30px 40%
Units guessing Just one number with a unit required
20px+10 30+10%
30px 40%
Missing converter First founded unit decides about result's unit. Proper converter will be implemented ASAP.
2+3px+4in
9px
Header
FormatDescriptionExample
//!link.to/COD-specification
First line of the file should include link to COD specification URL
//!cofoh.com/css-on-diet-1.0