Skip to main content
Course Template Learn LESS and SASS with CSS

Learn LESS and SASS with CSS

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.

Optimise speed and security of wordpress website

PART 1:

Why webpage speed is important (Why optimise wordpress website?)

PART 2:

Website speed test tools

PART 3:

Google page speed insights

PART 4:

Image optimization

PART 5:

Optimize home page of your wordpress website

In this tutorial we will discuss of ways to increase the speed with which the home page of your website loads in your visitors browsers.

PART 6:

Database optimization of your wordpress website

WordPress uses a scripting language called PHP and uses a database to keep everything organised. WordPress website also needs its database to be tuned every now and then to keep running faster on your visitors browsers.

In this video I will discuss how to perform a basic tune up and optimize your wordpress database.

PART 7:

G-zip site compression

In this tutorial, I will walk you through the steps of compressing your wordpress website so that it will load much faster on your visitors browser.

We will be doing it using something called Gzip compression.

PART 8:

W3 total cache plugin – installation and configuration

In this video I will cover how to do basic set-up for W3 total cache plugin and get a huge increase in page speed.

PART 9:

Removing W3 total cache plugin

As we have discussed in the previous tutorial, w3 total cache plugin is a powerful tool to speed up the load time of your website.

But if you decide to remove this plugin, it is a bit of tricky task to remove all the pieces out of your website.

PART 10:

WordPress 5 minute secure installation

There are few different ways to install wordpress on your website. My goal is always to do it the easiest way but still I must know how things work, just in case when I need to fix something, I should be able to do it myself.

If you are going through this advanced course, then I guess you already know how to install wordpress but still I would like you to see this video as I will be having a couple of notes to increase security for your wordpress website.

PART 11:

Setup SecureFTP(File Transfer Protocol) for your website using Filezilla

One way of securing your wordpress website is to use Secure File Transfer Protocol or SFTP in short, for transferring files to and from your wordpress website.

In this video I will show you how to setup SFTP for filezilla.

PART 12:

Secure wordpress configuration

In this tutorial I will help you secure your wordpress website by moving your config file wp-config.php from it’s normal location where the hackers will try to find and mess with it.

WP-config.php file contains some very important informations, so before doing anything that I am going to show you in this video, I would like you to do a backup of both your files and database.

Before starting, I have to make another important note that this trick I am going to show you does not work on multi-site wordpress installs nor on sub-domain wordpress installs. This trick is good only if you have a single-site wordpress installation.

PART 13:

Choosing a secure admin username for wordpress website

If your administrative login username is “admin” then you are making the hacker’s job easy by 50% who is trying to get into your site.

So, let me show you how to create a new secure username.

PART 14:

Website hosting in a secure way

No matter what security measures you have implemented on your wordpress website, if your website is on an infected server then your website is still going to be infected.

So, always plan for the worst and hope for the best.

If your budget permits, it will be better if you can move your website to a V.P.S.(Virtual Private Server) or even better if you can move it to a dedicated server.

But most of us are on a shared hosting account. So, if you too are on a lower budget like me and want to buy a shared hosting account then there are a couple of questions that you should ask the hosting providers before making any purchase.

  1. How often do you run malware scans on the server and not just the individual accounts but on the server.
  2. Do you provide backups? If yes, how often do you take backups and are they free? If not, how much extra are you going to charge for that?

Some more questions that you can ask are:-

  1. How many domains can I host?
  2. How many email accounts I will get?
  3. What is the bandwidth limitations?

There is a tool from google that can tell if your website is infected or not.

Please copy and paste the URL below with your domain name in place.

http://www.google.com/safebrowsing/diagnostic?site=yourdomainname.com

PART 15:

Creating secure passwords for your wordpress website

In this tutorial, I will discuss how to create unique, un-guessable passwords for your wordpress website.

In order to create a password, the golden rule is to use:

  1. few lower case characters,
  2. few upper case characters,
  3. few numbers,
  4. few special characters,
  5. and the combination should be at least 12 characters.

PART 16:

Creating secure database prefix for your wordpress website

One way of avoiding bad guys(the hackers) to hack into your website is to avoid default database prefix “wp_”.

If you have not installed wordpress for your website yet then you can choose a different prefix while doing the installation process. But if you already have wordpress installed on your website then, no problem you can change it too. And this can be done either manually by you or by using a wordpress plugin. You can search for plugins if you want but I want to keep it simple.

In this tutorial I will be showing you how to edit your database prefix manually. But before starting, let me make a quick note that, you must do a full backup of both your files and database before proceeding.

Assuming that you have already done your backup let’s get started.

PART 17:

Secure clean up of your wordpress website

If you just take care of at least the basic level security for your website then you will be in much better status than people who do not.

Because wordpress hackers are not any die-hard hackers who are looking for just to destroy your website. In reality, the hackers just go through they possibly can and whichever is less secure they just hack through it.

So, let us just do the basics right and stay safe.

PART 18:

Prevent Brute Force Attacks on your wordpress website using Limit Login Attempts plugin

 

One of the ways a hacker can break into your wordpress website is by trying to guess your administrative login username and password.

They do this by using a software program that can guess hundreds or thousands of possible username and password combinations in minutes. This is called “Brute Force Attack”.

When hackers do brute force attack, the software which they use makes thousands of guesses. So, your wordpress site is going to have much load and therefore can go down for a few moments.

So you need to do two things here:

  1. Chose a secure username and password.
  2. Do not let brute force attack happen at all.

How to do that?

Please watch the video to find out.

PART 19:

Do backup – conclusion

If you have a wordpress website then it is very important that you take backup of your files and databases on a regular basis. So that when someone hacks your website, you can just delete everything, clean it and restore your backups.

With that, I will be happy to declare the end of this advanced course series.