Labels
.
Search Your Article
Total Pageviews
Friday, March 3, 2017
LESS - Installation
This article provides step-by-step procedure of LESS installation.
System Requirements for LESS
- Operating System : Cross-platform
- Browser Support: IE (Internet Explorer 8+), Firefox, Google Chrome, Safari.
LESS - Nested Rules
Description
It is a group of CSS properties which allows using properties of one class into another class and includes class name as its properties. In LESS, you can declare mixin in the same way as CSS style using class or id selector. It can store multiple values and can be reused in the code whenever necessary.LESS - Nested Directives and Bubbling
Description
You can nest the directives such as media and keyframe in the same manner, how you nest the selectors. You can place the directive on top and its relative elements will not be changed inside its rule set. This is known as bubbling process.LESS - Operations
Description
LESS provides support for some arithmetical operations such as plus (+), minus (-), multiplication (*) and division (/) and they can operate on any number, color or variable. Operations save lot of time when you are using variables and you feel like working on simple mathematics.LESS - Escaping
Description
It builds selectors dynamically and uses property or variable value as arbitrary string.Example
The below example demonstrates use of escaping in the LESS file:<html> <head> <title>Less Escaping</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body>
LESS - Functions
Description
LESS maps JavaScript code with manipulation of values and uses predefined functions to manipulate HTML elements aspects in the style sheet. It provides several functions to manipulate colors such as round function, floor function, ceil function, percentage function etc.LESS - Namespaces and Accessors
Description
It is used to group the mixins under common name. Using namespaces you can avoid conflict in name and encapsulate group of mixins from outside.LESS - Scope
Description
Variable scope specifies place of the available variable. The variables will be searched from the local scope and if they are not available, then compiler will search from the parent scope.LESS - Comments
Description
Comments makes code clear and allows users to understand easily. You can use both block style and inline comments in the code, but when you compile the LESS code, the single line comments will not appear in the CSS file.LESS - Importing
Description
It is used to import the contents of the LESS or CSS files.Example
The below example demonstrates use of importing in the LESS file:<html> <head>
LESS - Variables
LESS allows variables to be defined with an @ symbol. Variable assignment is done with a colon(:).
Below table demonstrates the use of LESS variables in detail.
Below table demonstrates the use of LESS variables in detail.
S.N. | Variables usage & Description |
---|---|
1 | Overview Repetition of same value many times is usually seen and it can be avoided by the use of variables. |
LESS - Extend
Extend is a LESS pseudo class which extend other selector styles in one selector by using :extend selector.
Example
The below example demonstrates use of extend in the LESS file:LESS - Mixins
Mixins are similar to functions in programming languages. Mixins are
group of CSS properties which allows you to use properties of one class
into another class and includes class name as its properties. In LESS,
you can declare mixin in the same way as CSS style using class or id
selector. It can store multiple values and can be reused in the code
whenever necessary.
LESS - Parametric Mixins
Description
Parametric mixins uses one or more parameters which extends functionality of LESS by taking arguments and its properties to customize the mixin output when mixed into another block.For instance, consider a simple LESS code snippet:
.border(@width; @style; @color) { border: @width @style @color;
Less - Mixins as Functions
In this chapter let's study about Mixins as Functions. Mixins
and functions work very similarly. Like functions, the mixins can be
nested, can accept parameters and return values too.
The below table demonstrates the use of mixins as functions in details.
The below table demonstrates the use of mixins as functions in details.
LESS - Passing Rulesets to Mixins
Description
Detached ruleset contains an ordinary ruleset such as properties, nested rulesets, variables declaration, mixins etc. It is stored in a variable and included into other structure where all its properties of the ruleset will get copied to that structure.Less - Import Directives
Description
The @import directive is used to import the files in the code. It spread the LESS code over different files and allows to maintain the structure of code easily. You can put @import statements anywhere in the code.For instance, you can import the file by using @import keyword as @import "file_name.less".
LESS - Import Options
In this chapter let's study about Import Options. LESS offers @import that allow style sheets to import both LESS and CSS style sheets.
The following tables lists the import directives that will be implemented in import statements.
The following tables lists the import directives that will be implemented in import statements.
LESS - Mixin Guards
Description
If you want to match simple values or number of arguments on expressions, then you can make use of guards. It is associated with mixin declaration and includes condition that is attached to a mixin. Each mixin will be having one or more guards which are separated by comma and guard must be enclosed within parentheses. LESS uses guarded mixins instead of if/else statements and perform calculations to specify matched mixin.LESS - CSS Guards
Description
Guards are used to match simple values or number of arguments on expressions. It is applied to the CSS selectors. It is syntax for declaring mixin and calling it immediately. To successfully bring out the if type statement; join this with feature &, which allows you to group multiple guards.LESS - Loops
Loops statement allows us to execute a statement or group of
statements multiple times. Various iterative/loop structures can be
created when recursive mixin combined with Guard Expressions and Pattern Matching.
Less - Merge
Description
It is a feature of LESS which allows adding values to comma or space separated list from multiple properties using a single property. It can be used for background and transform properties.The following table describes two types of features supported by the Merge.
LESS - Parent Selectors
In this chapter let's study about Parent Selectors. It is possible to reference the parent selector by using &(ampersand) operator. Parent selectors of a nested rule is represented by & operator and is used when applying a modifying class or pseudo class to an existing selector.
The following table shows the types of parent selector:
The following table shows the types of parent selector:
LESS - Misc Functions
Misc function consists of group of function of different kind.
Following table lists all the types of misc function:
Following table lists all the types of misc function:
S.N. | Functions & Description |
---|---|
1 | color It is a string which represents colors. |
2 | image - size It is used to examine the dimension of the image from the file. |
Less - String Functions
Description
Less supports some of the string functions as listed below:- escape
- e
- % format
- replace
LESS - List Functions
Description
LESS consists of list fuctions which are used to specify length of the list and position of the value in the list.Following table lists the list functions used in the LESS:
S.N. | Function & Description |
---|---|
1 | Length It will take a comma or space separated list of values as parameter. |
2 | Extract It will return the value at a specified position in a list. |
Less - Math Functions
Description
Math functions includes methods which are used for performing numeric operations such as round, square root, power value, modulus, percentage etc.Following table shows Math Functions used in LESS:
Less - Type Functions
In this chapter let's study about Type Functions. They are used to determine the type of the value.
Following table shows the Type Functions used in LESS.
Following table shows the Type Functions used in LESS.
Less - Color Defination Functions
Description
LESS provides number of useful color functions to alter and manipulate colors in different ways. LESS supports some of the Color Definition Functions as shown in the table below:Less - Color Channel Functions
Less supports few build-in functions which set value about a channel.
The channel set the value depending on the color definition. The HSL
colors have hue, saturation and lightness channel and the RGB color have
red, green and blue channel. Following are the list of color channel
function:
Less - Color Operation
Description
LESS provides number of useful operation functions to alter and manipulate colors in different ways and take parameters in the same units. LESS supports some of the Color Operation Functions as shown in the table below:Less - Color Blending Functions
In this chapter let's study about Color Blending Functions.
These are similar operations used in image editors like Photoshop,
Fireworks or GIMP, which matches your CSS colors to your images.
The following table shows the color blending functions used in LESS.
The following table shows the color blending functions used in LESS.
Less - Command Line Usage
Using the command line we can compile the .less file to .css.
Installing lessc for Use Globally
The following command is used to install lessc with npm(node package manager) to make the lessc available globally.npm install less -gYou can also add a specific version after the package name. For eg: npm install less@1.6.2 -g
Less - using-less-in-the-browser
Less is used in the browser when you want to compile the less file
dynamically when needed and not on the serverside, this is because less
is a large javascript file.
First we need to add the LESS script to use LESS in the browser:
First we need to add the LESS script to use LESS in the browser:
<script src="less.js"></script>
Less - Browser support
LESS is cross browser friendly that supports modern browsers such as
Google Chrome, Mozilla Firefox, Safari and Internet Explorer and allows
reusing CSS elements and write LESS code with the same semantics.
Less - Plugins
Plugin can be uploaded to expand the functionality of the site. Plugins are used to make your work easier.
Command Line
To install plugin using command line, you first need to install the lessc plugin. The plugin can be installed using less-plugin at the beginning. Below is command line to install the clean-css plugin:npm install less-plugin-clean-css
Less - Programmatic Usage
The main point of programmatic usage in the LESS is less.render function. This function uses below format in LESS:
less.render(input_data, options) .then(function(output) { //code here }, function(error) {
Less - Online Compilers
Online compilers are used to compile the less code into css code.
Online compilers tools easily helps to generates the css code. Following
are the available online less compilers:
Less - GUIs
In this chapter let's study about GUIs for LESS. Here you can use different LESS tools for your platform. For command line usage and tools click this link.
The below table lists the GUI compilers that supports cross platform.
The below table lists the GUI compilers that supports cross platform.
Less - Editors and Plugins
In this chapter let's study about editors and plugins. Editor
is a system or program which allows a user to edit text. Plugins are
piece of software that is used to expand the functionality of the site.
Let's us discuss editors and IDEs for LESS.
Let's us discuss editors and IDEs for LESS.
Less - Third Party Compilers
Node.js Compilers
Following are the Node.js compilers used for LESS.grunt-contrib-less
Grunt is a Node task runner. It will compile your stylesheets every time you commit changes to your LESS files.Laravel - Overview
Introduction
Laravel is a MVC framework with bundles, migrations, and Artisan CLI. Laravel offers a robust set of tools and an application architecture that incorporates many of the best features of frameworks like CodeIgniter, Yii, ASP.NET MVC, Ruby on Rails, Sinatra, and others.Laravel - Installation
For managing dependencies, Laravel uses composer. Make sure you have a Composer installed on your system before you install Laravel.
Step 1 − Visit the following URL and download composer to install it on your system.
Step 1 − Visit the following URL and download composer to install it on your system.
Laravel - Application Structure
Root Directory
The root directory of Laravel contains various folders and files as shown in the following figure.Laravel - Configuration
The config directory, as the name implies, contains all of your
application's configuration files. In this directory, you will find
various files needed to configure database, session, mail, application,
services etc.
Laravel - Routing
Basic Routing
Basic routing is meant to route your request to an appropriate controller. The routes of the application can be defined in app/Http/routes.php file. Here is the general route syntax for each of the possible request.Route::get('/', function () { return 'Hello World';
Laravel - Middleware
Define Middleware
As the name suggest, Middleware acts as a middle man between request and response. It is a type of filtering mechanism. For example, Laravel includes a middleware that verifies whether user of the application is authenticated or not. If the user is authenticated, he will be redirected to the home page otherwise, he will be redirected to the login page.Laravel - Controllers
Basic Controllers
In MVC framework, the letter ‘C’ stands for Controller. It acts as a directing traffic between Views and Models.Laravel - Request
Retrieving the Request URI
The “path” method is used to retrieve the requested URI. The “is” method is used to retrieve the requested URI which matches the particular pattern specified in the argument of the method. To get the full URL, we can use the “url” method.Laravel - Cookie
Creating Cookie
Cookie can be created by global cookie helper of Laravel. It is an instance of Symfony\Component\HttpFoundation\Cookie. The cookie can be attached to the response using the withCookie() method. Create a response instance of Illuminate\Http\Response class to call the withCookie() method. CookieLaravel - Response
Basic Response
Each request has a response. Laravel provides several different ways to return response. Response can be sent either from route or from controller. The basic response that can be sent is simple string as shown in the below sample code. This string will be automatically converted to appropriate HTTP response.Laravel - Views
Understanding Views
In MVC framework, the letter “V” stands for Views. It separates the application logic and the presentation logic. Views are stored in resources/views directory. Generally, the view contains the HTML which will be served by the application.Laravel - Redirections
Redirecting to Named Routes
Named route is used to give specific name to a route. The name can be assigned using the “as” array key.Route::get('user/profile', ['as' => 'profile', function () { // }]);Note − Here, we have given the name “profile” to a route “user/profile”.
Laravel - Working With Database
Connecting to Database
Laravel has made processing with database very easy. Laravel currently supports following 4 databases −- MySQL
- Postgres
- SQLite
- SQL Server
Laravel - Errors and Logging
Errors
A project while underway, is borne to have a few errors. Errors and exception handling is already configured for you when you start a new Laravel project. Normally, in a local environment we need to see errors for debugging purposes. We need to hide these errors from users in production environment.
Subscribe to:
Posts (Atom)