Book Image

Learning less.js

Book Image

Learning less.js

Overview of this book

Related Content you might be interested in

Current Title:

Small book image
Learning less.js
Oct, 2014 | 342 pages
No titles found
Table of Contents (22 chapters)
Learning Less.js
Learning Less.js
Credits
Credits
About the Author
About the Author
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
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
Summary
2
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
Summary
3
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
Summary
4
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
Summary
5
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
Summary
6
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
Summary
7
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
Summary
8
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
Summary
9
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
Summary
10
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
Summary
11
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
Summary
12
Color Processing with Less
Color Processing with Less
Introducing color management in Less
Examining color spaces and formats
Working with color functions
Color blending
Introducing palettes
Summary
13
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
Summary
14
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
Summary
Color Functions in Less
Color Functions in Less
Defining color formats
Channeling colors using Less
Operating on colors
Color blending
Index
Index

Channeling colors using Less

The following is a list of the functions that allow us to channel colors when using Less:

Function

Purpose of the function

Example value

hue

Extracts the hue channel of a color object in the HSL color space

hue(hsl(90, 100%, 50%))

saturation

Extracts the saturation channel of a color object in the HSL color space

saturation(hsl(90, 100%, 50%))

lightness

Extracts the lightness channel of a color object in the HSL color space

lightness(hsl(90, 100%, 50%))

hsvhue

Extracts the hue channel of a color object in the HSV color space

hsvhue(hsv(90, 100%, 50%))

hsvsaturation

Extracts the saturation channel of a color object in the HSV color space

hsvsaturation(hsv(90, 100%, 50%))

hsvvalue

Extracts the value channel of a color object in the HSV color space

hsvvalue(hsv(90, 100%, 50%))

red

Extracts the red channel of a color object

red(rgb(10, 20, 30))

green

Extracts the green channel of a color object

green(rgb(10, 20, 30))

blue

Extracts the blue channel of a color object

blue(rgb(10, 20, 30))

alpha

Extracts the alpha channel of a color object

alpha(rgba(10, 20, 30, 0.5))

luma

Calculates the luma (perceptual brightness) of a color object

luma(rgb(100, 200, 30))

luminance

Calculates the value of the luma without gamma correction

luminance(rgb(100, 200, 30))

Tip

For more information, read the documentation on the main Less site at http://lesscss.org/functions/#color-channel.

Previous Section
End of Section
Next Section