YouTip

Less is a CSS preprocessor that brings dynamic behavior to CSS. On the other hand, Bootstrap is a toolkit for rapid development of Web Apps and sites. In this tutorial, we will discuss the knowledge about using Bootstrap with Less CSS. This way, you can use Bootstrap's Less variables, mixins, and nesting in your CSS. [**View Less Getting Started Tutorial**](#) Bootstrap Official Website: [http://getbootstrap.com/](https://getbootstrap.com/) Less Official Website: [http://lesscss.org/](http://lesscss.org/) Download Bootstrap and extract the files. Bootstrap's Less components are located in the 'lib' directory. Since Bootstrap v1.4.0, there have been nine less files included. Let's take a look at what each of these nine files contains. ### bootstrap.less This is the main Less file. This file imports some other less files. There is no code in this file. ### forms.less This Less file contains form layouts and input field type styles. ### mixins.less This Less file makes CSS code reusable. ### patterns.less This Less file contains CSS code for repeated user interface elements, which will not be overwritten by the basic styles in the scaffolding Less file. ### reset.less This Less file contains CSS reset. This is an update to Eric Meyer's CSS reset. Some HTML elements such as dfn, samp, etc. are exempted from reset. ### scaffolding.less This Less file holds the basic styles needed to create grid systems, structured layouts, and page templates. ### tables.less This Less file contains styles for creating tables. ### type.less Typography-related styles can be found in this Less file. Styles for headings, paragraphs, lists, code, etc. are located in this file. ### variables.less This Less file contains variables for customizing Bootstrap's look and feel. To use it, include the following code in your HTML page: Note that less-1.1.5.min.js is not in the js folder, you need to download it and place it in the specified folder. * * * ## LESS Variables and Variable Values, and Usage Guide ### Links `@linkColor`#08c Default link color `@linkColorHover``darken(@linkColor, 15%)`Default hover link color ### Grayscale Colors `@black`#000 `@grayDarker`#222 `@grayDark`#333 `@gray`#555 `@grayLight`#999 `@grayLighter`#eee `@white`#fff ### Accent Colors `@blue`#049cdb `@green`#46a546 `@red`#9d261d `@yellow`#ffc40d `@orange`#f89406 `@pink`#c3325f `@purple`#7a43b6 ### Buttons `@primaryButtonBackground``@linkColor` ### Forms `@placeholderText``@grayLight` ### Navbar `@navbarHeight`40px `@navbarBackground``@grayDarker` `@navbarBackgroundHighlight``@grayDark` `@navbarText``@grayLight` `@navbarLinkColor``@grayLight` `@navbarLinkColorHover``@white` ### Form States and Notifications `@warningText`#c09853 `@warningBackground`#f3edd2 `@errorText`#b94a48 `@errorBackground`#f2dede `@successText`#468847 `@successBackground`#dff0d8 `@infoText`#3a87ad `@infoBackground`#d9edf7 * * * ## Bootstrap Mixins ### Basic Mixins Essentially, basic mixins are code snippets that include either the whole or part of code. Thesyntax is similar to a CSS class and can be called anywhere. .element { .clearfix();} ### Mixins with Parameters Mixins with parameters are very similar to basic mixins, except that the former can accept parameters (by name), and parameters can have default values. .element { .border-radius(4px);} ### Easy to Customize Basically all Bootstrap mixins are stored in mixins.less, which is an excellent utility class .less file. We can use the mixins in any .less file. Therefore, you can either use existing mixins directly or create a new custom mixin. ## Including Mixins ### Utilities | Mixin | Parameters | Usage | | --- | --- | --- | | `.clearfix()` | _None_ | Clear floats | | `.tab-focus()` | _None_ | Add Webkit-focused style and Firefox-like outline | | `.center-block()` | _None_ | Center block-level elements automatically using `margin: auto` | | `.ie7-inline-block()` | _None_ | Add proper `display: inline-block` support for IE7 | | `.size()` | `@height: 5px, @width: 5px` | Quickly set height and width | | `.square()` | `@size: 5px` | Set a square area based on `.size()` | | `.opacity()` | `@opacity: 100` | Set opacity percentage (e.g., "50" or "75") | ### Forms | Mixin | Parameters | Usage | | --- | --- | --- | | `.placeholder()` | `@color: @placeholderText` | Set the font color of `placeholder` in input fields | ### Typography | Mixin | Parameters | Usage | | --- | --- | --- | | `#font > #family > .serif()` | _None_ | Apply a series of serif fonts to an element | | `#font > #family > .sans-serif()` | _None_ | Apply a series of sans-serif fonts to an element | | `#font > #family > .monospace()` | _None_ | Apply a series of monospace fonts to an element | | `#font > .shorthand()` | `@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight` | Conveniently set font size, weight, and line height | | `#font > .serif()` | `@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight` | Set serif font family, font size, weight, and line height | | `#font > .sans-serif()` | `@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight` | Set sans-serif font family, font size, weight, and line height | | `#font > .monospace()` | `@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight` | Set monospace font family, font size, weight, and line height | ### Grid System | Mixin | Parameters | Usage | | --- | --- | --- | | `.container-fixed()` | _None_ | Create a horizontally centered container to hold content | | `#grid > .core()` | `@gridColumnWidth, @gridGutterWidth` | Using _n_ columns and _x_ pixel gutter width, generate a pixel grid system (container, rows, columns) | | `#grid > .fluid()` | `@fluidGridColumnWidth, @fluidGridGutterWidth` | Using _n_ columns and _x_ % gutter width, generate a percentage-based grid system | ### CSS3 Properties | Mixin | Parameters | Usage | | --- | --- | --- | | `.border-radius()` | `@radius: 5px` | Round element corners, can be a single value or different values for each corner | | `.box-shadow()` | `@shadow: 0 1px 3px rgba(0,0,0,.25)` | Apply shadow to an element | | `.transition()` | `@transition` | Add CSS3 transition effects (e.g., `all .2s linear`) | | `.rotate()` | `@degrees` | Rotate an element by _n_ degrees | | `.scale()` | `@ratio` | Scale an element by _n_ times its original size | | `.translate()` | `@x: 0, @y: 0` | Move x and y pixels on the plane | | `.background-clip()` | `@clip` | Clip an element's background (used with `border-radius`) | | `.background-size()` | `@size` | Change background image size via CSS3 | | `.box-sizing()` | `@boxmodel` | Change an element's box model (e.g., `border-box` on 100% width `input`) | | `.user-select()` | `@select` | Change text selection cursor on the page | | `.resizable()` | `@direction: both` | Change bottom-right corner coordinates to resize element | | `.content-columns()` | `@columnCount, @columnGap: @gridColumnGutter` | Make content within an element use CSS3 columns | ### Backgrounds and Gradients | Mixin | Parameters | Usage | | --- | --- | --- | | `#translucent > .background()` | `@color: @white, @alpha: 1` | Set an element's background color and opacity | | `#translucent > .border()` | `@color: @white, @alpha: 1` | Set an element's border color and opacity | | `#gradient > .vertical()` | `@startColor, @endColor` | Create a cross-browser vertical background gradient | | `#gradient > .horizontal()` | `@startColor, @endColor` | Create a cross-browser horizontal background gradient | | `#gradient > .directional()` | `@startColor, @endColor, @deg` | Create a cross-browser directional background gradient | | `#gradient > .vertical-three-colors()` | `@startColor, @midColor, @colorStop, @endColor` | Create a cross-browser three-color background gradient | | `#gradient > .radial()` | `@innerColor, @outerColor` | Create a cross-browser radial background gradient | | `#gradient > .striped()` | `@color, @angle` | Create a cross-browser striped background gradient | | `#gradientBar()` | `@primaryColor, @secondaryColor` | Used to specify gradient background and darkened border for buttons | ### Node.js with Makefile Run the following command to install the LESS command-line compiler and uglify-js globally using npm: $ npm install -g less uglify-js After successful installation, run make in your Bootstrap root directory to compile CSS. Additionally, if you have watchr installed, you can run make watch, which will automatically recompile Bootstrap whenever you make changes to Bootstrap. (This is not required to run; it is just for convenience.) ### Using JavaScript Simply reference the less.js file ([Download the latest Less.js]