Doing More With
How a meta-language can help you
take control of your stylesheets and
help improve your style productivity.
David Engel
•
•
•
•
UofM grad
.NET and PHP developer
Tipping Canoe alumnus
Experienced “backend” developer
PHP, C#, C++, MySQL, TransactSQL, Sphinx
• Relatively new to “frontend” development
CSS, jQuery, LESS, UX, design
CSS
Cascading Style Sheets
• describes look & formatting of a document
that has been created using markup
• separate style and content
• avoid specificity by harnessing the cascade
OOCSS
Object Oriented CSS
• separate structure and skin
• separate container and content
OOCSS
#button {
width: 100px;
height: 25px;
background: #ccc;
border: 1px solid #333;
border-radius: 5px;
}
<a id="button" href="">blah</a>
<div id="box">blah</div>
#box {
width: 200px;
height: 400px;
background: #ccc;
border: 1px solid #333;
border-radius: 5px;
}
OOCSS
becomes…
.button {
width: 100px;
height: 25px;
}
.box {
width: 200px;
height: 400px;
}
<a class="button skin" href="">blah</a>
<div class="box skin">blah</div>
.skin {
background: #ccc;
border: 1px solid #333;
border-radius: 5px;
}
OOCSS
Use classes for styling hooks!
Use ids for behavioral hooks!
DRY CSS
Don’t Repeat Yourself (Jeremy Clarke)
1. Group reusable CSS properties together
2. Use logical names for groups
3. Add selectors (not a fan of ALL-CAPS)
#WHITE-BACKGROUND,
.large-white-background,
.medium-white-background
{
background-color: #fff;
border-color: #bbb;
}
DRY CSS
What are we still missing?
• Descendent selectors break OOCSS – so what?
(the “OO” part of OOCSS is garbage anyways)
• No variables
• No mixins
• No inheritance
LESS
•
•
•
•
•
•
•
variables
mixins
nesting
operations
functions
switches
overloads
•
•
•
•
•
•
•
comparitors
type/unit checking
color functions
math functions
string embedding
Namespaces
Javascripting!!!
LESS: Variables
@maxim-green:#8dc63f;
.color-green{
color:@maxim-green;
}
LESS: Mixins
• Gives us inheritance!
.rounded-corners{
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#header {
.rounded-corners;
}
LESS: Mixins
Parametric mixins extend this functionality
.rounded-corners (@radius) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
#header {
.rounded-corners(5px);
}
LESS: Mixins
Parametric mixins can also have default values
.rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
#header {
.rounded-corners;
}
LESS: Nesting
Nesting gives us a kind of namespacing for specificity of
inheritance
#header {
h1 {
}
p{
}
}
font-size: 26px;
font-weight: bold;
font-size: 12px;
a{
text-decoration: none;
&:hover { border-width: 1px }
}
LESS: Nesting
… and Scope
@red : red;
#header {
@red: #BF2E1A;
h1 {color: @red;
}
}
h1 {color: @red;
}
// yields #BF2E1A
// yields red
LESS: Operations
• add, subtract, divide and multiply properties
@red: # BF2E1A;
@main-margin: 4px;
#footer{
color: @red + #001100;
margin-left: @main-margin * 3;
}
LESS: Functions
Take arguments into your mixins…
.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
box-shadow: @x @y @blur @color;
-moz-box-shadow: @x @y @blur @color;
-webkit-box-shadow: @x @y @blur @color;
}
.box-shadow(3px, 7px);
LESS: Functions
…or use the @arguments variable to take it all!
.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
box-shadow: @arguments;
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
}
.box-shadow(3px, 7px);
LESS: Imperative Programming
This is a kind of switch (note the “all” selector)…
.color-mixin (dark, @color) {
color: darken(@color, 10%);
}
.color-mixin (light, @color) {
color: lighten(@color, 10%);
}
.color-mixin (@_, @color) {
display: block;
}
LESS: Imperative Programming
…that we can call like so:
@light-switch: light;
@dark-switch: dark;
.light-class {
.color-mixin(@light-switch, #888);
}
.dark-class {
.color-mixin(@dark-switch, #888);
}
LESS: Overloads
“Arity” for the geeks (and Java and .NET folks)
.fade-mixin (@a-color) {
color: @a-color;
}
.fade-mixin (@a-color, @b-color) {
color: fade(@a-color, @b-color);
}
#solid-color{
.fade-mixin(blue);
}
#faded-color{
.fade-mixin(blue, green);
}
LESS: Guarded mixins
• uses “when” and can use “and” “,” and “not”
• can also use the keywords “true” and “false”
.back-white{background-color:white;}
.back-black{background-color:black;}
.back-red{background-color:red;}
.mixin (@a) when (@a > 10), (@a < -10){
.back-white;}
.mixin (@a) when (@a = 10) and (@a = true){
.back-red;}
.mixin (@a) when (@a < 11) and (@a > -11) and not(@a = 10){
.back-black;}
LESS: Guarded mixins
• Comparitors can be very useful
• Eg. Code reuse between media types
@media: mobile;
.mixin (@a) when (@media = mobile) { ... }
.mixin (@a) when (@media = desktop) { ... }
.mixin (@a) when (@media = print) { ... }
LESS: Type checking
• iscolor
• isnumber
• isstring
• iskeyword
.color-mixin (@a) when (isnumber(@a)) {
color: @a + #001100;}
.color-mixin (@a) when (iscolor(@a)) {
color: @a}
h1{
.color-mixin(red);}
h2{
.color-mixin(#842210);}
• isurl
LESS: Unit checking
• ispixel
• ispercentage • isem
.mixin (@a) when (ispixel(@a)) {}
.mixin (@a) when (isem(@a)) {}
.mixin (@a) when (ispercentage(@a)) {}
LESS: Colour Functions
lighten(@color, 10%);
darken(@color, 10%);
// return a color which is 10% *lighter* than @color
// return a color which is 10% *darker* than @color
saturate(@color, 10%); // return a color 10% *more* saturated than @color
desaturate(@color, 10%); // return a color 10% *less* saturated than @color
fadein(@color, 10%); // return a color 10% *less* transparent than @color
fadeout(@color, 10%); // return a color 10% *more* transparent than @color
fade(@color, 50%);
// return @color with 50% transparency
spin(@color, 10);
spin(@color, -10);
// return a color with a 10 degree larger in hue than @color
// return a color with a 10 degree smaller hue than @color
mix(@color1, @color2); // return a mix of @color1 and @color2
LESS: Math Functions
ceil
floor
round
percentage
LESS: Extract Colour Properties
hue(@color);
saturation(@color);
lightness(@color);
alpha(@color);
eg.
@old-color:#27BA19;
@new-color: hsl(hue(@old-color), 45%, 90%);
LESS: Embedding Strings
• For those of you familiar with XSLT or Ruby
• Use curly braces to embed the text
• Use tilde ~ to escape strings that require quotes
@base-url: "http://www.maximinc.com/";
@green-color: #8dc63f;
#header{
background: @ green-color url("@{base-url}images/img.png");
}
#footer{
filter: ~"alpha(opacity = (@{opacityPercentage}))";
}
LESS: Javascripting!!!
• Use backticks to embed your JS in the CSS
• Escape strings, embed, interpolate, etc.
• I haven’t played with this feature yet, but here’s an
untested example:
@var1: `"LESS ".toLowerCase()`;
@var2: `"ooooooh".toUpperCase() + '!'`;
@var3: ~`"@{var1: }" + "@{var2: }" + '!'`;
LESS Elements
•
•
•
•
•
•
•
•
.gradient
.bw-gradient
.bordered
.drop-shadow
.rounded
.border-radius
.opacity
.transition-duration
•
•
•
•
•
•
•
.rotation
.scale
.transition
.inner-shadow
.box-shadow
.columns
.translate
LESS: Precompilers
LESS needs to be pre-compiled into CSS using…
• simpless
• lessphp
• less.app
• …others
OR
to compile on the fly while developing use…
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="http://lesscss.googlecode.com/files/less-1.0.30.min.js"></script>
LESS: SIMPLESS
•
•
•
•
•
•
•
SimpLESS compiles less into minified css
works with Twitter bootstrap
self-updates
compiles on the fly (monitored polling)
multi-platform
free
open source
LESS: SIMPLESS
This is what I do…
1. I code my LESSS in a separate project
2. I let SimpLESS monitor the local file to
compile CSS on the fly
3. I commit minified CSS to my main project
4. I reference the minified CSS using with the
SVN version tagged on in my html
<link media="screen" href=http://www.example.com/css/style.min.css?1994
type="text/css" rel="stylesheet“>
LESS: Eclipse plugin
I personally use the Xtext plugin – here are some
install instructions…
http://www.normalesup.org/~simonet/soft/ow/eclipse-less.en.html
You can use the LESS compiler in Eclipse,
however I manage all my compilation externally
as I also use LESS with .NET and Classic ASP code
(yes!)
Useful links
LESS
http://www.lesscss.org
SimpLESS
http://wearekiss.com/simpless
LessElements
http://lesselements.com
Winnipeg PHP
http://winnipegphp.com
Tipping Canoe
http://www.tippingcanoe.com
David Engel
davidengel.dev@gmail.com
(developed using LESS)
http://www.maximinc.com