Posts

Showing posts from September, 2016

Installing and using LESS.(PART- 3)

Hello readers, I am back here witht the lasst part of installation of the LESS. This lesson also includes the details about the different features of LESS. Now, In a moment we are about to start with part-3 Escaping Want to include the non valid css sytax or text that LESS doesn't recognize. LESS has a solution for that also.It may be some crazy Microsft Hack or may be some easter egg you want to place.You can use escaping To avoid throwing errors and breaking LESS. .class { filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=20)"; } /* Will actually be outputted like this: */ .class { filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20); } Importing Importing is pretty standard, too. The standard @import: 'classes.less' ; works just fine. If, however, you’re importing another LESS file, then the file extension is optional, so @import 'classes' ; would work as well. If you wa...
Post a Comment
Read more

Installing and using LESS.(PART- 2)

Here we are about to understand the installation of the LESS. This lesson also includes the details about the different features of LESS. These all the details are divided into 3 different parts. Now, In a moment we are about to start with part-2 Operations This is about what you would expect: using fixed numbers or variables to perform mathematical operations in your styles. @base_margin: 10px; @double_margin: @base_margin * 2; @full_page: 960px; @half_page: @full_page / 2; @quarter_page: (@full_page / 2) / 2; For the record, I am aware that I could have also divided by four to get the @quarter_page variable, but I wanted to illustrate that the parentheses rule from the “order of operations” also applies. Parentheses are also required if you’re going to perform operations within compound properties; for example, border: (@width / 2) solid #000. Sass is a lot more versatile with numbers than...
Post a Comment
Read more

Installing and using LESS.(PART- 1)

Image
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 ". Ther...
Post a Comment
Read more

Introduction to LESS.

Introduction To LESS I am using CSS from more then 5 years. When i started using LESS,it was a better way to write the CSS in the form of Code including variable, functions, and other programming contracts.The color palette providing a fixed boundary which helps me to prevent going crazy with colors and deviating my specified styling.  Some Features of Less are as Follows. 1. Mixins – Classes for classes. 2. Parametric mixins – Classes to which you can pass parameters, like functions. 3. Nested Rules – Classes within classes, which cut down on repetitive code. 4. Operations – Math within CSS. 5. Color functions – Edit your colors. 6. Namespaces – Groups of styles that can be called by references. 7. Scope – Make local changes to styles. 8. J avaScript evaluation – JavaScript expressions evaluated in CSS. If you want to read about LESS more  here(wikipedia)  or  here(lesscss.org) Other Blogs by ...
Post a Comment
Read more

Difference between Less and CSS ?

Many of you may be familiar with the concepts of CSS. In CSS we can not write loops ,logic or many other programming constructs such if-else etc.Thus we can say css is a static language. On the other hand LESS or (SCSS) are CSS pre-processors. You can think of it as CSS with programming constructs, which help you in making your code modular and reusable. One possible use case is you can develop a theme system with LESS, its very easy by using variables for colors etc and changing the variable values to create a new theme for your webpage. Take a look at this example taken from Getting started | Less.js. @base: #f938ab; .box-shadow(@style, @c) when (iscolor(@c)) { -webkit-box-shadow: @style @c; box-shadow: @style @c; } .box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) { .box-shadow(@style, rgba(0, 0, 0, @alpha)); } .box { color: saturate(@base, 5%); border-color: lighten(@base, 30%); div { .box-shadow(0 0 5px, 30%) } } Compiles to .box { color...
Post a Comment
Location: Frankfurt, Germany
Read more