Sai Mixins

Mixins extension and CSS Authoring Framework for LESS.

Download Sai Folk from GitHub

Usage

  1. Download the "sai.less" file.
  2. Place it in the same folder with your other LESS files.
  3. Reference it at the top of your LESS stylesheets with: 
    @import "sai.less";

Reference

Core

Gradient

Default Property Values 
.gradient(@color: #F5F5F5, @start: #EEEEEE, @stop: #FFFFFF);
Example 

.gradient-example {
  .gradient;
}
Example Output 
.gradient-example {
  background: #f5f5f5;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(1, #ffffff));
  background: -ms-linear-gradient(bottom, #eeeeee, #ffffff);
  background: -moz-linear-gradient(center bottom, #eeeeee 0%, #ffffff 100%);
  background: -o-linear-gradient(#ffffff, #eeeeee);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0);
}

RGBA Gradient

Default Property Values 
.rgba-gradient(@color: #F5F5F5, @start: 0, @start-alpha: 0.75, @stop: 255, @stop-alpha: 0.75);
Example 
.rgba-gradient-example {
  .rgba-gradient;
}
Example Output 
.rgba-gradient-example {
  background: #f5f5f5;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(0, 0, 0, 0.75)), color-stop(1, rgba(255, 255, 255, 0.75)));
  background: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0.75) 0%, rgba(255, 255, 255, 0.75) 100%);
  background: -moz-linear-gradient(center bottom, rgba(0, 0, 0, 0.75) 0%, rgba(255, 255, 255, 0.75) 100%);
  background: -o-linear-gradient(rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0.75));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(255, 255, 255, 0.75)', endColorstr='rgba(0, 0, 0, 0.75)', GradientType=0);
}

Background Size

Default Property Value 
.background-size(@size: cover);
Example 
.background-size-test {
  .background-size(100% 100%);
}
Example Output 
.background-size-test {
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  background-size: 100% 100%;
}

Border

Default Property Values 
.border(@style: solid, @border-width: 1px, @top-color: #EEEEEE, @right-color: #EEEEEE, @bottom-color: #EEEEEE, @left-color: #EEEEEE);
Example Usage 
.border-test {
  .border(dotted, 2, #FF0000, #00FF00, #0000FF, #FFFFFF);
}
Example Output 
.border-test {
  border-top: dotted 2 #ff0000 #00ff00 #0000ff #ffffff;
  border-left: dotted 2 #ff0000 #00ff00 #0000ff #ffffff;
  border-right: dotted 2 #ff0000 #00ff00 #0000ff #ffffff;
  border-bottom: dotted 2 #ff0000 #00ff00 #0000ff #ffffff;
}

Border Radius

.border-radius(@radius: 5px);

Box Shadow

.box-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @color: #333);

Width Calculation

.width-calc(@expression);

Height Calculation

.height-calc(@expression);

Column Count

.column-count(@quantity: 2);

Column Rule

.column-rule(@width: 1px, @style: solid, @color: #333333);

Font Face

.font-face(@name, @font-file, @format, @weight: normal, @style: normal);

Opacity

.opacity(@opa: 0.75);

Text Shadow

.text-shadow(@h-offset: 0px, @v-offset: 0px, @blur: 1px, @color: #333333);

Transform 3D

.translate3d(@x: 0, @y: 0, @z: 0);

Transition Duration

.transition-duration(@duration: 0.4s);

Typography

Links : Hover Link

.hover-link(@active: none, @hover: underline);

Links : Link Colors

.link-colors(@normal: #00c, @hover: #0cc, @active: #c0c, @visited: #ccc, @focus: #cc0)

Links : Unstyled Link

Usage 
.unstyled-link-example {
  .unstyled-link;
}
Output 
.unstyled-link-example {
  color: inherit;
  text-decoration: inherit;
  cursor: inherit;
}
.unstyled-link-example:active,
.unstyled-link-example:focus {
  outline: none;
}

Lists : No Bullet

Usage 
.no-bullet-example {
  .no-bullet;
}
Output 
.no-bullet-example {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0;
}

Lists : No Bullets

Usage 

.no-bullets-example {
    .no-bullets;
}
Output 

.no-bullets-example {
  list-style: none;
}
.no-bullets-example li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0;
}

Lists : Inline List

Usage 

.inline-list-example {
    .inline-list;
}
Output 

.inline-list-example {
  list-style-type: none;
}
.inline-list-example li {
  margin: 0px;
  padding: 0px;
  display: inline;
}

Text : Ellipsis

.ellipsis;

Text : Force Wrap

.force-wrap;

Text : Nowrap

.nowrap;

Utilities

General : Clearfix

.clearfix;

General : Float

.float(@side: left);

General : Reset Float

.reset-float(@display: block);

Contact Developer