Posts

Showing posts with the label LESS Introduction

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