Installing and using LESS.(PART- 1)

Here we are about to understand the installation of the LESS. This lesson also includes details about the different features of LESS. All the details are divided into # different parts.

Now, In a moment we are about to start with Part-1

Installation 

Including LESS in something that you’re building is about as easy as it gets:
Go get yourself a copy of less.js;
Create a file to put your styles in, such as style. less;
Add the following code to your HTML <head>;


<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>


Note the rel attribute of the link. You are required to append the /less to the end of the value for LESS to work. You are also required to include the script immediately after the link to the style sheet. If you’re using HTML5 syntax, remember to add type="text/ and the type="text/javascript".


There’s also a server-side version of LESS. The easiest way to install LESS on the server is with Node Package Manager (NPM).

Variables

A screenshot illustrating the transition from 3 shades of blue

The transition from light_blue to blue to dark_blue

Variable, they are best friends. If you’ll be using information repeatedly (in this case, a color), setting it to a variable makes sense. This way, you guarantee consistency and probably less scrolling about looking for a hex value to copy and paste. You can even do some fun adding and subtracting of hex values you want to render. Take this example

@blue: #00c;
@light_blue: @blue + #333;
@dark_blue: @blue - #333;

If we apply these styles to three divs, we can see the gradated effect created by adding and subtracting the hex values to and from the original blue:

The only difference in variables between LESS and Sass is that, while LESS uses @, Sass uses $. There are some scope differences as well, which I’ll get to shortly.

Mixins

On occasion, we might create a style that’s intended to be used repeatedly throughout the style sheet. Nothing is stopping you from applying multiple classes to the elements in the HTML, but you could also do this without ever leaving your style sheet, using LESS. To illustrate this, I have pasted some sample code that one might use to style two elements on the page.

.border {
border-top: 1px dotted #333;
}

article.post {
background: #eee;
.border;
}

ul.menu {
background: #ccc;
.border;
}

A screenshot illustrating two elements that share a border style
Both the article and the unordered list share the border style.
This will give you something similar to what you would get if you had gone back to the HTML file and added the .bordered class to the two elements there — except you’ve done it without leaving the style sheet. And it works just as well:

With Sass, you declare @mixin before the style to identify it as a mixin. Later, you declare @include to call it.

@mixin border {
border-top: 1px dotted #333;
}

article.post {
background: #eee;
@include border;
}

ul.menu {
background: #ccc;
@include border;
}

If you want to go further links to the other two parts are
Installing and using LESS. (PART- 2)
Installing and using LESS. (PART- 3)

Other links related to LESS are here
Introduction
Difference between LESS and CSS

If you like this please share and like the blog and subscribe to the blog also.

Comments

Post a Comment

Popular posts from this blog

Understanding of Power Query

Power Query is a data transformation and cleaning tool developed by Microsoft, which is available as an add-in for Microsoft Excel and as part of the Microsoft Power BI suite. Power Query allows users to import, transform, and cleanse data from various sources in order to create clean, organized data tables that can be used for analysis and reporting. With Power Query, users can connect to a wide range of data sources, including databases, spreadsheets, text files, and web pages. Once connected, Power Query provides a range of tools for transforming the data, such as filtering, sorting, grouping, pivoting, and merging. Users can also create custom calculations and transformations using the M language, which is the scripting language used by Power Query. Power Query has a user-friendly interface that allows users to easily navigate through the various data transformation steps. It also provides a preview of the transformed data, allowing users to see the changes in real-time. Power Quer
Read more

Power Apps Choice Column Default Value with connector as Sharepoint

 To change the default choice-value in a Power Apps canvas app, you can follow these steps: Select the control that contains the choice field in which you want to change the default value. In the right-hand pane, under the "Data" tab, locate the "Default" property. Click on the "Default" property to open the formula bar. To change the default value of a choice field, you will need to provide the formula that specifies the value. For example, if you have a choice field with the options "Red," "Green," and "Blue," and you want to set the default value to "Green," you can enter the following formula:                     "Green" Alternatively, you can use the "First" or "Last" functions to set the default value to the first or last option in the list. For example:                     First([@Choices].Value)                     Last([@Choices].Value) Once you have entered the formula for the
Read more

Initializing list and collection in c#.net

Sure, here's a brief overview of initializing a list and collection in C#: Initializing a List: A list is a collection that can be modified. Here's how you can initialize a list in C#: List<string> names = new List<string>(); // create an empty list names.Add("John"); // add items to the list names.Add("Mary"); Initializing a Collection: A collection is a grouping of objects of the same type. Here's how you can initialize a collection in C#: Collection<string> names = new Collection<string>(); // create an empty collection names.Add("John"); // add items to the collection names.Add("Mary"); Note that both lists and collections can be of different types, depending on what you need them for.  Also, there are other ways to initialize lists and collections in C#, but these are the most basic methods.
Read more