mixins.less contains utilities, components, skins and layout ‘functions’ of LESS.

Utilities Mixins

mixins/hide-text.less

It is used to hide the text in the dom. Why don’t we use display: none or visible: hidden? Because screen reader cannot read it. An issue on GitHub show a use case. Screen reader don’t have OCR and cannot read the text in image, we can put the image in background of an DOM, put the text inside the DOM. So screen reader can read it. To hide the text from other users, we can use the .hide-text mixin.

mixins/opacity.less

It adds IE 8 support on opacity. If we don’t need to suppport IE 8, we can use the opacify directly.

mixins/image.less

It has two mixins. The first one is for responsive image, which scale the image with ratio fixed.The second one .img-retina(@file-1x; @file-2x; @width-1x; @height-1x) is for retina image.

Why we need special handle on retina image?

From this article, the term ‘pixel’ used in images and CSS have a subtle difference. The pixel of image is the smallest physical unit in a display, but the CSS pixel is an abstract unit which is device independent. Suppose we display a 200*200 image in physical pixel. The image is small on a screen with higher dpi, because the more pixel can be shown in the same area. If the image is in CSS pixel, the image size is the same in screen with any DPI.

Retina image is image with a high resolution, if we use CSS pixel, the image will be extremely large, which may break the page’s layout. Therefore we need to limit the size by parameter @width-1x and @height-1x. If the user don’t have a retina display, we don’t need to download and display the retina version of image (@file-2x), we can display a smaller image (@file-1x) with standard resolution.

mixins/labels.less

It is used to create labels with different color, we can use this to create custom labels easily. Should it be components mixin?

mixins/reset-filter.less

It is used to remove the gradient background in IE 9 or below. Seem IE have some bugs on the gradient background, there are use cases on resetting the filter.

mixins/responsive-visibility.less

It is for the visibility of .visible-{screen size}. Bootstrap 3 use !important in display property to override the display: none;. It sets display: table !important;, display: table-row !important; and display: table-cell !important; for table, tr, th and td. For other element, display: block !important;. So when applying visible class on table element or non-block elements, we need to use .visible-{screen size}-block, .visible-{screen size}-inline and .visible-{screen size}-inline-block.

mixins/size.less

Having two mixin size and square, trivial.

mixins/tab-focus.less

Adding outline to the button when using keyboard tab to focus.

mixins/reset-text.less

This mixin applied on tooltip and popover, because this element can be place in any place, the text style may be affect by the parent.

mixins/text-emphasis.less

This mixin is a helper function to set text color and hover color. It is used in .text-{primary, success ...} class.

mixins/text-overflow.less

The file name explains itself. It configure overflow, text-overflow and white-space property

mixins/vendor-prefixes.less

The file name explain itself, but it is deprecated as there is a grunt module Autoprefixer. These depends on browsers’ implementation and will be updated from time to time, don’t spend too much time on reading it.

Components Mixins

For some components, the style on :focus and :hover are different. May research the user usability use case. Nothing special.

Skins Mixins

Mixins for background-color hover effect, border-radius and gradient background.

Layout Mixins

mixins/clearfix.less

For clearfix, we need to apply clear: both; in sibling element. But this mixin apply the style on :after, we can apply the .clearfix class on parent div, which is easier to maintain.

mixins/center-block.less

Align a block element horizontal center.

mixins/nav-vertical-align.less

Align the element inside a nav bar by calculating margin top and bottom.

mixins/grid-framework.less

It create the column class in grid system.

mixins/grid.less

Create the container, row, column push and pull class.