CSS-On-Diet

a preprocessor for designers

CSS-On-Diet Specification 1.8

This is a technical specification for the CSS-On-Diet preprocessor. Check out the home page for an introduction or the developer guide for a detailed documentation.

Declarations

FeatureDescriptionExample
Syntax The whole declaration has to be in a single line
color: white;
Optional colons The colons and semicolons are optional
color white;
color: white
color white
Mnemonics The properties, values and units have mnemonics
col wh
wid 10p
Multiple declarations The semicolon can separate declarations in one line
col wh; wid 10p
Line continuation (new in 1.4) The backslash (\) followed by the new line character joins lines
bai linear-gradient( \
      to right, \
      red, #f06d06 )

Properties

MNECSS Name
alcalign-content
alialign-items
alsalign-self
an-animation
anyanimation-delay
anranimation-direction
andanimation-duration
anfanimation-fill-mode
anianimation-iteration-count
annanimation-name
anpanimation-play-state
antanimation-timing-function
ba-background
balbackground-clip
bacbackground-color
baibackground-image
baobackground-origin
bapbackground-position
barbackground-repeat
basbackground-size
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
MNECSS Name
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
btwborder-top-width
bwiborder-width
botbottom
bosbox-shadow
bozbox-sizing
cleclear
colcolor
concontent
curcursor
disdisplay
filfilter
fl-flex
flbflex-basis
fldflex-direction
flfflex-flow
flgflex-grow
flsflex-shrink
MNECSS Name
flwflex-wrap
flofloat
fo-font
foffont-family
fosfont-size
fotfont-style
fovfont-variant
fowfont-weight
heiheight
jucjustify-content
lefleft
lesletter-spacing
lihline-height
li-list-style
liilist-style-image
liolist-style-position
litlist-style-type
ma-margin
mabmargin-bottom
malmargin-left
marmargin-right
matmargin-top
mahmax-height
mawmax-width
mihmin-height
miwmin-width
opaopacity
ordorder
ou-outline
oucoutline-color
ouooutline-offset
ousoutline-style
ouwoutline-width
ov-overflow
MNECSS Name
ovxoverflow-x
ovyoverflow-y
pa-padding
pabpadding-bottom
palpadding-left
parpadding-right
patpadding-top
posposition
rigright
teatext-align
tedtext-decoration
teitext-indent
teotext-overflow
tertext-rendering
testext-shadow
tettext-transform
toptop
tf-transform
tfotransform-origin
tfstransform-style
ts-transition
tsytransition-delay
tsdtransition-duration
tsptransition-property
tsttransition-timing-function
veavertical-align
visvisibility
whswhite-space
widwidth
wobword-break
wosword-spacing
wowword-wrap
zinz-index
zoozoom

Values

MNECSS Value
!i!important
%%100%
ababsolute
alall
auauto
babaseline
blblock
bobold
bbborder-box
bhboth
btbottom
cacapitalize
cecenter
cocolumn
cbcontent-box
dadashed
dedefault
dodotted
dbdouble
eaease
eiease-in
ioease-in-out
MNECSS Value
eoease-out
fifixed
flflex
feflex-end
fsflex-start
hihidden
ifinfinite
ihinherit
iiinitial
ilinline
ibinline-block
isinset
ititalic
leleft
lilinear
lglinear-gradient
lolowercase
mimiddle
nrno-repeat
nonone
nmnormal
nwnowrap
MNECSS Value
pbpadding-box
popointer
rgradial-gradient
rerelative
rxrepeat-x
ryrepeat-y
riright
rorow
sosolid
saspace-around
sbspace-between
ststatic
scstretch
tatable
totop
trtransparent
ununderline
upuppercase
vivisible
whwhite
wrwrap

Units

MNECSS Unit
ppx
eem
rrem
iin
ccm
mmm
xex

Comments

SyntaxDescription
//...One line comments. Starting from the // sequence up to the end of line.
/*...*/Ordinary CSS comments
/*../*....*/..*/Nested comments. An arbitrary level of nesting.
//!...If the first character is an exclamation, the comment won't be cut out when CSS is minified (Exception is the Header line)
/*!...*/If the first character is an exclamation, the comment won't be cut out when CSS is minified

Defines

FeatureDescriptionExample
The at-rule format Every line in the @cod-define rule body is a declaration. Multiple @cod-define are joined.
@cod-define {
  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 the define declaration. Additionally _ARG1_, _ARG2_, ... represent macro parameters.
uniblue rgba(67,12,168,_ARG1_)
Defines expansion in the file Substitute whole words matching a define name in the whole file. Even before @cod-define rule.
color:myblue;
col myblue
Defines expansion in the @cod-define body Substitute strings matching a define name from declarations above it. Words boundaries are unimportant. Longer names have priority to avoid substrings matches
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
Lines continuation Because every define declaration has to be in a single line, the only way to write define body accross multiple lines is line continuations escape character
@cod-define {
  mixinA { mal 2px;\
           pal _ARG1_\
         }
}

Medias (new in 1.5)

FeatureDescriptionExample
The at-rule format Every line in @cod-media rule body is a media breakpoint declaration. Multiple @cod-media are joined.
@cod-media {
  small (min-width: 32em)
  medium (min-width: 48em)
}
Medias breakpoint declaration One per line. The first word is a breakpoint name. Rest of it is a @media declaration
TABLET screen and (min-width:768px)
Medias breakpoints usage At the end of a declaration @media-breakpoint-name.
li {
 pa- 10p 
 pa- 20p @small
}
Medias breakpoints expansion At the end of the file.
@media (min-width: 32em) {
 padding: 20px;
}
A breakpoint name Case sensitive. Letters, digits, underscore and hyphen!
very_small-SCREEN

Includes (new in 1.2)

FeatureDescriptionExample
The at-rule format Every line in @cod-include rule body is a file path. Multiple @cod-include are expanded in places of their declarations.
@cod-include {
  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 6 letters of standard RGB value plus 2 for 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
//!cssondiet.com/specification-1.8