Book Image

LESS WEB DEVELOPMENT COOKBOOK

Book Image

LESS WEB DEVELOPMENT COOKBOOK

Overview of this book

Related Content you might be interested in

Current Title:

Small book image
LESS WEB DEVELOPMENT COOKBOOK
Jan, 2015 | 394 pages
No titles found
Table of Contents (19 chapters)
Less Web Development Cookbook
Less Web Development Cookbook
Credits
Credits
Foreword
Foreword
About the Author
About the Author
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Getting to Grips with the Basics of Less
Getting to Grips with the Basics of Less
Introduction
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
2
Debugging and Documenting Your Less Code
Debugging and Documenting Your Less Code
Introduction
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
3
Using Variables and Mixins
Using Variables and Mixins
Introduction
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
4
Leveraging the Less Built-in Functions
Leveraging the Less Built-in Functions
Introduction
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
5
Extending and Referencing
Extending and Referencing
Introduction
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
6
Advanced Less Coding
Advanced Less Coding
Introduction
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
7
Leveraging Libraries with Prebuilt Mixins
Leveraging Libraries with Prebuilt Mixins
Introduction
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
8
Building a Layout with Less
Building a Layout with Less
Introduction
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
9
Using Bootstrap with Less
Using Bootstrap with Less
Introduction
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
10
Less and WordPress
Less and WordPress
Introduction
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
11
Compiling Less Real Time for Development Using Grunt
Compiling Less Real Time for Development Using Grunt
Introduction
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
Index

Using the built-in functions of Less

Less has many built-in functions that can be leveraged for others, transforming colors, manipulating strings, or even performing mathematical operations.

Getting ready

Create a valid HTML document named index.html and an empty project.less file. Make sure your index.html HTML5 document has the following lines of code in its head section:

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

How to do it…

This recipe will show you how to use the darken() and contrast() built-in functions. Perform the following steps:

  1. Start this recipe by creating a simple HTML structure in the index.html file, shown as follows:

    <div class="item color1">Text</div>
<div class="item color2">Text</div>
<div class="item color3">Text</div>
<div class="item color4">Text</div>
<div class="item color5">Text</div>

  2. After creating the HTML page, add the following Less code to the project.less file:

    @start-color: white;
.color1 {
  background-color: @start-color; 
  color: contrast(@start-color);
}
.color2 {
  @color: darken(@start-color, 25%);
  background-color: @color; 
  color: contrast(@color);
}
.color3 {
  @color: darken(@start-color, 50%);
  background-color: @color; 
  color: contrast(@color);
}
.color4 {
  @color: darken(@start-color, 75%);
  background-color: @color; 
  color: contrast(@color);
}
.color5 {
  @color: darken(@start-color, 100%);
  background-color: @color; 
  color: contrast(@color);
}

  3. Now, open the index.html file in the browser and you will see the following output:

How it works…

Both the darken() and contrast() functions return a color. The darken() function returns a darker variant of the input color, and contrast() returns black or white, based on the highest contrast with the input color.

The darken() function ensures that a color is readable against a background, which will be useful to meet web accessibility requirements too. The contrast() function compares the luma value (also called luminosity that represents the brightness in an image) of a color and not the lightness.

There's more…

The built-in functions of Less can be grouped based on their input type. Refer to the following functions:

  • The string functions can be used to manipulate strings. The replace function, which replaces the text in a string, is an example of a string function.

  • The type functions, which include functions such as isnumber() and iscolor(), return a Boolean value. The iscolor() function returns true for values such as #ff0 or red and false for all other kinds of input types.

  • The list functions operate on values. Both comma and space-separated lists are supported. The only two functions in the group are extract() and length(). The group of mathematical functions contain functions for all kinds of mathematical operations, such as sin(), round(), and pow().

  • Finally, there are four groups of functions that can be used with colors:

    • Color definition functions

    • Color channel functions

    • Color operations functions

    • Color blending functions

You will also have to note that the example code in this recipe did not meet the DRY principle of software programming. When using guards, as described in the Building loops leveraging mixins and guards recipe in Chapter 6, Advanced Less coding, you can solve this issue of code repetition. You can rewrite the Less code to the following code, which uses a guard:

.shade(@color,@number) when (@number>0) { 
.shade(@color,@number - 1); 
@darkcolor: darken(@color,(25% * (@number - 1))); 
.color@{number} { 
  background-color: @darkcolor; 
  color: contrast(@darkcolor); 
  } 
} 
.shade(white,5);

See also

A complete list of the built-in functions supported by Less can be found at http://lesscss.org/functions/.

Previous Section
End of Section 10
Next Section