LESS and SASS: Shortcuts for Creating Great CSS

At the April 2014 IT Forum, John Phillips and I had a great time discussing the differences between LESS and SASS, and how using a CSS preprocessor can decrease your front-end development time. All of the examples used in the demonstration are listed using Codepen.io. Codepen is an online playground for developing SASS, LESS, JavaScript and HTML. Feel free to play with the examples to gain a better understanding of SASS and LESS.

Also, here is a link to the PDF version of our presentation to download and review.

LESS

To get started using LESS, visit the LESS website, http://lesscss.org/.

LESS Examples

Variables

How to create and use variables in LESS

[codepen_embed height=”268″ theme_id=”5461″ slug_hash=”Lmpkw” default_tab=”css”]
//declaring variables
@border-width:1px;
@red: #842210;

// Using variables
div#header {
border:@border-width solid @red;
}

//————–
//Another example

@brandColor: #500000;

a {
color:@brandColor;
}

footer {
background-color: @brandColor;
}

//————–
//Yet Another example

//Variables
//using a string variable

@images: "../img";

//Usage
body {
color: #444;
background: url("@{images}/white-sand.png");
}

See the Pen LESS Variables Example by Gomobile TAMU (@gomobile-tamu) on CodePen.
[/codepen_embed]

Nesting

Nesting classes in LESS

[codepen_embed height=”268″ theme_id=”5461″ slug_hash=”msqHo” default_tab=”css”]
//Heading area on page
.header {
background:#ccc;

//Subheader definition
.subheading {
font-size:18px;
color:blue;
}

}

//Media query nesting
.box {
color:red;

@media (min-width:480px) {
color:blue;
}

}

See the Pen LESS Nesting Example by Gomobile TAMU (@gomobile-tamu) on CodePen.
[/codepen_embed]

Extending

Extending classes in LESS

[codepen_embed height=”268″ theme_id=”5461″ slug_hash=”AsjEC” default_tab=”css”]
//Base Class
.box {
width:100px;
height:100px;
color:blue;
}

//Sub Class
.myBox {
.box;
color: red;
}

See the Pen LESS Extending Example by Gomobile TAMU (@gomobile-tamu) on CodePen.
[/codepen_embed]

Mixins

Creating a mixin in LESS

[codepen_embed height=”268″ theme_id=”5461″ slug_hash=”vLFhG” default_tab=”css”]
//Mixin
.rounded7px {
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
}

article.post {
background:#ccc;
display:block;
width:150px;
height:50px;

.rounded7px; //using the mixin
}

button {
background:#500000;
color:#fff;
border:0;
padding:10px;

.rounded7px; //using the mixin
}

---

SASS

To get started using SASS, visit the SASS website, http://sass-lang.com/.

SASS Examples

Variables

How to create and use variables in SASS

[codepen_embed height=”268″ theme_id=”5461″ slug_hash=”emjzv” default_tab=”css”]
//Declaring variables
$border-width:1px;
$red: #842210;

// Using variables
div#header {
border:$border-width solid $red;
}

//————–
//Another example

$brandColor: #500000;

a {
color:$brandColor;
}

footer {
background-color: $brandColor;
}

//————–
//Yet Another example

//Variables
//using a string variable

$images: "../img";

//Usage
body {
color: #444;
background: url("#{images}/white-sand.png");
}

See the Pen SASS Variables Example by Gomobile TAMU (@gomobile-tamu) on CodePen.
[/codepen_embed]

Nesting

Nesting classes in SASS

[codepen_embed height=”268″ theme_id=”5461″ slug_hash=”dGcBx” default_tab=”css”]
//Heading area on page
.header {
background:#ccc;

//Subheader definition
.subheading {
font-size:18px;
color:blue;
}

}

//Media query nesting
.box {
color:red;

@media (min-width:480px) {
color:blue;
}

}

Extending

Extending classes in SASS

[codepen_embed height=”268″ theme_id=”5461″ slug_hash=”smFhy” default_tab=”css”]
//Base Class
.box {
width:100px;
height:100px;
color:blue;
}

//Sub Class
.myBox {
@extend .box;
color: red;
}

Mixins

Creating a mixin in SASS

[codepen_embed height=”268″ theme_id=”5461″ slug_hash=”HDEIi” default_tab=”css”]
//Mixin
@mixin rounded7px {
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
}

article.post {
background:#ccc;
display:block;
width:150px;
height:50px;

@include rounded7px; //using the mixin
}

button {
background:#500000;
color:#fff;
border:0;
padding:10px;

@include rounded7px; //using the mixin
}

@each Function

A looping feature in SASS that demonstrates creating multiple buttons using a looping function.

[codepen_embed height=”268″ theme_id=”5461″ slug_hash=”feria” default_tab=”css”]
//variables
$primary: #500000; //maroon
$secondary: #cccccc; //gray
$alert: red;
$info: blue;

@each $type, $color in (default,$primary), (secondary, $secondary), (alert,$alert), (info, $info) {
.#{$type}-btn {
background:#{$color};
}
}

//Button
//The main button
.btn {
border: 0 none;
border-radius: 6px 6px 6px 6px;
color: #fff;
cursor: pointer;
font-size: 18px;
font-family: "Lato","Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
margin: 0 10px;
outline: 0 none;
text-decoration: none;
line-height: inherit;
padding: 14px 18px;
margin-bottom: 10px;

&:hover {
color: #fff;
}
}