যারা বাংলাদেশের ৩৬ তম Zend Certified Engineer এবং এই সাইট (w3programmers) এর স্বত্বাধিকারী এবং লেখক Masud Alam স্যার এর কাছে কাছে সপ্তাহে ২ দিন ক্লাস, ৬ দিন প্রাকটিস করতে চান তাদের জন্য আগামী ১ February 2018 (বৃহস্পতি এবং শুক্রবার সন্ধ্যা ৬:০০ টা রাত ৯:০০ টা) থেকে শুরু হতে যাচ্ছে ৫ মাস ব্যাপী Professional Web Design & Development With HTML, CSS, JAVASCRIPT, JQUERY, PHP & MySQL for Beginners কোর্স (এই কোর্স টি যারা ফ্রিল্যান্সিং এবং আউটসোর্সিং কাজে আগ্রহী বিশেষ ভাবে তাদের জন্য design করা হয়েছে। ), আগামী ৪ February 2018 ( রবি এবং মঙ্গলবার সন্ধ্যা ৬:০০ টা থেকে রাত ৯:০০ টা ) থেকে শুরু হতে যাচ্ছে ৪ মাস ব্যাপী Zend Certified PHP 7.1 Engineering কোর্স। যেটা Advance PHP কোর্স নামে পরিচিত । এবং ৫ February 2018 (সোম এবং বুধবার সন্ধ্যা ৬:০০ টা থেকে রাত ৯:০০ টা) থেকে শুরু হতে যাচ্ছে ৪ মাস ব্যাপী Laravel 5.5 Professional Beginning to Advance Course কোর্স ।এই কোর্স গুলোতে তিনি ছাত্রদের কে সপ্তাহে ২ দিন ৩ ঘন্টা করে ৬ ঘন্টা ক্লাস নিবেন , এবং শনি থেকে বৃহস্পতি সপ্তাহে ৬ দিন ই স্যার এর অফিসে বসে প্রাকটিস করার সুযোগ দিবেন ! এতে প্রাকটিস করা কালীন ছাত্র-ছাত্রীরা কোনো সমস্যায় পড়লে তাৎক্ষণিক স্যার এর সহযোগিতা পাবে . (উল্লেখ্য: Training গুলো স্যার তার techbeeo software company'r পাশাপাশি পরিচালনা করে থাকেন।) কোর্স গুলো সম্পর্কে বিস্তারিত জানতে পারবেন এই লিংকে : Course Details .কোর্স গুলোর প্রত্যেকটির ফী নির্ধারণ করা হয়েছে ৩০,০০০ টাকা। আগ্রহীদেরকে অতিসত্বর মাসুদ আলম স্যার এর সাথে যোগাযোগ করার জন্য অনুরোধ করা যাচ্ছে। স্যার এর মোবাইল নম্বর : ০১৭২২ ৮১ ৭৫ ৯১

Introducing LESS Part-1

LESS is an acronym of Leaner CSS, which is a dynamic style sheet language. LESS is higher-level style syntax that provides advanced CSS features. LESS is open source CSS preprocessor. It is written by JavaScript. We need to compile LESS code to make it understandable to the browser. LESS can provide variables, nesting, mixins, operators and functions. The main difference between LESS and other CSS precompilers being that, it allows real-time compilation via LESS.js by the browser. LESS can run on the client-side and server-side, or can be compiled into plain CSS.

Less

Why do we need LESS?
In our daily web development, we like to use plain CSS. We are habituated with this. But CSS has some drawbacks, like –

  1. There is no way to specify variables
  2. CSS also has no way to define and re-use common style rules
  3. There is no way to make minor adjustments by customizing style rules with different values.
  4. There is now way to do calculation on-the-fly
  5. And finally CSS syntax can get pretty unruly for non-trivial sites and styles

Who are using LESS?
CSS is usually used to develop front-end of web development and we are used to with some front-end framework. These frameworks help our project to adopt with different monitor and screen size. Among them, I have given a small list of LESS users.

  1. Twitter Bootstrap
  2. Semantic UI
  3. UI Kit

Preparing for LESS
There are two ways to use LESS.

  1. We can use LESS code by directly including LESS.js in our pages. This LESS.js will compile our LESS code to CSS. This approach is little bit slower for the browser.

    less js css

  2. Or, we can use a compiler to compile our LESS code to CSS code. As we are compiling our LESS code in our workstation and we only include the compiled CSS to our pages, this approach is faster to load in the web browser.

    Less compiler css

We will follow second approach, in this tutorial.

What will we need?
To write LESS code, we will need a good editor. There are number of editor/IDE exists at present for web developers. You can use any one of it.

  1. Crunch: It is a very good LESS editor and compiler. Crunch is also available for Mac and Windows. It is not an IDE, so you may find some problem editing HTML, JavaScript or PHP. It is free to use.

    crunch editor and compiler

  2. Aptana Studio: This is an open source free IDE. You can write smoothly any kind of file including LESS for your web development. As Aptana Studio is an IDE, you cannot compile LESS files. So, you need to find a compiler, which will compiler your LESS files. This is also available for Mac, Windows and Linux.

    Aptana studio 3

  3. Phpstorm: Phpstorm is one of the best IDE for web development. You can write and compile your LESS files with this great IDE. It is also available for Mac, Windows and Linux. The problem is, Phpstorm is not free.

    Phpstorm

  4. NetBeans: It is also a good IDE for web developers. It is free and open source. NetBeans is good for writing LESS files as well. It is available for Mac, Windows and Linux.

    Netbeans

If you are interested to use anyone IDE from the above, then you may need one compiler to compile your LESS files.

  1. SimpLESS: SimpLESS is a minimalistic LESS compiler. It needs just drag, drop and compile. One of the unique features of SimpLESS is that it supports ‘prefixing’ your CSS. SimpLESS is available for Mac and Windows version.

    Simpless

  2. Mixture: It is a rapid prototyping and static site generation tool for designers and developers. Mixture brings together a collection of awesome tools and best practices.

    Mixture

  3. Koala: Koala is a cross-platform GUI application for compiling less, sass and coffeescript.

    Koala

Ohh.. Almost forgot to mention, if you are interested to compile LESS file from command line, then you need to install it first, by

npm install -g less

Then, whenever you want to compile your less code, use the following command –

lessc styles.less styles.css

For the beginner, you can use Crunch for simplicity. And, after some days you can switch into any IDE to get more features. So, hope you are ready to write some LESS code.

Let’s Write Some LESS Code
I already mentioned that we are going to use less in client side. For this purpose, we will first create our LESS file, then compile it to CSS file. And lastly, we will include this CSS file to our HTML file as usual. So, create an html file called index.html with your editor.

<!DOCTYPE html>
<html>
<head>
    <title>LESS Tutorial</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div>
        <header>
            <h1>LESS Examples</h1>
        </header>

        <div>
            <p>This is some content of the page</p>
        </div>
    </div>
</body>
</html>

At this moment we don’t have any style.css file. This is OK. We will create it very soon.

All LESS file ends with (.less) extension. Now, create one new file called style.less. And Write –

@baseColor: rgb(50, 100, 175);

header{
  font-family: Helvetica, Arial, sans-serif;
  background-color: lighten(@baseColor, 50%);
  border: 1px solid darken(@baseColor, 10%);
  color: @baseColor;
}

Code Explanation

In line 1, we have created variable called baseColor using rgb values. All the variables name start with (@) sign.

From line 3 – 8, we have created some CSS style. But inside the style we have used our variable and some JavaScript functions.

Confused!!! We are using variables and function inside CSS. This is called LESS.

Now, open your less code with Crunch. And click Crunch File. Immediately, it will create style.css file. Save it to the same folder of style.less.

Crunch css

Now, open the index.html file with any of your web browser. Happy now!!!

Conclusion
This is just the beginning of LESS. In next tutorial, I will show you some more powerful feature of LESS, which make LESS incredible.

Happy Coding 🙂

Introducing LESS

Hej, I’m from Bangladesh. Learning programming is one of the freaking decisions I have taken in my life. Because, it makes me and my life crazy. I have great weakness on open source technologies. Perhaps, that’s why I do not know any closed source language. I fall in love with programming, when I started my undergraduate in East West University. Till now, I can not live without it.

Leave a Reply

Your email address will not be published. Required fields are marked *