Lighting Fly

SCSSMixinsLibrary

Helpers

In this module you can find various mixins which help you with often used tricks and styles. Also mixins for targeting few browsers and SCSS functions for recalculating units.

File

lightingfly/modules/_helpers.scss

Links

Specification for CSS3 colors.: w3.org
Specification for user-select.: developer.mozilla.org
Specification for CSS units.: w3.org
Text-overflow at css-tricks.: css-tricks.com
Understanding visually hidden.: http://websiteaccessibility.donaldevans.com

color

Fallback mixin for unsupported colors for text.

Mixin

@mixin color($color-fallback, $color)

Arguments

  • $color-fallback:
    [#000, rgb(0,0,0), ...]
    - fallback for unsuported color

  • $color:
    [rgba(0,0,0,0.5), ...]
    - color

Usage example

Demo 
 
Element with semi-transparent text color and fallback color for old browsers
I want to be semi-transparent
user-select
 Mixin for prefix-free using user-select property.
Mixin
@mixin user-select($select)
Arguments
  • $select: 
    [none, text, all, element]
    - user-select property
Usage example
Demo 
 
Element with non-selectable text.
I cannot be selected
font-size
 Mixin for recaltulating font-size in pixels to rem, including fallback.
Mixin
@mixin font-size($font-size, $font-size-root)
Arguments
  • $font-size: 
    [12px, ...]
    - expected font size in pixels
  • $font-size-root: 
    [16px, ...]
    - root font size
Usage example
Demo 
 
Element with font-size in rem units.
Font size defined in rem units.
text-ellipsis
 Mixin containing all styles required for working CSS text-overflow ellipsis.
Mixin
@mixin text-ellipsis();
Usage example
Demo 
 
Element with too long text.
Lorem ipsum Ad in non ea Ut consequat dolore nisi eiusmod fugiat.
visually-hidden
 Mixin containing all styles required for hidding element only visually, not for screen readers.
Mixin
@mixin visually-hidden();
Usage example
_get-em
 Function that returns value in em units calculated from pixels and font-size.
Function
_get-em($size, $font-size);
Arguments
  • $size: 
    [12px, ...]
    - expected size in pixels
  • $font-size-: 
    [16px, ...]
    - font size from which size will be calculated
Usage example
Demo 
 
Element with width and height defined in ems.
Size is defined in em's
_get-rem
 Function that returns value in rem units calculated from pixels and root's font-size.
Function
_get-rem($size, $font-size-root);
Arguments
  • $size: 
    [12px, ...]
    - expected size in pixels
  • $font-size-root: 
    [16px, ...]
    - root font size from which size will be calculated
Usage example
Demo 
 
Element with width and height defined in rems.
Size is defined in em's
apply-to-moz
 Mixin which ensure that following CSS rules would be used only in Mozilla Firefox.
Mixin
@mixin apply-to-moz{ @content };
Arguments
  • @content: 
    [text]
    - CSS rules
Usage example
Demo 
 
This element has orange background for Mozzila Firefox and blue background for other browsers.
Element
apply-to-webkit
 Mixin which ensure that following CSS rules would be used only in browsers using webkit.
Mixin
@mixin apply-to-webkit{ @content };
Arguments
  • @content: 
    [text]
    - CSS rules
Usage example
Demo 
 
This element has green background for browsers using webkit and blue background for other browsers.
Element