LESS WEB DEVELOPMENT COOKBOOK

Book Image

LESS WEB DEVELOPMENT COOKBOOK

Book Image

LESS WEB DEVELOPMENT COOKBOOK

Overview of this book

Less Web Development Cookbook

Less Web Development Cookbook

Credits

Foreword

About the Author

About the Author

About the Reviewers

About the Reviewers

www.PacktPub.com

www.PacktPub.com

Preface

Free Chapter

Getting to Grips with the Basics of Less

Getting to Grips with the Basics of Less

Downloading, installing, and integrating less.js

Installing the lessc compiler with npm

Using less.js with Rhino

Declaring variables with Less for commonly used values

Setting the properties of CSS styles with mixins

Writing more intuitive code and making inheritance clear with nested rules

Creating complex relationships between properties

Using the built-in functions of Less

Using namespaces to make your code reusable and portable

Debugging and Documenting Your Less Code

Debugging and Documenting Your Less Code

Debugging your code with less.js

Using CSS source maps to debug your code

Using Chrome Developer Tools to debug your code

Commenting your code in Less

Building style guides with tdcss.js

Building style guides with StyleDocco

Using Variables and Mixins

Using Variables and Mixins

Deriving a set of variables from a single base variable

Value escaping with the ~"value" syntax

Using variable interpolation

Redeclaring variables based on lazy loading

Using mixins to set properties

Declaring a class and mixin at once

Using selectors inside mixins

Using parametric mixins

Leveraging the Less Built-in Functions

Leveraging the Less Built-in Functions

Converting units with the convert() function

Using the default() function

Embedding images with data URIs

Formatting strings

Replacing a text within a string

Working with lists

Using mathematical functions

Using the color() function

Evaluating the type of a value

Creating color objects with RGB values

Getting information about a color

Creating a color variant with the darken() and lighten() functions

Creating overlays of two colors with Less

Extending and Referencing

Extending and Referencing

Referencing parent selectors with the & operator

Referencing to the parent selector more than once

Changing the selecting order with the & operator

Using extend to merge selectors

Using extend inside a ruleset

Extending with the all keyword

Extending with media queries

Using extend to reduce the compiled CSS size

Using extend as an alternative for a mixin

Advanced Less Coding

Advanced Less Coding

Giving your rules importance with the !important statement

Using mixins with multiple parameters

Using duplicate mixin names

Building a switch to leverage argument matching

Avoiding individual parameters to leverage the @arguments variable

Using the @rest... variable to use mixins with a variable number of arguments

Using mixins as functions

Passing rulesets to mixins

Using mixin guards (as an alternative for the if…else statements)

Building loops leveraging mixin guards

Applying guards to the CSS selectors

Creating color contrasts with Less

Changing the background color dynamically

Aggregating values under a single property

Leveraging Libraries with Prebuilt Mixins

Leveraging Libraries with Prebuilt Mixins

Importing and downloading prebuilt mixin libraries

Using namespacing with prebuilt libraries

Creating background gradients

Building unlimited gradients with Less Hat

Building a layout with the CSS3 flexbox module

Getting retina ready with Preboot

Generating font-face declarations with Clearless

Improving your website's SEO with 3L mixins

Leveraging sprite images with Pre

Creating bidirectional styling without code duplication

Creating animations with animations.css

Creating animations with More.less

Building semantic grids with semantic.gs

Building an alternative for fluid grids with Frameless

Building a fluid responsive grid system

Building a Layout with Less

Building a Layout with Less

Using CSS Reset with Less

Importing and organizing your Less files

Importing files with the @import directive

Building a grid with grid classes

Creating responsive grids

Building a semantic grid with mixins

Applying the flexbox grid on your design

Integrating a navigation menu in the layout

Repositioning your content

Using Bootstrap with Less

Using Bootstrap with Less

Downloading and installing Bootstrap

Customizing Bootstrap with variables

Making custom buttons

Making custom panels

Making custom navigation bars

Extending components using :extend

Reusing Bootstrap's grid

Using Bootstrap classes and mixins

Extending Bootstrap with your own mixins

Making custom color schemes with 1pxdeep

Autoprefixing Bootstrap's CSS

Less and WordPress

Less and WordPress

Installing WordPress

Developing your WordPress theme with Less

Integrating Bootstrap into your WordPress theme

Using Semantic UI to theme your WordPress website

Customizing Roots.io with Less

Building a WordPress website with the JBST theme

Compiling Less Real Time for Development Using Grunt

Compiling Less Real Time for Development Using Grunt

Installing Node and Grunt

Installing Grunt plugins

Utilizing the Gruntfile.js file

Loading Grunt tasks

Adding a configuration definition for a plugin

Adding the Less compiler task

Creating CSS source maps with the Less compiler task

Cleaning and minimizing your code

Adding the watch task

Adding the connect and open task

Adding the concurrent task

Analyzing your code with CSS Lint

Removing unused CSS using Grunt

Compiling style guides with Grunt

Automatically prefix your code with Grunt

Installing the Grunt LiveReload plugin

Index

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

Using namespaces to make your code reusable and portable

In programming languages, namespace is used to create a different scope for an object of a different origin. It prevents problems with such objects that have the same name. In Less, you can also create and use namespaces. They will help you to make your Less code more portable and reusable.

Getting ready

Open your text editor and create a file named project.less. If you don't use the command-line compiler, you will also have to create a valid HTML5 document, including the following lines of code in the head section:

  <link rel="stylesheet/less" type="text/css" href="project.less">
  <script src="less.js" type="text/javascript"></script>

How to do it…

Create two mixins with the same name in the project.less file. You can, for instance, use the following code to create two mixins called mixin:
```
.mixin(){
  color: red;
}
.mixin(){
  color: blue;
}
e1 {
  mixin
}
```
Now, compile the Less code you wrote in the project.less file and you will find that it will compile into the following code:
```
e1 {
color:red;
color:blue;
}
```
After compiling your code, you can use the following Less code to wrap the first mixin in a namespace called #namespace, as follows:
```
#namespace { 
  .mixin(){ 
    color: red; 
  } 
} 
.mixin(){ 
  color: blue; 
} 
```
Now the namespace mixin, can be utilized with the following Less code:
```
e1 {
  #namespace > mixin;
}
```
Finally, the Less code from the preceding step will compile into the following CSS code:
```
e1 { 
  color: red; 
}
```

How it works…

The Less compiler doesn't throw an error for mixins with the same (or conflicting) names. The compiler compiles every matching mixin into the CSS code. You can read more about matching mixins in the Building loops leveraging mixins guards recipe in Chapter 6, Advanced Less coding.

Namespaces prevent conflicting names. In Less, a namespace starts with # and the code for it should be wrapped between accolades. A typical namespace will look as follows:

#namespace { .mixin(){} }

Mixins inside a namespace can be called by adding the namespace before the mixin call, which you can see in the following code:

#namespace > mixin;

You can also use the following code; it will generate the same result as you have obtained in the preceding code:

#namespace mixin;

Note

Note that the > sign in the preceding code is optional. The > sign has the same meaning as in CSS. In CSS, the > sign means a child (must be an immediate child, not any descendant).