Less Web Development Cookbook电子书

Less Web Development Cookbook

Table of Contents

Less Web Development Cookbook

Credits

Foreword

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

Sections

Getting ready

How to do it…

How it works…

There's more…

See also

Conventions

Reader feedback

Customer support

Downloading the example code

Downloading the color images of this book

Errata

Piracy

Questions

1. Getting to Grips with the Basics of Less

Introduction

Downloading, installing, and integrating less.js

Getting ready

How to do it…

How it works…

There's more…

See also

Installing the lessc compiler with npm

Getting ready

How to do it…

How it works…

There's more…

See also

Using less.js with Rhino

Getting ready

How to do it…

How it works…

There's more…

Declaring variables with Less for commonly used values

Getting ready

How to do it…

How it works…

There's more…

See also

Setting the properties of CSS styles with mixins

Getting ready

How to do it…

How it works…

There's more…

Writing more intuitive code and making inheritance clear with nested rules

Getting ready

How to do it…

How it works…

There's more…

See also

Creating complex relationships between properties

Getting ready

How to do it…

How it works…

There's more…

See also

Using the built-in functions of Less

Getting ready

How to do it…

How it works…

There's more…

See also

Using namespaces to make your code reusable and portable

Getting ready

How to do it…

How it works…

2. Debugging and Documenting Your Less Code

Introduction

Debugging your code with less.js

Getting ready

How to do it…

How it works…

There's more…

See also

Using CSS source maps to debug your code

Getting ready

How to do it…

How it works…

There's more…

See also

Using Chrome Developer Tools to debug your code

Getting ready

How to do it…

How it works…

There's more…

See also

Commenting your code in Less

Getting ready

How to do it…

How it works…

There's more…

See also

Building style guides with tdcss.js

Getting ready

How to do it…

How it works…

See also

Building style guides with StyleDocco

Getting ready

How to do it…

How it works…

There's more…

See also

3. Using Variables and Mixins

Introduction

Deriving a set of variables from a single base variable

Getting ready

How to do it…

How it works…

See also

Value escaping with the ~"value" syntax

Getting ready

How to do it…

How it works…

There's more…

See also

Using variable interpolation

Getting ready

How to do it…

How it works…

There's more…

See also

Redeclaring variables based on lazy loading

Getting ready

How to do it…

How it works…

There's more…

See also

Using mixins to set properties

Getting ready

How to do it…

How it works…

There's more…

See also

Declaring a class and mixin at once

Getting ready

How to do it…

How it works…

There's more…

See also

Using selectors inside mixins

Getting ready

How to do it…

How it works…

There's more…

See also

Using parametric mixins

Getting ready

How to do it…

How it works…

There's more…

See also

4. Leveraging the Less Built-in Functions

Introduction

Converting units with the convert() function

Getting ready

How to do it…

How it works…

There's more…

See also

Using the default() function

Getting ready

How to do it…

How it works…

There's more…

See also

Embedding images with data URIs

Getting ready

How to do it

How it works…

There's more…

See also

Formatting strings

Getting ready

How to do it…

How it works…

There's more…

Replacing a text within a string

Getting ready

How to do it…

How it works…

There's more…

See also

Working with lists

Getting ready

How to do it…

How it works…

There's more…

Using mathematical functions

Getting ready

How to do it…

How it works…

There's more…

See also

Using the color() function

Getting ready

How to do it…

How it works…

There's more…

See also

Evaluating the type of a value

Getting ready

How to do it…

How it works…

There's more…

Creating color objects with RGB values

Getting ready

How to do it…

How it works…

There's more…

See also

Getting information about a color

Getting ready

How to do it…

How it works…

See also

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

Getting ready

How to do it…

How it works…

There's more…

Creating overlays of two colors with Less

Getting ready

How to do it…

How it works…

There's more…

See also

5. Extending and Referencing

Introduction

Referencing parent selectors with the & operator

Getting ready

How to do it…

How it works…

There's more…

See also

Referencing to the parent selector more than once

Getting ready

How to do it…

How it works…

There's more…

See also

Changing the selecting order with the & operator

Getting ready

How to do it…

How it works…

There's more…

See also

Using extend to merge selectors

Getting ready

How to do it…

How it works…

There's more…

Using extend inside a ruleset

Getting ready

How to do it…

There's more…

See also

Extending with the all keyword

Getting ready

How to do it…

How it works…

There's more…

See also

Extending with media queries

Getting ready

How to do it…

How it works…

There's more…

See also

Using extend to reduce the compiled CSS size

Getting ready

How to do it…

How it works…

There's more…

See also

Using extend as an alternative for a mixin

Getting ready

How to do it…

How it works…

6. Advanced Less Coding

Introduction

Giving your rules importance with the !important statement

Getting ready

How to do it…

How it works…

There's more…

See also

Using mixins with multiple parameters

Getting ready

How to do it…

How it works…

There's more…

See also

Using duplicate mixin names

Getting ready

How to do it…

How it works…

There's more…

See also

Building a switch to leverage argument matching

Getting ready

How to do it…

How it works…

There's more…

See also

Avoiding individual parameters to leverage the @arguments variable

Getting ready

How to do it…

How it works…

There's more…

See also

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

Getting ready

How to do it…

How it works…

There's more…

Using mixins as functions

Getting ready

How to do it…

How it works…

There's more…

See also

Passing rulesets to mixins

Getting ready

How to do it…

How it works…

There's more…

See also

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

Getting ready

How to do it…

How it works…

There's more…

See also

Building loops leveraging mixin guards

Getting ready

How to do it…

How it works…

There's more…

See also

Applying guards to the CSS selectors

Getting ready

How to do it…

How it works…

There's more…

Creating color contrasts with Less

Getting ready

How to do it…

How it works…

There's more…

See also

Changing the background color dynamically

Getting ready

How to do it…

How it works…

There's more…

See also

Aggregating values under a single property

Getting ready

How to do it…

How it works…

There's more…

See also

7. Leveraging Libraries with Prebuilt Mixins

Introduction

Importing and downloading prebuilt mixin libraries

Getting ready

How to do it…

How it works…

There's more…

See also

Using namespacing with prebuilt libraries

Getting ready

How to do it…

How it works…

There's more…

See also

Creating background gradients

Getting ready

How to do it…

How it works…

There's more…

See also

Building unlimited gradients with Less Hat

Getting ready

How to do it…

How it works…

There's more…

See also

Building a layout with the CSS3 flexbox module

Getting ready

How to do it…

How it works…

There's more…

See also

Getting retina ready with Preboot

Getting ready

How to do it…

How it works…

There's more…

See also

Generating font-face declarations with Clearless

Getting ready

How to do it…

How it works…

There's more…

See also

Improving your website's SEO with 3L mixins

Getting ready

How to do it…

How it works…

There's more…

See also

Leveraging sprite images with Pre

Getting ready

How to do it…

How it works…

There's more…

See also

Creating bidirectional styling without code duplication

Getting ready

How to do it…

How it works

There's more…

See also

Creating animations with animations.css

Getting ready

How to do it…

How it works...

There's more…

See also

Creating animations with More.less

Getting ready

How to do it…

How it works…

There's more…

Building semantic grids with semantic.gs

Getting ready

How to do it...

How it works...

There's more

See also

Building an alternative for fluid grids with Frameless

Getting ready

How to do it…

How it works…

See also

Building a fluid responsive grid system

Getting ready

How to do it…

How it works…

There's more…

See also

8. Building a Layout with Less

Introduction

Using CSS Reset with Less

Getting ready

How to do it...

How it works...

There's more...

Using the box-sizing property with Less

See also

Importing and organizing your Less files

Getting ready

How to do it...

How it works...

There's more...

Importing files with the @import directive

Getting ready

How to do it...

How it works...

There's more...

See also

Building a grid with grid classes

Getting ready

How to do it...

How it works...

There's more...

See also

Creating responsive grids

Getting ready

How to do it...

How it works...

There's more...

See also

Building a semantic grid with mixins

Getting ready

How to do it...

How it works...

There's more...

See also

Applying the flexbox grid on your design

Getting ready

How to do it...

How it works...

There's more...

See also

Integrating a navigation menu in the layout

Getting ready

How to do it...

How it works...

There's more...

See also

Repositioning your content

Getting ready

How to do it...

How it works...

There's more...

See also

9. Using Bootstrap with Less

Introduction

Downloading and installing Bootstrap

Getting ready

How to do it...

How it works...

There's more...

See also

Customizing Bootstrap with variables

Getting ready

How to do it...

How it works...

There's more...

See also

Making custom buttons

Getting ready

How to do it...

How it works...

There's more...

See also

Making custom panels

Getting ready

How to do it...

How it works...

There's more...

See also

Making custom navigation bars

Getting ready

How to do it...

How it works...

There's more...

See also

Extending components using :extend

Getting ready

How to do it...

How it works...

There's more...

See also

Reusing Bootstrap's grid

Getting ready

How to do it...

How it works...

There's more...

See also

Using Bootstrap classes and mixins

Getting ready

How to do it...

How it works...

There's more...

Extending Bootstrap with your own mixins

Getting ready

How to do it...

How it works...

There's more...

See also

Making custom color schemes with 1pxdeep

Getting ready

How to do it...

How it works...

There's more...

See also

Autoprefixing Bootstrap's CSS

Getting ready

How to do it...

How it works...

There's more...

See also

10. Less and WordPress

Introduction

Installing WordPress

Getting Ready

How to do it…

How it works

There's more…

See also

Developing your WordPress theme with Less

Getting ready

How to do it…

How it works…

There's more…

See also

Integrating Bootstrap into your WordPress theme

Getting ready

How to do it…

How it works…

There's more…

See also

Using Semantic UI to theme your WordPress website

Getting Ready

How to do it…

How it works…

There's more…

See also

Customizing Roots.io with Less

Getting ready

How to do it…

How it works…

There's more…

See also

Building a WordPress website with the JBST theme

Getting ready

How to do it…

How it works…

There's more…

See also

11. Compiling Less Real Time for Development Using Grunt

Introduction

Installing Node and Grunt

Getting ready

How to do it...

How it works…

There's more...

Installing Grunt plugins

Getting ready

How to do it…

How it works...

There's more...

Utilizing the Gruntfile.js file

Getting ready

How to do it…

How it works...

Loading Grunt tasks

Getting ready

How to do it…

How it works...

Adding a configuration definition for a plugin

Getting ready

How to do it…

How it works...

See also

Adding the Less compiler task

Getting ready

How to do it…

How it works...

There's more...

Creating CSS source maps with the Less compiler task

Getting ready

How to do it…

How it works...

There's more...

Cleaning and minimizing your code

Getting ready

How to do it…

There's more...

Adding the watch task

Getting ready

How to do it…

How it works...

There's more...

Adding the connect and open task

Getting ready

How to do it…

How it works…

Adding the concurrent task

Getting ready

How to do it…

How it works…

Analyzing your code with CSS Lint

Getting ready

How to do it…

How it works...

There's more...

Removing unused CSS using Grunt

Getting ready

How to do it…

How it works...

See also

Compiling style guides with Grunt

Getting ready

How to do it…

Automatically prefix your code with Grunt

Getting ready

How to do it…

How it works…

There's more...

Installing the Grunt LiveReload plugin

Getting ready

How to do it…

How it works…

Index