Skip to main content

Category: CSS

Course Template Learn LESS and SASS with CSS

Learn LESS and SASS with CSS

Kiran Dash Leave a comment

PART 1:

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 :

  1. how to install the tools required for LESS ans SASS,
  2. 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.

PART 2:

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 :

  1. 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.
  2. No mathematical operations or calculations can be performed using CSS. But LESS and SASS helps us do that.
  3. 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.
  4. 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 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 .

  1. The first thing to download is SASS and LESS libraries.
  2. 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.
  3. 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.

Helpful commands:

gem -v

gem install sass

Download and install client side LESS compiler SimpLESS.

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.

Download exercise files for lecture 4 :

lec-4-learn-less-and-sass-with-css-bgwebagency

PART 5 :

Compiling LESS files with SimpLESS

In the previous tutorial of the course series “Learn LESS and SASS with CSS“, I did show you how to use the LESS javascript file to compile LESS style rules. In this tutorial, I will be showing you how to use the client side compiler SimpLESS to compile my LESS code. Note that SimpLESS is just a client side compiler and whatever I am going to show you in this tutorial is about compilation on client side. The server side compilation is different but I am not going to cover that in this course.

Download exercise files for lecture 5 :

lec-5-learn-less-and-sass-with-css-bgwebagency

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.

Download exercise files for lecture 6 :

lec-6-learn-less-and-sass-with-css-bgwebagency

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.

Download exercise files for lecture 7 :

lec-7-learn-less-and-sass-with-css-bgwebagency

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.

Download exercise files for lecture 8 :

lec-8-learn-less-and-sass-with-css-bgwebagency

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.

Download exercise files for lecture 9 :

lec-9-learn-less-and-sass-with-css-bgwebagency

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.

Download exercise files for lecture 10 :

Lec-10 Exercise Files for learn-less-and-sass-with-css-bgwebagency

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.

Download exercise files for lecture 11 :

lec-11-learn-less-and-sass-with-css-bgwebagency

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.

Download exercise files for lecture 12 :

lec-12-learn-less-and-sass-with-css-bgwebagency

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:

Color functions:

These functions can be used  to manipulate the values of colors on your stylesheet.

  1. darken(color, amount), is used to darken the color.
  2. lighten(color, amount), is used to lighten the color.
  3. fadein(color, amount), is used to control the alpha transparency of color.
  4. fadeout(color, amount), is used to control the alpha transparency of color.
  5. fade(color, amount), is used to control the alpha transparency of color.
  6. mix(color1, color2), is used to mix two colors together.
  7. 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.
  8. saturate(color, amount), is used to control the saturation level of color.
  9. desaturate(color, amount), is used to control the saturation level of color.
Color functions:

These functions are used to extract values from certain colors.

  1. saturation(color)
  2. lightness(color)
  3. hue(color)
  4. alpha(color)

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.

Math functions:
  1. round(number), rounds up the decimal number to give you an integer.
  2. ceil(number)
  3. floor(number),  ceil and floor functions gives you the next closest integer number when a decimal number is given to it.
  4. 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.

Download exercise files for lecture 13 :

lec-13-learn-less-and-sass-with-css-bgwebagency

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.

Download exercise files for lecture 14 :

lec-14-learn-less-and-sass-with-css-bgwebagency

PART 15 :

Guarded mixins

Guarded mixins are very much similar to pattern matching mixins except that they match on conditions rather than values.

Download exercise files for lecture 15 :

lec-15-learn-less-and-sass-with-css-bgwebagency

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.

  1. 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.
  2. 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 are six types of variables:

  1. numbers, e.g. $myFontSize : 15px;
  2. colors, e.g. $myColor : red;
  3. nulls, e.g. $myVar : null;
  4. booleans, $myBool : true;
  5. lists or multi-value variables, lists variables can contain more than one values, e.g. $myBorder : 1px solid black;
  6. strings, $myString : ” this is a string my friend! “

Let me take you to the demo to show you how to use them in your stylesheet.

Download exercise files for lecture 17 :

lec-17-learn-less-and-sass-with-css-bgwebagency

PART 18 :

Nested styles in SASS

We can also define nested styles in SASS. Let’s jump straight to the demo and see what is nested style.

Download exercise files for lecture 18 :

lec-18-learn-less-and-sass-with-css-bgwebagency

PART 19 :

mixins in SASS

What are mixins?

Mixins lets you define a common set of properties just once, and then use them again and again through out your stylesheet. In order to define a mixin in SAAS, you have to use the @mixin directive. And then in order to use the mixin there is another directive @include that you will have to use. So, having that in mind, let’s jump to the demo.

Download exercise files for lecture 19 :

lec-19-learn-less-and-sass-with-css-bgwebagency

PART 20 :

Operators in SASS

CSS do not provide you the feature of doing mathematical operations in your stylesheet but SASS lets you do that.

Let me show you with the help of a demo.

Download exercise files for lecture 20 :

lec-20-exercise-files-learn-less-and-sass-with-css-bgwebagency

PART 21 :

Mixins with arguments in SASS

In part 19 of this course series “Learn LESS and SASS with CSS“, we have already discussed how to use mixins. In this tutorial, I will show you how to use mixin with arguments. And to learn that please watch the demo.

Download exercise files for lecture 21 :

lec-21-exercise-files-learn-less-and-sass-with-css-bgwebagency

PART 22 :

Built-in SASS functions

The SASS 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 SASS.

The first list of functions that I would like to share is:

Color functions:

These functions can be used  to manipulate the values of colors on your stylesheet.

  1. darken(color, amount), is used to darken the color.
  2. lighten(color, amount), is used to lighten the color.
  3. fadein(color, amount), is used to control the alpha transparency of color.
  4. fadeout(color, amount), is used to control the alpha transparency of color.
  5. fade(color, amount), is used to control the alpha transparency of color.
  6. mix(color1, color2), is used to mix two colors together.
  7. saturate(color, amount), is used to control the saturation level of color.
  8. desaturate(color, amount), is used to control the saturation level of color.
Color functions:

These functions are used to extract values from certain colors.

  1. saturation(color)
  2. lightness(color)
  3. hue(color)
  4. alpha(color)
  5. grayscale(color)
  6. complement(color)
  7. invert(color)

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.

Math functions:
  1. round(number), rounds up the decimal number to give you an integer.
  2. ceil(number)
  3. floor(number),  ceil and floor functions gives you the next closest integer number when a decimal number is given to it.
  4. percentage(number), will come up with a percentage value when given an input number.
  5. abs(number)
  6. min(n1, n2, …)
  7. max(n1, n2, …)

Let’s jump to the demo now to see some of the mentioned functions in action.

Download exercise files for lecture 22 :

lec-22-exercise-files-learn-less-and-sass-with-css-bgwebagency

PART 23 :

Importing files in SASS

I believe that you already know that normal css provides you a way to import one css file in another css file. In the exact same way you can import a SASS file in another SASS file too. Well,what is the benefit of using import feature? The benefit is it lets you organize your stylesheeet in a better way, let’s say for example: by defining the common variables in a style sheet and then importing that file in other stylesheet when needed. So, let’s see how this works with the help of an example.

Download exercise files for lecture 23 :

lec-23-exercise-files-learn-less-and-sass-with-css-bgwebagency

PART 24 :

Formatting output file in SASS

SASS also provides you different options to control how the .scss file is formatted when compiled into .css file.

In order to do that you have to use the –style option in your command line. You will be seeing this how to use this in the demo. Before moving to the demo let’s first know what are the different formats available. SASS gives you four formats:

  1. nested format, this is the default format in which your .scss file will be compiled into if you do not use the –style option in your command line. This format shows your compiled file in an indented way with classes under each other.
  2. expanded format, this is the most human-friendly readable format that SASS provides by keeping each properties on separate lines in nice and clean way and the braces are fully expanded.
  3. compact format, this format makes the output condensed, but still readable.
  4. compressed format, this gives you a minimised output and is thus suitable mainly for production environments.

So, let’s move straight to the demo and see how these things works.

Download exercise files for lecture 24 :

lec-24-exercise-files-learn-less-and-sass-with-css-bgwebagency

So, this is the end of the course series “Learn LESS and SASS with CSS“. I hope you made it through all the videos and had fun learning. I would love to get your feedback.