Working with LESS and SCSS in Visual Studio 2015

I am demonstration a simple example to start working with LESS and SCSS in visual studio 2015.

First Set up web compiler

scr1

scr2

Click download and install.

Create an empty solution and add a project.

scr3

scr4

Add css folder and add a main.less file. Right click on the LESS file and compile it for first time.

scr5

scr6

It creates a compilerconfig.json where we can mention what are input and output file paths.

scr7

It automatically generates a css file and minified file with same name.

scr8

We can then include it in our html page and start adding css to the LESS file.

We also have the option to recompile the file or remove it from compilation altogether.

scr9

For scss files we follow the same steps.

Going further I added another less file and imported it in our main file and it works absolutely fine. It also generates sourcemap file in the converted scss to css file inline.

You can find the source code at the following github repo. https://github.com/niteshp27/setup-less-and-scss-in-visualstudio

Advertisements

Working with LESS in ATOM

ATOM is a open source text editor. Atom helps you write code faster with a smart, flexible autocomplete.  You can visit https://atom.io/, download and install it. We are going to work with LESS in ATOM IDE.

Once installed we can begin with installing the less package. For that we need to visit File -> Settings and then the Install tab.

scr1

Type less-autocompile and search for the package. The result will be something like below, click on install to install the package.

scr2

Create a LESS file named main.less and add the below parameters on first line of the LESS file main.less preceded by a //

out (string): This is the path where the CSS file is to be created
sourcemap (bool): This creates a create sourcemap file. I will give more details about sourcemap later in the blog. It is a boolean value true or false.
compress (bool): This will provide us an auto compress CSS minified file. It is a boolean value true or false.

scr3

We usually have different modules of css represented inside separate less file. In our example we find variable.less file. In the variable.less file add the below parmeter on first line of LESS file preceded by a //

main (string): This is the path to our main LESS file to be compiled.

scr4

The same applied for responsive.less file as well.

scr5

The LESS file auto compiles the LESS file on save.

Sourcemaps:-

Source maps seek to bridge the gap between higher-level languages like CoffeeScript and Sass and the lower-level languages they compile down to (JavaScript and CSS). Source maps allow you to see the original source (the CoffeeScript or Sass) instead of the compiled JavaScript or CSS while debugging.

A comment is added to the end of the generated CSS file:
/*# sourceMappingURL=screen.css.map */
This points to an additional file that was created during compilation: screen.css.map, which – as the name implies – is what maps all of the compiled CSS back to the source Sass declarations

To enable it in chrome follow the below screen

scr6

scr7

Intro to LESS CSS – Part 2

Operations:- Operations are functions or modifiers that we can apply to our rules. We can Add, Substract, Multiply or Divide.

Note:- LESS is aware of PX hence no need to mention measurement unit.

Color Functions:- Color functions are used to make variations in color. These functions are darken, lighten, fadein, fadeout, saturate, desaturate. Fadein and fadeout need opacity to be mentioned already.

Comments:- There are two ways in which we can comment.

/*This will appear in LESS to CSS file*/

//This will not appear in CSS file.

Importing:- When we mention file name we can mention .LESS or .CSS extention for the file that we are importing

E.G:- @Import “reset”

Escaping:- Old proprietory code causes LESS to error, hence we can escape using ~”-code-”

E.G:- filter: ~”progid:DXImageTransform.Microsoft.gradient(startColorstr=#fad59f, endColorstr=#fa9907)”

Scope:- Variables will inherit first from local scope, if not available locally it will search for wider scope

Spin:- We can use spin method to spin the color wheel by degrees to change color values. Its best to set only one color variable in LESS stylesheet and use modifiers throughout rest, then whole design depends on it.

Intro to LESS CSS – Part 1

If you are a frontend developer/designer some time in future you will run into LESS, which is a CSS preprocessor. LESS offers many benefit over plain vanilla CSS. IT make you working with CSS simple and fun. User can write dynamic CSS via LESS. The learning curve for LESS is very minimal.

We can write modular CSS using LESS. LESS includes variables, mixins, nested rules, operations, color functions and many more features. It is fun once you get used to it.

Below you will find examples which make you to easily understand LESS.

Variables Declaration:- They are time savers declare once and use it where required.

MIXINS:- They are resuable piece of code. Mixins allow us to specify a chunk of code as a class and then allow us to mix those classes together. They are divided in two types, Normal Mixin and Parametric Mixin.

A Parametric Mixin is same as normal Mixin but it takes parameters/arguments with Mixin.

We also can override parameters in it.

Example of Parametric Mixin with Variable.

NESTED RULES:- LESS allows users to write new CSS rules within curly braces of existing rules.