CSS-On-Diet

a preprocessor for designers

CSS-On-Diet Specification 1.3

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 Name
colcolor
widwidth
heiheight
disdisplay
concontent
posposition
flofloat
toptop
lihline-height
lefleft
zinz-index
veavertical-align
ov-overflow
ovxoverflow-x
ovyoverflow-y
opaopacity
cleclear
lesletter-spacing
curcursor
rigright
oucoutline-color
ou-outline
ousoutline-style
ouooutline-offset
ouwoutline-width
botbottom
li-list-style
litlist-style-type
liilist-style-image
liolist-style-position
visvisibility
MNECSS Name
bacbackground-color
baibackground-image
bapbackground-position
ba-background
basbackground-size
barbackground-repeat
balbackground-clip
baobackground-origin
fosfont-size
fowfont-weight
foffont-family
fotfont-style
fo-font
fovfont-variant
pa-padding
palpadding-left
patpadding-top
pabpadding-bottom
parpadding-right
ma-margin
malmargin-left
matmargin-top
mabmargin-bottom
marmargin-right
teatext-align
tedtext-decoration
tettext-transform
testext-shadow
teitext-indent
teotext-overflow
tertext-rendering
MNECSS Name
b--border
bb-border-bottom
bbcborder-bottom-color
bblborder-bottom-left-radius
bbrborder-bottom-right-radius
bbsborder-bottom-style
bbwborder-bottom-width
bcpborder-collapse
bcoborder-color
bi-border-image
bioborder-image-outset
birborder-image-repeat
bilborder-image-slice
bisborder-image-source
biwborder-image-width
bl-border-left
blcborder-left-color
blsborder-left-style
blwborder-left-width
braborder-radius
br-border-right
brcborder-right-color
brsborder-right-style
brwborder-right-width
bspborder-spacing
bstborder-style
bt-border-top
btcborder-top-color
btlborder-top-left-radius
btrborder-top-right-radius
btsborder-top-style
MNECSS Name
btwborder-top-width
bwiborder-width
bosbox-shadow
bozbox-sizing
zoozoom
mawmax-width
miwmin-width
mihmin-height
mahmax-height
filfilter
whswhite-space
wosword-spacing
wobword-break
wowword-wrap
an-animation
annanimation-name
andanimation-duration
antanimation-timing-function
anyanimation-delay
anianimation-iteration-count
anranimation-direction
anfanimation-fill-mode
anpanimation-play-state
tf-transform
tfotransform-origin
tfstransform-style
ti-transition
tiytransition-delay
tidtransition-duration
tiptransition-property
tittransition-timing-function

Values

MNECSS Value
!i!important
%%100%
ababsolute
alall
auauto
babaseline
bbborder-box
bhboth
blblock
bobold
btbottom
cacapitalize
cbcontent-box
cecenter
dadashed
dbdouble
dedefault
dodotted
MNECSS Value
eaease
eiease-in
eoease-out
fifixed
hihidden
ibinline-block
ifinfinite
ihinherit
iiinitial
ilinline
ioease-in-out
isinset
ititalic
leleft
lilinear
lolowercase
mimiddle
nmnormal
MNECSS Value
nonone
nrno-repeat
nwnowrap
pbpadding-box
popointer
rerelative
riright
rxrepeat-x
ryrepeat-y
sosolid
ststatic
tatable
totop
trtransparent
ununderline
upuppercase
vivisible
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 Every line in @cod-defines rule body is a declaration. Multiple @cod-defines are joined.
@cod-defines {
  define1 body1
  define2 body22
}
Define declaration One per line. The first word is a define name. Rest of it is a define body
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
The at-rule termination In order to include } character in define's body, ending } has to be on a separate line
@cod-defines {
  mixinA { mal 2px; pal _ARG2_ }
}

Includes (new in 1.2)

FeatureDescriptionExample
The at-rule format Every line in @cod-includes rule body is a file path. Multiple @cod-includes are expanded in places of their declarations.
@cod-includes {
  file1
  file2
}
Include declaration One per line. Stripped from whitespaces on both end sides.
file_local_to_current.cod
  only two spaces.css
/absolute/path/to/file.css
Quoting Filenames can be optionally quoted
"filename without quotes.cod"
  'single-quotes.css'
"relative/path/in/quotes.cod"
File concatenation All included files are merged in the reading order. Result is a single CSS.
body {}
@cod-include { file1.cod }
continuation {}
@cod-include { file2.css }
Single inculsion All files are included just once (by checking hash code)
@cod-include { fileA.cod }
@cod-include { 
  // this'll not include 
  fileA.cod
}
File search path First, file path relative to parent file is checked and included. If it doesn't exist, directories from preprocessor options are searched (e.g -I, --include-dirs for command line preprocessor)
// file in A dir
@cod-include {
  first/search/me/in/A
  A/path/file.cod
}

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
Floating points If no single floating point number, result will be truncated to integer
21/5.0
21/5
4.2
4
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

#RGBA (new in 1.1)

FeatureDescriptionExampleResult
8 hex digits 24 bits of standard RGB value plus 8 bits alpha channel
#430CA8CC
rgba(67,12,168,0.8)
8 bits alpha resolution 256 values of alpha represented as float rounded to 3 digits after comma
#430CA8FE
#430CA8FF
rgba(67,12,168,0.996)
rgba(67,12,168,1)

Header

FormatDescriptionExample
//!link.to/COD-specification
First line of the file should include link to COD specification URL
//!cofoh.com/css-on-diet-1.3