Introduction to the course series “Learn LESS and SASS with CSS“
Learn LESS and SASS with CSS to take your development skills to the next level.
LESS and SASS are two amazing tools to create features that you always wished to have in CSS.
In this course series(“Learn LESS and SASS with CSS“), I will be covering :
how to install the tools required for LESS ans SASS,
how to use the tools to build CSS code using features like: variables ( variables helps you to create your style rule just once and use them again and again through out your stylesheet.), mixins ( mixins are reusable classes.), functions and mathematical operations.
Just CSS versus CSS with LESS and SASS
In this tutorial of the course series “Learn LESS and SASS with CSS“, I will be discussing the reasons to use LESS and SASS with CSS. And why using just CSS is boring.
CSS is an amazing language. No doubt about that. But it do have some disadvantages. Let me list some of them for you here :
No solutions for defining common re-usable style. Suppose you have a few common style rule sets which you want to repeat on your site. In CSS you just have to rewrite them every single time. But with LESS and SASS you can do that.
No mathematical operations or calculations can be performed using CSS. But LESS and SASS helps us do that.
We can not define variables in CSS. Variables are values that are defined just once and then can be re-used again and again through out your style sheet. Say for example you need a specific border-radius of 3 pixels for all your buttons on your website. If you use just CSS, then you have to assign 3 pixels to each and every button and in future if you want to change the border radius to 5 pixels then again you have to change it in every place. But with variables you just have to do it once.
CSS is difficult to track for larger websites. But LESS ans SASS helps you track it easier and better.
So, what is LESS and SASS?
Both SASS and LESS are CSS preprocessors, which allow writing clean CSS in a programming construct instead of static rules.
LESS and SASS provide advanced CSS features.
Ofcourse SASS and LESS are higher-level style syntaxes.
Both LESS and SASS are rendered or compiled into standard CSS before the browser renders the page. And do not worry my friends, you do not have to compile anything. You just have to write the code and there are compilers that converts LESS and SASS to normal CSS and renders them to browsers.
PART 3 :
Setting up PR Studio tools for LESS and SASS
In this tutorial of the course series “Learn LESS and SASS with CSS“, I will be taking you through the process of downloading and installing tools for LESS and SASS .
The first thing to download is SASS and LESS libraries.
For setting up SASS, You will have to additionally install Ruby but if you are a mac user then you do not have to install ruby as it comes pre-installed.
For client side compilation of LESS, I will be using SimpLESS for my windows environment. If you are a mac or windows user then you can use SimpLESS.
Download less library.
Install ruby and SASS.
PART 4 :
Your first LESS example – Getting you up and running
In this tutorial of the course series “Learn LESS and SASS with CSS“, I will be helping you build your first LESS example. I will be demonstrating you a simple example just to showcase what LESS can do. And I do not expect you to understand everything from it. The whole purpose of this video is to just get you excited, up and running with LESS by giving you an idea of the kind of things that you can do using LESS.
PART 5 :
Compiling LESS files with SimpLESS
Download exercise files for lecture 5 :
PART 6 :
Understanding variables in LESS
For me, variables are one of the amazing features for which I switched from using just plain old CSS to use LESS or SASS.
So, what are variables? Variables holds some values that we can use in several different places. Variables can hold strings, numbers, colors and what not.
In LESS a variable is declared with a prefix of @ character.
PART 7 :
Understanding mixins in LESS
Mixin is another amazing feature from LESS. A mixin lets you define common properties just once and then re-use them again and again through out your style sheet.
A mixin is defined in a very similar way how you would define any other CSS rule set. Let me jump straight to an example and show you how a mixin is created and re-used.
Please watch the video for more.
PART 8 :
Understanding nested rules in LESS
LESS allows you to write nested rules which allows you to create rules that look like the DOM structure.
Nested rules can be used to make the style rules defined between parent and child and psuedo classes even simpler.
Let me demonstrate an example to show you what I mean.
Please watch the video to continue.
PART 9 :
Understanding operators in LESS
So far in this tutorial I have been using LESS to reorganise my CSS structure. We have seen variables, mixins and nested rules so far which just lets you restructure the CSS. But now I am going to show you how to do mathematical operations with the help of LESS.
So, the happy news for you is that: using calculations and mathematical operations in your CSS file is possible through LESS.
Let’s jump into the demonstration.
PART 10 :
Parametrized mixins in LESS
In this tutorial I am going to show you how to pass arguments for mixins. In the part 7 of this series we have already looked at basic usage of mixins with no arguments. So, I would like to jump to a much advanced topic to show you how to use arguments with mixins.
A mixin with arguments is called “parametrized mixin“.
So lets jump to the demo.
PART 11 :
Parametrized mixins in LESS – Contd.
In the previous tutorial of the course series “Learn LESS and SASS with CSS“, we discussed how to pass parameters as arguments to a mixin. In this tutorial, I am going to show you how to pass multiple parameters as arguments to mixin.
PART 12 :
Parametrized mixins in LESS – Contd.
In this tutorial of the couse series “Learn LESS and SASS with CSS“, I am going to show you how to use the arguments keyword with mixin.
In addition to passing parameters that are named and then using those names through out your the mixin class, LESS also provides an easier and simpler way to do this using the arguments parameter.
You can use the argument parameters when you want to use the arguments as they are listed in order through out your mixin class.
Let me clear the concept with the demo.
PART 13 :
Built-in LESS functions
The LESS library provides a bunch of functions for working with some common situations that you are going to find yourself in when using some of the features of LESS.
The first list of functions that I would like to share is:
These functions can be used to manipulate the values of colors on your stylesheet.
darken(color, amount), is used to darken the color.
lighten(color, amount), is used to lighten the color.
fadein(color, amount), is used to control the alpha transparency of color.
fadeout(color, amount), is used to control the alpha transparency of color.
fade(color, amount), is used to control the alpha transparency of color.
mix(color1, color2), is used to mix two colors together.
spin(color, degrees), is used to spin an input color with a certain degrees on the color wheel and comes up with a new color.
saturate(color, amount), is used to control the saturation level of color.
desaturate(color, amount), is used to control the saturation level of color.
These functions are used to extract values from certain colors.
These functions, when given a color will convert the color to hsl and then give you a value based on the function that you are using.
And there are also math functions.
round(number), rounds up the decimal number to give you an integer.
floor(number), ceil and floor functions gives you the next closest integer number when a decimal number is given to it.
percentage(number), will come up with a percentage value when given an input number.
Let’s jump to the demo now to see some of the mentioned functions in action.
PART 14 :
Mixins with Pattern matching
In the earlier tutorials of the course series “Learn LESS and SASS with CSS“, we have discussed how to define mixins. In this tutorial, I am going to show you how mixins in LESS can also be defined with an advanced feature called “Pattern matching”.
Let me show you how to do pattern matching with the help of an example. Before proceeding with the tutorial, if you want the source code for this tutorial, you can download it from below mentioned link.
PART 15 :
Guarded mixins are very much similar to pattern matching mixins except that they match on conditions rather than values.
PART 16 :
Introduction to SASS
In the first 15 tutorials of this course series “Learn LESS and SASS with CSS“, I have been discussing about LESS. From this tutorial, We are going to start with SASS.
So, What is SASS?
SASS is a pre-processor, which takes code written in SASS syntax and then converts it into standard CSS before the code is uploaded to your website. Any detailed or official information can be found from the official website for SASS.
SASS comes in two different versions.
SASS with .scss extension: SCSS is a superset of CSS3 syntaxes. Which means that if you are writing your style rules in CSS3 standards then it is validated as SCSS.
Older version: with .sass extension. Which is rarely being used any more. So, if you see a project which is using .sass syntax then it is an older version and not preferred any more.
Currently the scss version is being use and that’s what I am going to discuss in my course series. But if you want to learn about the older version of SASS then please go through the official documentation on their website.
In order to learn SASS, you should be familiar with the command line. So let me take you to the demo on command line.
PART 17 :
Variables in SASS
In this tutorial of the course series “Learn LESS and SASS with CSS“, I am going to show you how to use variables in SASS. SASS variables are declared using a $ character. There …