Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Advanced Search Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying LESS WEB DEVELOPMENT COOKBOOK
  • Table Of Contents Toc
  • Feedback & Rating feedback
LESS WEB DEVELOPMENT COOKBOOK

LESS WEB DEVELOPMENT COOKBOOK

By : Jobsen, Meyghani
5 (1)
Buy this Book
close
close
LESS WEB DEVELOPMENT COOKBOOK

LESS WEB DEVELOPMENT COOKBOOK

5 (1)
By: Jobsen, Meyghani
Buy this Book

Overview of this book

Aimed at those who want to overcome the limitations of CSS, through this book you will begin to harness the efficiency of Less by building advanced, responsive, and modern websites. Experienced web developers, students, and even web designers will find this guide very useful as they enhance their CSS skills.
Table of Contents (13 chapters)
close
close
close
Preface
Icon
Preface
Icon
What this book covers
Icon
What you need for this book
Icon
Who this book is for
Icon
Sections
Icon
Conventions
Icon
Reader feedback
Icon
Customer support
Lock Free Chapter
1
1. Getting to Grips with the Basics of Less
chevron up
Icon
1. Getting to Grips with the Basics of Less
Icon
Introduction
Icon
Downloading, installing, and integrating less.js
Icon
Installing the lessc compiler with npm
Icon
Using less.js with Rhino
Icon
Declaring variables with Less for commonly used values
Icon
Setting the properties of CSS styles with mixins
Icon
Writing more intuitive code and making inheritance clear with nested rules
Icon
Creating complex relationships between properties
Icon
Using the built-in functions of Less
Icon
Using namespaces to make your code reusable and portable
2
2. Debugging and Documenting Your Less Code
Icon
2. Debugging and Documenting Your Less Code
Icon
Introduction
Icon
Debugging your code with less.js
Icon
Using CSS source maps to debug your code
Icon
Using Chrome Developer Tools to debug your code
Icon
Commenting your code in Less
Icon
Building style guides with tdcss.js
Icon
Building style guides with StyleDocco
3
3. Using Variables and Mixins
Icon
3. Using Variables and Mixins
Icon
Introduction
Icon
Deriving a set of variables from a single base variable
Icon
Value escaping with the ~"value" syntax
Icon
Using variable interpolation
Icon
Redeclaring variables based on lazy loading
Icon
Using mixins to set properties
Icon
Declaring a class and mixin at once
Icon
Using selectors inside mixins
Icon
Using parametric mixins
4
4. Leveraging the Less Built-in Functions
Icon
4. Leveraging the Less Built-in Functions
Icon
Introduction
Icon
Converting units with the convert() function
Icon
Using the default() function
Icon
Embedding images with data URIs
Icon
Formatting strings
Icon
Replacing a text within a string
Icon
Working with lists
Icon
Using mathematical functions
Icon
Using the color() function
Icon
Evaluating the type of a value
Icon
Creating color objects with RGB values
Icon
Getting information about a color
Icon
Creating a color variant with the darken() and lighten() functions
Icon
Creating overlays of two colors with Less
5
5. Extending and Referencing
Icon
5. Extending and Referencing
Icon
Introduction
Icon
Referencing parent selectors with the & operator
Icon
Referencing to the parent selector more than once
Icon
Changing the selecting order with the & operator
Icon
Using extend to merge selectors
Icon
Using extend inside a ruleset
Icon
Extending with the all keyword
Icon
Extending with media queries
Icon
Using extend to reduce the compiled CSS size
Icon
Using extend as an alternative for a mixin
6
6. Advanced Less Coding
Icon
6. Advanced Less Coding
Icon
Introduction
Icon
Giving your rules importance with the !important statement
Icon
Using mixins with multiple parameters
Icon
Using duplicate mixin names
Icon
Building a switch to leverage argument matching
Icon
Avoiding individual parameters to leverage the @arguments variable
Icon
Using the @rest... variable to use mixins with a variable number of arguments
Icon
Using mixins as functions
Icon
Passing rulesets to mixins
Icon
Using mixin guards (as an alternative for the if…else statements)
Icon
Building loops leveraging mixin guards
Icon
Applying guards to the CSS selectors
Icon
Creating color contrasts with Less
Icon
Changing the background color dynamically
Icon
Aggregating values under a single property
7
7. Leveraging Libraries with Prebuilt Mixins
Icon
7. Leveraging Libraries with Prebuilt Mixins
Icon
Introduction
Icon
Importing and downloading prebuilt mixin libraries
Icon
Using namespacing with prebuilt libraries
Icon
Creating background gradients
Icon
Building unlimited gradients with Less Hat
Icon
Building a layout with the CSS3 flexbox module
Icon
Getting retina ready with Preboot
Icon
Generating font-face declarations with Clearless
Icon
Improving your website's SEO with 3L mixins
Icon
Leveraging sprite images with Pre
Icon
Creating bidirectional styling without code duplication
Icon
Creating animations with animations.css
Icon
Creating animations with More.less
Icon
Building semantic grids with semantic.gs
Icon
Building an alternative for fluid grids with Frameless
Icon
Building a fluid responsive grid system
8
8. Building a Layout with Less
Icon
8. Building a Layout with Less
Icon
Introduction
Icon
Using CSS Reset with Less
Icon
Importing and organizing your Less files
Icon
Importing files with the @import directive
Icon
Building a grid with grid classes
Icon
Creating responsive grids
Icon
Building a semantic grid with mixins
Icon
Applying the flexbox grid on your design
Icon
Integrating a navigation menu in the layout
Icon
Repositioning your content
9
9. Using Bootstrap with Less
Icon
9. Using Bootstrap with Less
Icon
Introduction
Icon
Downloading and installing Bootstrap
Icon
Customizing Bootstrap with variables
Icon
Making custom buttons
Icon
Making custom panels
Icon
Making custom navigation bars
Icon
Extending components using :extend
Icon
Reusing Bootstrap's grid
Icon
Using Bootstrap classes and mixins
Icon
Extending Bootstrap with your own mixins
Icon
Making custom color schemes with 1pxdeep
Icon
Autoprefixing Bootstrap's CSS
10
10. Less and WordPress
Icon
10. Less and WordPress
Icon
Introduction
Icon
Installing WordPress
Icon
Developing your WordPress theme with Less
Icon
Integrating Bootstrap into your WordPress theme
Icon
Using Semantic UI to theme your WordPress website
Icon
Customizing Roots.io with Less
Icon
Building a WordPress website with the JBST theme
11
11. Compiling Less Real Time for Development Using Grunt
Icon
11. Compiling Less Real Time for Development Using Grunt
Icon
Introduction
Icon
Installing Node and Grunt
Icon
Installing Grunt plugins
Icon
Utilizing the Gruntfile.js file
Icon
Loading Grunt tasks
Icon
Adding a configuration definition for a plugin
Icon
Adding the Less compiler task
Icon
Creating CSS source maps with the Less compiler task
Icon
Cleaning and minimizing your code
Icon
Adding the watch task
Icon
Adding the connect and open task
Icon
Adding the concurrent task
Icon
Analyzing your code with CSS Lint
Icon
Removing unused CSS using Grunt
Icon
Compiling style guides with Grunt
Icon
Automatically prefix your code with Grunt
Icon
Installing the Grunt LiveReload plugin
12
Index
Icon
Index

Using less.js with Rhino

Less also runs inside Rhino, which is an open source implementation of JavaScript written entirely in Java. It is typically embedded into Java applications to provide scripting to end users. Rhino enables you to use the original less.js distribution in a pure JVM environment.

Getting ready

To use less.js inside Rhino, you will have to download and install Rhino from the following links:

How to do it…

  1. Open your text editor and create a file named example.less. The example.less file can contain, for instance, the following code:
    @base-color: red;
h1 {
color: @base-color;
}
  2. Now you can run the following command in your command prompt:
    java -jar js.jar -f less-rhino-1.7.0.js lessc-rhino-1.7.0.js example.less
  3. The preceding command should output the following lines of CSS code:
    h1 { 
  color: #ff0000; 
}

How it works…

Rhino enables Java to run the JavaScript code, while js.jar runs the Less compiler and generates the CSS output.

To write the output of a file, you will have to append the filename of the CSS files to the list of commands, as follows:

java -jar js.jar -f less-rhino-1.7.0.js lessc-rhino-1.7.0.js example.less example.css

You can also add options for the compiler. You can add the -x option to compress the output as follows:

java -jar js.jar -f less-rhino-1.7.0.js lessc-rhino-1.7.0.js -x example.less

The preceding command will then output the following line of CSS code:

h1{color:#f00}

There's more…

A Less compiler for Java has been built with Rhino. You can find out more information about this Less compiler for Java along with how to download it at https://github.com/marceloverdijk/lesscss-java.

Visually different images
CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
LESS WEB DEVELOPMENT COOKBOOK
End of Section 1
Next Section
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon