CSS preprocessors for designerson the CSS-On-Diet example

Tomasz.Wyderka cofoh.com 2014.July.13

Pure CSS

● Repetitive● Tedious● Unreadable● Old

Repetitivea { color: #1c6ba0; }ul { color: #1c6ba0; }.el { color: #1c6ba0; }

@media print { a { color: #ffffff; } ul { color: #ffffff; } .el { color: #ffffff; }}

Tediousdiv { Too detailed properties:

border-bottom-right-radius: 2em; Unnecessary prefixes:

-webkit-animation-timing-function:linear; animation-timing-function:linear;}

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)}

CSS is old● comment style: /* … */● block groups: {}● separator character: ;

are taken from C programming language created in 1969!

div { /* comment */ prop1: value1; prop2: value2;}

CSS PreprocessorDefinition:

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

Some Preprocessors

● Sass● Less● Stylus● CSS-On-DietMost used is Sass. My examples are based on the CSS-On-Diet.

CSS-On-Diet

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

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.

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.

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.

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

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!

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)

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.

Medias Breakpoints@cod-media { tablet (min-width: 768px)}.element { les 2p les 3p @tablet}

Now RWS is highly intuitive

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)

One line comments.element { les 2p // why not 3? bac #1C6BA0 // deep ocean

}No need to remember to close those comments

Nested comments.element { /* les /*3p*/ 2p */ bac #1C6BA0}

Now you can comment out code with other comment inside. Finally...

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.

Arithmetics.element { wid 200p+2*10p les 3p-1 bac #1C6BA0}

CSS needs calculations. That's more than sure.

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).

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)

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!

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.

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.

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

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.

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.

Links

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