Luna Framework Sass Helpers

Clearfix Helper

Add a clearfix helper to any element to add a clear fix to it.

//-- for sass
.element
  +clearfix

//-- for scss
.element{
  @include clearfix;
}

Border Radius

The border radius helper will help you by short handing the class and also give you default radius that is predefined in the _settings.sass file.

//-- for sass
 .element
    +radius
 .element
    +radius(10px)

//-- for sass
 .element{
    @include radius;
 }
 .element{
    @include radius(10px);
 }

Media Breakpoints

Luna has loads of media helpers for creating breakpoints.

• +media-up($size)
• +media-down($size)
• +media-between($size1, $size2)
• +media-custom($direction, $value)

Predefined queries.

• +is--mobile
• +is--tablet
• +is--desktop

//-- for sass
 .element
    background: red
    +media-up(md)
       background: blue