যারা বাংলাদেশের ৩৬ তম 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-2

LESS does not mean less. Rather, it means more. That means, you can do more than, what you could do with CSS. By now, I assume you already installed LESS preprocessor into your workstation. If not, then try to read the previous tutorial first. In this tutorial, I will show you some very good features of LESS. So, get ready and sit tight.

Less

What is Possible with LESS?
The main difference between LESS and other CSS precompilers is, LESS 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. We will write LESS code through any editor or IDE and we will use the compiled CSS in our html. LESS has tons of features. I will discuss only some of them, like –

  1. Variables
  2. Comments
  3. Mixins
  4. Nested Rules
  5. Functions and Operations
  6. Namespaces
  7. Importing

1. Variables
If you are habituated with other languages, then you may know about variables. Variables are used to store values in a single place and use this variable multiple places. By changing the variable values, it is possible to make global changes throughout the script.

@red: #610000;
@light_red: @red + #333;
@dark_red: @red - #333;

@header-font: 'Cookie', cursive;
@header-font-color: #fff;

#div1 {
  background-color: @dark_red;
  width: 300px;
  height: 100px;  
  font-family:@header-font;
  font-size: 30px;
  color: @header-font-color;
}

#div2 {
  background-color: @red;
  width: 300px;
  height: 100px;
  font-family:@header-font;
  font-size: 30px;
  color: @header-font-color;
}

The variable name starts with (@). Inside variable, we can store different kinds of data like, string, numeric, color values even any URL. And all the line end with (;), it is recommended. We can do operation in a variable, addition, subtraction, multiplication, division etc. In a variable we can store multiple values, as well. After declaring any variable, we can use those any place directly. Any changes in the variable value, affects throughout the script where we use those variables.

2. Comments
There are two kinds of comment possible in LESS. One is multiline comment and other one is single line comment. Single line comments are ‘silent’, they don’t show up in the compiled CSS output.

/* Hello, I'm a 
CSS-style 
multiline comment */
.class { color: black }

// Hi, I'm a silent comment, I won't show up in your CSS
.class { color: white }

3. Mixins
Mixins allow to embed all the properties of a class into another class by simply including the class name as one of its properties. Mixins are just like variables, but for whole classes. Mixins can also act like functions, and take arguments.

.rounded-corners (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

This is possible to provide parameter inside mixins. This parameter may have default values as well. Multiple parameters are also possible to the mixins. We can use (@arguments) variable to call all the parameters at once.

.box-shadow (@x: 0; @y: 0; @blur: 1px; @color: #000) {
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
  box-shadow: @arguments;
}
.box-shadow(2px; 5px);

4. Nested Rules
Sometime, it is very tidies to create long selector names to specify inheritance. In LESS you can simply nest selectors inside other selectors. This makes inheritance clear and style sheets shorter.

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

Notice the & combinator – it’s used when you want a nested selector to be concatenated to its parent selector, instead of acting as a descendant. This is especially important for pseudo-classes like :hover and :focus.

5. Functions and Operations
Operations let you add, subtract, divide and multiply property values and colors, giving you the power to create complex relationships between properties. Operations should only be performed within parentheses in order to ensure compatibility with CSS.

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: (@base-color * 3);
  border-left: @the-border;
  border-right: (@the-border * 2);
}
#footer {
  color: (@base-color + #003300);
  border-color: desaturate(@red, 10%);
}

6. Namespaces
Sometimes, you may want to group your variables or mixins, for organizational purposes, or just to offer some encapsulation. This is also possible in LESS—say you want to bundle some mixins and variables under #bundle, for later re-use, or for distributing:

#bundle {
  .button () {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover { background-color: white }
  }
  .tab { ... }
  .citation { ... }
}

Now if you want to mixin the .button class in your #header a, you can do:

#header a {
  color: orange;
  #bundle > .button;
}

7. Importing
You can import both CSS and LESS files. But, only LESS files import statements are processed, CSS file import statements are kept as they are. If you want to import a CSS file, and don’t want LESS to process it, just use the .css extension:

@import "lib.css";
@import "style.less";

Let’s Create a Single Page Web Template with LESS

Let me introduce Mr. Gru. He is the owner of Minions. He wants a site for his minions and their work.

Gru of Drupal

So, we are planning to do a site called “Minion’s Work”, which will display about the different minions.

First create an html file named index.html. And write the following code –

<!DOCTYPE HTML>
<html>

<head>
  <title>Minion's Work</title>
  <meta name="description" content="website description" />
  <meta name="keywords" content="website keywords, website keywords" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <!-- stylesheets -->
  <link href="css/less/style.css" rel="stylesheet" type="text/css" />
  <link href="css/sooperFish.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div id="main">

    <!-- START header -->
    <header>
      <div id="logo"><h1><a href="#">MINION's</a>WORK</h1></div>
      <nav>
        <ul class="sf-menu" id="nav">
          <li class="selected"><a href="index.html">home</a></li>
          <li><a href="#">about me</a></li>
          <li><a href="#">my portfolio</a></li>
          <li><a href="#">blog</a></li>
          <li><a href="#">contact</a></li>
        </ul>
      </nav>
    </header>
    <!-- END header -->

    <!-- START content -->
    <div id="site_content">
      <img width="950" height="450" src="images/minion-home.png" alt="&quot;You can put a caption for your image right here&quot;" />
    </div>
    <!-- END content -->

    <!-- START footer -->
    <footer>
      <p><img src="images/twitter.png" alt="twitter" />&nbsp;<img src="images/facebook.png" alt="facebook" />&nbsp;<img src="images/rss.png" alt="rss" /></p>
    </footer>
    <!-- END footer -->

  </div>
</body>
</html>

This is very simple html code. Now create style.less file and write the following less code –

@setZero: 0;
@blockDisplay: block;

@colorWhite: #FFFFFF;
@colorBlack: #000000;
@colorGray: #AAAAAA;
@colorHover: #C5E105;
@colorLightGray: #BBBBBB;

@autoAlign: auto;
@noDecoration: none;
@setFont: arial, sans-serif;
@normalFontStyle: normal;

html {
  height: 100%;
}

* { 
  margin: @setZero;
  padding: @setZero;
}

footer, header, nav {
  display: @blockDisplay;
}

body { 
  font: @normalFontStyle .80em @setFont;
  background: @colorBlack;
  color: @colorLightGray;
}

p { 
  padding: @setZero @setZero 25px @setZero;
  line-height: 1.7em;}

img { 
  border: @setZero;
}

h1{
  font: @normalFontStyle 200% @setFont;
  margin: @setZero @setZero 15px @setZero;
  padding: @setZero @setZero 5px @setZero;
}

a{
  outline: @noDecoration;
  text-decoration: @noDecoration;
  color: @colorHover;

  &:hover {
    color: @colorHover;
  }
}

#main, #header, #logo, #site_content, #footer {
  margin-left: @autoAlign;
  margin-right: @autoAlign;}

#main { 
  width: 950px;
  margin: 20px @autoAlign;}

header { 
  width: 950px;
  height: 105px;
}

#logo{

  width: 250px;
  float: left;
  height: 100px;
  background: transparent;
  padding: @setZero @setZero 10px 10px;

  h1 {
    font: normal 350% @setFont;
    padding: 45px @setZero @setZero 17px;

    a:hover {
      text-decoration: @noDecoration;
    }
  }
}

#site_content {
  width: 950px;
  overflow: hidden;
  margin: 4px auto @setZero auto;
  padding: @setZero;
}

footer { 
  width: 930px;
  font: @normalFontStyle 100% @setFont;
  padding: 50px 20px 5px @setZero;
  text-align: right; 
  background: transparent;

  color: @colorGray;
  text-shadow: (@setZero+1)px (@setZero+1)px @colorBlack;

  p {
    padding: @setZero @setZero 10px @setZero;
  }
  a {
    &:hover{
      text-decoration: @noDecoration;
      color: @colorGray;
    }
  }
}


ul#nav{
  li a {
    text-shadow: 1px 1px @colorBlack;
    color: @colorWhite;
  }

  ul {
    background: #151515;
  }

  li.selected a, li a:hover, ul li a:hover, ul li a:focus, li.selected ul a:hover {
    color: @colorHover;
  }
}


h1, a:hover, #logo h1, #logo h1 a:hover,
footer a, ul#nav li.selected ul a, div.image-title {
    color: @colorWhite;
}

As we are using compiled CSS, you need to compile this LESS. If you don’t know how to compile, then please read previous tutorial.

Though the code look like CSS but this is a LESS code. We have implemented couple of rules, we discussed above. Try to recognize, which one is what?

Some selectors have very long list. Try to convert those with LESS and see how it works. Think, it is kind of homework.

minions work

Ohh.. Forget to mention. I have used one sooperFish CSS library to implement the menu. You can download the whole folder form bellow –

Conclusion
You can use your LESS knowledge in multiple web platform, like – Drupal, WordPress, Joomla and the entire high profile frameworks as well. If you want to be a LESS expert, think like LESS don’t think like CSS.

Happy Coding 🙂

LESS is More

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 *