Learning less.js

Book Image

Learning less.js

Book Image

Learning less.js

Overview of this book

Learning Less.js

Learning Less.js

Credits

About the Author

About the Author

About the Reviewers

About the Reviewers

www.PacktPub.com

www.PacktPub.com

Preface

Free Chapter

Introducing Less

Introducing Less

The role of HTML and CSS

The limitations of using CSS

The benefits of using CSS preprocessors

Introducing Less as a solution

Why you should use Less

Supporting CSS4 standards within Less

Building a Less Development Toolkit

Building a Less Development Toolkit

Choosing an IDE or editor

Compiling Less files with a standalone compiler

Compiling from the command line

Debugging Less in browsers

Other useful tools

Getting Started with Less

Getting Started with Less

Creating the foundation page

Downloading and installing Less

Installing Less on the client side

Installing Less on the server side

The dangers of using Less on the client side

Exploring the syntax used by Less

Compiling the code and viewing results

Using the command-line compiler

Watching for changes in Watch mode

Working with Variables, Mixins, and Functions

Working with Variables, Mixins, and Functions

Discovering variables in Less

Exploring mixins

Creating a web form

Adding basic mixins

Developing parametric mixins

Creating mixins as functions

Using external libraries

Introducing functions

Inheritance, Overriding, and Nesting in Less

Inheritance, Overriding, and Nesting in Less

Nesting styles in Less

Inheriting and overriding styles with extend

Namespacing in Less

Lazy loading of variables in Less

Importing style sheets into Less

Avoiding code bloat

Migrating Your Site to Less

Migrating Your Site to Less

Preparing for the initial jump

Creating the initial framework

Spotting low-hanging fruit

Identifying patterns in your CSS

Using prebuilt mixin libraries

Building a library of mixins

Working through a practical example

Viewing the finished article

Manipulating Fonts with Less

Manipulating Fonts with Less

Creating simple font mixins

Using @font-face with Less

Using a prebuilt library to handle fonts

Using variables to calculate sizes

Handling different weights

Working with @media in Less

Creating special effects using Less

Media Queries with Less

Media Queries with Less

Introducing media queries

The limitations of CSS

Setting client criteria

Exploring media queries

Exploring media features

Designing media queries

Using tools to resize the screen

Using prebuilt libraries

Working with Less in a CMS

Working with Less in a CMS

Introducing the WP theme structure

Preparing our environment

Creating a basic child theme

Adding support for Less in WordPress

Adding Less support using a plugin

Working with Less themes in WordPress

Automating WordPress development

Using Bootstrap with Less

Using Bootstrap with Less

Dissecting Bootstrap's Less file structure

Configuring Bootstrap for your site

Building a more realistic site

Compiling the Bootstrap CSS and JavaScript

Examining Bootstrap's mixins

Dissecting Bootstrap's mixins

Dissecting Bootstrap's theme mixins

Customizing our download

Developing a workflow for using Bootstrap

Abstracting CSS Frameworks with Less

Abstracting CSS Frameworks with Less

Discovering what's wrong with using frameworks

Diagnosing the problem

Fixing the code

Simplifying complex styles

Color Processing with Less

Color Processing with Less

Introducing color management in Less

Examining color spaces and formats

Working with color functions

Introducing palettes

Animation with Less

Animation with Less

Introducing animations

Creating a good animation

How a CSS animation works

Introducing animation types

Simplifying the animation markup with Less

Creating animated menus

Libraries using Less

Using CSS or JavaScript

Improving the animation's performance

Extending and Contributing to Less

Extending and Contributing to Less

Locating the Less repositories

Finding and reporting issues in Less

Reporting bugs in the library

Contributing to the Less source

Contributing to the Less documentation

Working to coding guidelines

Color Functions in Less

Color Functions in Less

Defining color formats

Channeling colors using Less

Operating on colors

Index

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

Color blending

Our final group of functions handle the blending of colors within Less:

Function	Purpose of the function	Example value
`multiply`	Multiplies two colors.	`multiply(#9ec1ef, #091d37);`
`screen`	Does the opposite of `multiply`. The result is a brighter color.	`screen (#9ec1ef, #091d37);`
`overlay`	Combines the effects of both `multiply` and `screen`. Conditionally makes light channels lighter and dark channels darker.	`overlay (#9ec1ef, #091d37);`
`softlight`	Similar to `overlay` but avoids pure black resulting in pure black, and pure white resulting in pure white.	`softlight (#9ec1ef, #091d37);`
`hardlight`	The same as `overlay` but with the color roles reversed.	`hardlight (#9ec1ef, #091d37);`
`difference`	Subtracts the second color from the first color on a channel-by-channel basis.	`difference (#9ec1ef, #091d37);`
`exclusion`	A similar effect to `difference` but with lower contrast.	`exclusion (#9ec1ef, #091d37);`
`average`	Computes the average of two colors on a per-channel (RGB) basis.	`average (#9ec1ef, #091d37);`
`negation`	Does the opposite of `difference`.	`negation (#9ec1ef, #091d37);`

Tip

For more information, read the documentation on the main Less site at http://lesscss.org/functions/#color-blending. I've also created a CodePen that shows these effects in action—this is available at http://codepen.io/alibby251/pen/IKqEk.