Learning Less.js电子书

Learning Less.js

Table of Contents

Learning Less.js

Credits

About the Author

About the Reviewers

www.PacktPub.com

Support files, eBooks, discount offers, and more

Why subscribe?

Free access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer Support

Downloading the example code

Errata

Piracy

Questions

1. Introducing Less

The role of HTML and CSS

The limitations of using CSS

The benefits of using CSS preprocessors

Why not just write normal CSS?

Introducing Less as a solution

Why you should use Less

Reducing redundancy with variables

Understanding the syntax of variables

Creating reusable blocks of code

Generating values automatically

Forgetting about vendor prefixes

Creating media queries and animation the simple way

Reusing code across multiple projects

Compressing CSS automatically for faster websites

Supporting CSS4 standards within Less

Supporting future CSS standards within Less

Summary

2. Building a Less Development Toolkit

Choosing an IDE or editor

Installing Sublime Text 2

Adding Less syntax support

Compiling Less files with a standalone compiler

WinLess

SimpLESS

Koala

Installing Crunch!

Compiling from the command line

Watching for changes to Less files

Compiling Less files directly from text editors

Installing the compilation support via a package

Debugging Less in browsers

Debugging the Less code using Firefox

Debugging the Less code in Chrome

Installing WampServer

Other useful tools

Summary

3. Getting Started with Less

Creating the foundation page

Downloading and installing Less

Installing Less on the client side

Using a CDN

Installing Less on the server side

Installing Less using Node

Installing Less using Bower

Using the Bower package

The dangers of using Less on the client side

Exploring the syntax used by Less

Working with variables

Changing variables programmatically

Creating mixins

Nesting styles in Less

Calculating values using operations

Extending existing styles in Less

Compiling the code and viewing results

Using a standalone compiler

Using the command-line compiler

Compiling Less files using the command line

Watching for changes in Watch mode

Summary

4. Working with Variables, Mixins, and Functions

Discovering variables in Less

Creating Polaroid images

Loading variables and setting the scope

Exploring mixins

Creating a web form

Adding basic mixins

Hiding the original mixin

Using the !important keyword

Developing parametric mixins

Passing multiple parameters

Applying conditions to mixins

Using special keywords

Creating mixins as functions

Using external libraries

Introducing functions

Creating column-based layouts

Moving calculations to a mixin

Working with the data-uri function

Using the data-uri function – some words of caution

Summary

5. Inheritance, Overriding, and Nesting in Less

Nesting styles in Less

Creating a business card

Examining the process in detail

Inheriting and overriding styles with extend

Using extend to create information alerts

Extending using the all keyword

Namespacing in Less

Lazy loading of variables in Less

Importing style sheets into Less

Avoiding code bloat

Summary

6. Migrating Your Site to Less

Preparing for the initial jump

Creating the initial framework

Mixing Less with plain CSS

Spotting low-hanging fruit

Identifying patterns in your CSS

Using prebuilt mixin libraries

Building a library of mixins

Working through a practical example

Introducing the CSS

Identifying the changes to be made

Making the changes

Using the CSS3 mixins

Creating variables for fonts

Creating variables for colors

Switching to using nesting

Incorporating our own mixins

Importing images into style sheets – a bonus

Viewing the finished article

Summary

7. Manipulating Fonts with Less

Creating simple font mixins

Extending the mixin

Using @font-face with Less

Downloading the font files

Embedding the font into our demo

Using a prebuilt library to handle fonts

Using variables to calculate sizes

Moving with the times

Handling different weights

Working with @media in Less

Creating a basic media query

Examining the Less file

Creating special effects using Less

Taking effects further

Summary

8. Media Queries with Less

Introducing media queries

The limitations of CSS

Setting client criteria

Exploring media queries

Defining media types

Exploring media features

Using logical operators

Designing media queries

Creating a simple example

Using tools to resize the screen

Building responsive pages

Building the basic page

Adding responsive queries

Adding responsive images

Incorporating retina support for images

Using prebuilt libraries

Summary

9. 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

Showing Less style sheets to specific users

Adding Less support using a plugin

Working with Less themes in WordPress

Converting themes to use Less

Creating our own theme

Taking construction further

Using a prebuilt Less theme

Automating WordPress development

Using Grunt in WordPress development

Summary

10. Using Bootstrap with Less

Dissecting Bootstrap's Less file structure

Downloading the library

Configuring Bootstrap for your site

Using Internet Explorer 8 or below

Building a more realistic site

Compiling the Bootstrap CSS and JavaScript

Examining Bootstrap's mixins

Dissecting Bootstrap's mixins

Core variables and mixins

Reset and dependencies

Core CSS styles

Components

Utility classes

Dissecting Bootstrap's theme mixins

Utilities

Components

Skins

Layout

Customizing our download

Changing the values in our download

Developing a workflow for using Bootstrap

Summary

11. Abstracting CSS Frameworks with Less

Discovering what's wrong with using frameworks

Diagnosing the problem

Keeping HTML code clean

Fixing the code

Exploring our solution

Simplifying complex styles

Summary

12. Color Processing with Less

Introducing color management in Less

Examining color spaces and formats

Working with arithmetic operators

Working with color functions

Defining color formats

Converting colors from HEX to RGBA

Channeling colors using Less

Creating alert boxes

Operating on colors

Making text darker or lighter in color

Color blending

Comparing Less with Photoshop

Introducing palettes

Analyzing color palette examples

Choosing our colors

Using a photo as our source

Creating a color palette using Less

Ditching old habits

Working with W3C and WCAG standards

Overcoming blocks on access to a site

Introducing WCAG

Making a site useable

Summary

13. Animation with Less

Introducing animations

Creating a good animation

How a CSS animation works

Introducing animation types

Animating content

Transitioning elements

Transforming elements

Supporting animations in browsers

Simplifying the animation markup with Less

Creating animated menus

Libraries using Less

Converting from other libraries

Using vendor prefixes – a warning

Using CSS or JavaScript

Improving the animation's performance

Forcing hardware acceleration for a CSS animation

Summary

14. 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

Getting prepared

Submitting feature requests

Creating pull requests

Using GUIs with Git

Testing your submissions

Contributing to the Less documentation

Installing the documentation locally

Working to coding guidelines

Summary

A. Color Functions in Less

Defining color formats

Channeling colors using Less

Operating on colors

Color blending

Index