This document discusses CSS preprocessors and how they can improve the CSS writing process. It introduces CSS-On-Diet, a preprocessor designed for designers. CSS-On-Diet adds useful features like variables, mixins, calculations and media queries to make CSS more concise, readable and reusable. It removes the need for colons and semicolons and includes shortcuts like abbreviations to speed up the writing process.

1. CSS preprocessors for
designers
on the CSS-On-Diet example
Tomasz.Wyderka cofoh.com 2014.July.13

2. Pure CSS
● Repetitive
● Tedious
● Unreadable
● Old

3. Repetitive
a { color: #1c6ba0; }
ul { color: #1c6ba0; }
.el { color: #1c6ba0; }
@media print {
a { color: #ffffff; }
ul { color: #ffffff; }
.el { color: #ffffff; }
}

4. Tedious
div {
Too detailed properties:
border-bottom-right-radius: 2em;
Unnecessary prefixes:
-webkit-animation-timing-function:linear;
animation-timing-function:linear;
}

5. Unreadable
div {
Should be 200-10(padding)-2(border)
width: 188px;
That’s the same color, just different opacity
color: #C4E3EE
border-color:rgba(196,227,238,0.93)
}

6. CSS is old
● comment style: /* … */
● block groups: {}
● separator character: ;
are taken from C programming language created in 1969!
div {
/* comment */
prop1: value1;
prop2: value2;
}

7. CSS Preprocessor
Definition:
Software installed on developer’s computer
which reads modified and more feature rich
CSS and writes back pure CSS ready for use
by internet browsers

8. Some Preprocessors
● Sass
● Less
● Stylus
● CSS-On-Diet
Most used is Sass. My examples are based
on the CSS-On-Diet.

9. CSS-On-Diet
Created for designers. Doesn’t require
programming like others. Focused on
making writing and modifying CSS faster.
Based on Emmet plugin.

10. New features in old CSS
Most CSS preprocessors adds features on
top of a normal CSS syntax. That means you
can use existing CSS code and use
preprocessors features only in parts of them.
You don’t have to be afraid of change all
your existing work.

11. New features in old CSS
.element {
letter-spacing: 2px;
background-color: #1C6BA0;
}CSS-On-Diet can read your existing CSS if
all declarations are written on separate lines.
Like above. If not just split them.

12. Remove colons
Preprocessors tends to reduce repetitive
tasks. Colons and semicolons are optional in
CSS-On-Diet. Small change but releases
your brain from doing work which can be
done by computer.

13. Remove colons
.element {
letter-spacing 2px
background-color #1C6BA0
}Colons and semicolons are not required. In
the next example you will see how it can save
more than 20% of keystrokes

14. Mnemonics (abbreviations)
Emmet plugin saves a lot of time for crowds
of developers. CSS-On-Diet uses that idea
(Abbreviations) to fasten not only writing
process, but also modifying and reading
time!

15. Mnemonics (abbreviations)
.element {
les 2p
bac #1C6BA0
}Common CSS keywords have mnemonics.
Parameters are 3 letters long, values 2, and
units just 1 letter (The whole list)

16. Medias Breakpoints
Responsive Web Design takes a lot of time.
And usually it is very repetitive work. Like
copying declarations between media queries,
or jumping between totally unrelated parts
of the code.

17. Medias Breakpoints
@cod-media {
tablet (min-width: 768px)
}
.element {
les 2p
les 3p @tablet
}
Now RWS is highly intuitive

18. Comments
Commenting out CSS is not a big deal but
it’s used so often that should be better. With
CSS-On-Diet you can comment out:
● a single line quickly
● around text with other comment inside
(that was very annoying)

19. One line comments
.element {
les 2p // why not 3?
bac #1C6BA0 // deep ocean
}No need to remember to close those
comments

20. Nested comments
.element {
/*
les /*3p*/ 2p
*/
bac #1C6BA0
}
Now you can comment out code with other
comment inside. Finally...

21. Arithmetics
Did you ever want to write the element
width as a sum of two numbers? I bet you
did. Calculations operation is the most basic
feature. Every preprocessor has it. Some
even very advanced. In everyday work just
+,-,*,/ will pay you back superfluously.

22. Arithmetics
.element {
wid 200p+2*10p
les 3p-1
bac #1C6BA0
}
CSS needs calculations. That's more than
sure.

23. Short RGBA
It’s quite big inconsistency to write color
with Alpha Channel in the different format.
When you have #1c6ba0 and want to add
transparency you have to convert it to
rgba(28,107,160,0.95).

24. Short RGBA
.element {
les 3p-1
bac #1C6BA0F1
}
In CSS-On-Diet you can add just two more
digits to have transparency with your color
(here F1)

25. Variables
The most important and needed feature are
the variables. You store color, width,
anything under variable name and then you
can use it in arbitrary number of places.
When you want to adjust that color, just
change it in one place! Stay DRY!

26. Variables
@cod-defines {
sp2014 3p-1
ocean #1C6BA0F1
}
.element {
les sp2014
bac ocean
}
Every line in the @cod-
defines{} is a variable
name and a body. That
name will be changed to
that body text when
used.

27. Mixins
Mixins are bigger parts of CSS which can be
reused. Imagine the mixin as a variable
containing not single value, but whole lines
of CSS. Additionally mixin can use
arguments to better mix CSS in places where
is use.

28. Mixins
@cod-defines {
sp2014 3p-1
ocean bac #1C6BA0_ARG1_ ;
bai url("fish.png")
}
.element {
les sp2014
ocean(F1)
}
ocean is the
mixin name
which expands to
bac and bai
(background
color and image).
_ARG1_ will be
changed to F1

29. Including files
CSS @import forces browsers to download
included file in a separate http request.
Generating more traffic. Preprocessors have
their own mechanism of importing which
concatenates all files in the one, reducing
network traffic.

30. Including files
@cod-include {
file1.cod
dir1/dir2/file2.css
}
That will include and merge two files in the
place where this code is written.

31. Links
Thank you. That’s all.
Check out these links for more information
about CSS-On-Diet:
Home page
Developer Guide (inside detailed
Installation and Usage Instructions)