In this course you will learn how to use Less. Less is a tool to build more efficient and dynamic CSS. You can use Less to compile into efficient and compatible CSS for your website. This will save you time and headaches when trying to remember all the prefixes for every browser. You can also use variables in your CSS.
Take a look at the course break down below:
1. Less Introduction
In this episode we give you an introduction to Less CSS. We'll teach you a few brief things in this video including how to install Less via the Command Line, how to create and compile a LESS file, and how to install a watcher to listen for changed files.
Below you will find the links used in this episode:
https://github.com/jonycheung/deadsimple-less-watch-compiler
2. Less Nested Rules
In this video we'll teach you how to use nested rules. By leveraging nested rules your styles will be easier to manage. Being able to nest your CSS makes it more enjoyable. Take a look at the following code we used in the video above:
#container{
border:1px solid #ddd;
&.dark-border{
border:1px solid #333;
}
h1{
color:#333;
text-align:center;
}
p{
color:@blue;
}
}And this will compile to be the following CSS:
#container {
border: 1px solid #ddd;
}
#container.dark-border {
border: 1px solid #333;
}
#container h1 {
color: #333;
text-align: center;
}
#container p {
color: #0098cb;
}3. Less Variables
Using variables in your stylesheets will make coding and designing your web page so much more enjoyable. You can specify a variable for a specific color value and then change that color anytime and it will be changed across your whole file. In addition to value variables you can also create variables for an ID, class, or property. Take a look at the code below that was used in the video:
@blue:#0098cb;
@green:#98cb00;
@container-id:container;
@prop:background-color;
#@{container-id}{
border:1px solid #ddd;
&.dark-border{
border:1px solid #333;
}
h1{
color:#333;
text-align:center;
}
p{
@{prop}:@green;
}
}
span{
color:@blue;
}4. Less Mixins & Extending Selectors
In this video we'll show you how to use mixins and extend other selectors. By leveraging mixins and extending selectors you will find that you don't have to repeat yourself as often. Below is the LESS Css code that we used in the video above.
@blue:#0098cb;
@green:#98cb00;
.bordered{
border-left:1px dotted #333;
border-right:1px dotted #333;
}
#container{
h1:extend(.bordered){
color:#333;
text-align:center;
}
p:extend(.bordered){
text-align:center;
}
}
span{
color:@blue;
}And after the code above has been compiled into CSS it will look like the following:
.bordered,
#container h1,
#container p {
border-left: 1px dotted #333;
border-right: 1px dotted #333;
}
#container h1 {
color: #333;
text-align: center;
}
#container p {
text-align: center;
}
span {
color: #0098cb;
}5. Mixin Parameters
In this video we'll show you how to use mixins with parameters. Using parameters with your mixins allows you to pass values to your mixin. Take a look at the example code of using parameters in your mixin. This is the code that we used from the video above:
@blue:#0098cb;
@green:#98cb00;
.bordered(@thickness: 5px; @style: solid; @border-color: green){
border-left:@thickness @style @border-color;
border-right:@thickness @style @border-color;
}
#container{
h1{
color:#333;
text-align:center;
.bordered(20px, dotted, red);
}
p{
text-align:center;
.bordered(10px, dotted, blue);
}
}
span{
color:@blue;
}The Less code above will compile to the following CSS:
#container h1 {
color: #333;
text-align: center;
border-left: 20px dotted red;
border-right: 20px dotted red;
}
#container p {
text-align: center;
border-left: 10px dotted blue;
border-right: 10px dotted blue;
}
span {
color: #0098cb;
}6. Mixins as Functions
Mixins can be used as functions to create variables, perform operations and even create sub mixins. In this video we teach you how to do all of this. Below you will find the style.less file used in the video above:
@width:1000px;
@height:500px;
.mixin(){
@width:800px;
@height:300px;
}
.average(@x, @y){
@average: ((@x + @y) / 2);
.sum(){
@sum: @x + @y;
}
}
#container{
border:1px solid #ddd;
margin:0px auto;
.mixin();
width: @width;
height: @height;
.average(50px, 100px);
padding:@average;
.sum();
margin:@sum;
h1{
color:#333;
text-align:center;
}
p{
text-align:center;
}
}#container {
border: 1px solid #ddd;
margin: 0px auto;
width: 800px;
height: 300px;
padding: 75px;
margin: 150px;
}
#container h1 {
color: #333;
text-align: center;
}
#container p {
text-align: center;
}7. Less Import Directives
Import Directives allow us to include other less files inside another less file. You can think of this similar to a PHP include. In order to include a less file inside of one of your other files you can simply use the `@import` functionality like so:
@import "another-file.less";@import "box.less";
@width:1000px;
@height:500px;
.mixin(){
@width:800px;
@height:300px;
}
.average(@x, @y){
@average: ((@x + @y) / 2);
.sum(){
@sum: @x + @y;
}
}
#container{
border:1px solid #ddd;
margin:0px auto;
.mixin();
width: @width;
height: @height;
.average(50px, 100px);
padding:@average;
.sum();
margin:@sum;
h1{
color:#333;
text-align:center;
}
p{
text-align:center;
}
}8. Less Mixin Guards
In this video we'll show you how to use Mixin Guards to add conditionals to your selectors. Take a look at the code example below where we set the `#container` width to `1000px` if `@wide` was set to `true`
@import "box.less";
@width:1000px;
@height:500px;
@wide:true;
.mixin(){
@width:800px;
@height:300px;
}
.average(@x, @y){
@average: ((@x + @y) / 2);
.sum(){
@sum: @x + @y;
}
}
#container{
border:2px solid #333;
margin:0px auto;
.mixin();
width: @width;
height: @height;
.average(50px, 100px);
padding:@average;
h1{
color:#333;
text-align:center;
}
p{
text-align:center;
}
}
#container when (@wide = true){
width:1000px;
}9. Less Loops & Wrapping Up
In this final video we'll be showing you how to do LESS loops and wrapping up this series. Checkout the following less file below with a loop called generate-columns.
@import "box.less";
@width:1000px;
@height:500px;
@wide:true;
.mixin(){
@width:800px;
@height:300px;
}
.average(@x, @y){
@average: ((@x + @y) / 2);
.sum(){
@sum: @x + @y;
}
}
#container{
border:2px solid #333;
margin:0px auto;
.mixin();
width: @width;
height: @height;
.average(50px, 100px);
padding:@average;
h1{
color:#333;
text-align:center;
}
p{
text-align:center;
}
}
#container when (@wide = true){
width:1000px;
}
.generate-columns(@n, @looper:1) when (@looper <= @n){
.column-@{looper}{
width: (@looper * 100%) / @n;
}
.generate-columns(@n, (@looper+1));
}
.generate-columns(5);.box {
width: 400px;
height: 200px;
background: #333539;
margin: 0px auto;
}
#container {
border: 2px solid #333;
margin: 0px auto;
width: 800px;
height: 300px;
padding: 75px;
}
#container h1 {
color: #333;
text-align: center;
}
#container p {
text-align: center;
}
#container {
width: 1000px;
}
.column-1 {
width: 20%;
}
.column-2 {
width: 40%;
}
.column-3 {
width: 60%;
}
.column-4 {
width: 80%;
}
.column-5 {
width: 100%;
}Thanks again for checking out this LESS course. I hope that you will use LESS in your next project to make coding your stylesheets a lot more manageable, compatible, and cleaner. Plus... It'll make your life easier ;)
Comments (0)