Less with Photoshop Mixins

photoshop.less

// Use Less.js 1.3.2 or higher to compile.
 
.round-box(@tl: 9, @tr: 9, @br: 9, @bl: 9) {
  @val: ~'@{tl}px' ~'@{tr}px' ~'@{br}px' ~'@{bl}px';
 
  -moz-border-radius:     @val;
  -webkit-border-radius:  @val;
  -o-border-radius:       @val;
  -ms-border-radius:      @val;
  -khtml-border-radius:   @val;
  border-radius:          @val;
}
 
.box-shadow(@x-off: 2, @y-off: 2, @blur: 8, @spread: 0, @col: #587634) {
  @val: ~'@{x-off}px' ~'@{y-off}px' ~'@{blur}px' ~'@{spread}px' @col;
 
  -moz-box-shadow:      @val;
  -webkit-box-shadow:   @val;
  box-shadow:           @val;
}
 
.inset-box-shadow(@x-off: 2, @y-off: 2, @blur: 8, @spread: 0, @col: #587634) {
  @val: inset ~'@{x-off}px' ~'@{y-off}px' ~'@{blur}px' ~'@{spread}px' @col;
 
  -moz-box-shadow:      @val;
  -webkit-box-shadow:   @val;
  box-shadow:           @val;
}
 
.photoshop-box-shadow(@angle: 0, @distance: 0, @spread: 0, @size: 0, @color: #000) {
  @radians:     ((180 - @angle) * 3.14159265359) / 180;
  @h-shadow:    ~`Math.round(Math.cos(@{radians}) * @{distance})`;
  @v-shadow:    ~`Math.round(Math.sin(@{radians}) * @{distance})`;
 
  @css-spread:  (@size * @spread) / 100;
  @blur:        @size - @css-spread;
 
  .box-shadow(@h-shadow, @v-shadow, @blur, @css-spread, @color);
}
 
.photoshop-inset-box-shadow(@angle: 0, @distance: 0, @spread: 0, @size: 0, @color: #000) {
  @radians:     ((180 - @angle) * 3.14159265359) / 180;
  @h-shadow:    ~`Math.round(Math.cos(@{radians}) * @{distance})`;
  @v-shadow:    ~`Math.round(Math.sin(@{radians}) * @{distance})`;
 
  @css-spread:  (@size * @spread) / 100;
  @blur:        @size - @css-spread;
 
  .inset-box-shadow(@h-shadow, @v-shadow, @blur, @css-spread, @color);
}
 
.text-shadow (@x-off: 0, @y-off: 0, @blur: 1, @col: #587634) {
  @val: ~'@{x-off}px' ~'@{y-off}px' ~'@{blur}px' @col;
 
  text-shadow:          @val;
  -webkit-text-shadow:  @val;
  -moz-text-shadow:     @val;
}
 
.photoshop-text-shadow (@angle: 0, @distance: 0, @spread: 0, @size: 0, @color: #000) {
  @radians:       ((180 - @angle) * 3.14159265359) / 180;
  @h-shadow:      ~`Math.round(Math.cos(@{radians}) * @{distance})`;
  @v-shadow:      ~`Math.round(Math.sin(@{radians}) * @{distance})`;
 
  @css-spread:    (@size * @spread) / 100;
  @blur:          @size - @css-spread;
 
  .text-shadow(@h-shadow, @v-shadow, @blur, @color);
}
 
.background-gradient(@angle: left, @color1: #fff, @stop1: 0%, @color2: #000, @stop2: 50%, @color3: #fff, @stop3: 100%) {
  background: -webkit-linear-gradient(@angle, @color1 @stop1, @color2 @stop2, @color3 @stop3);
  background: -moz-linear-gradient(@angle, @color1 @stop1, @color2 @stop2, @color3 @stop3);
  background: -ms-linear-gradient(@angle, @color1 @stop1, @color2 @stop2, @color3 @stop3);
  background: -o-linear-gradient(@angle, @color1 @stop1, @color2 @stop2, @color3 @stop3);
  background: linear-gradient(@angle, @color1 @stop1, @color2 @stop2, @color3 @stop3);
}
 
.opacity (@amount: 1.0) {
  -moz-opacity:         @amount !important;
  -webkit-opacity:      @amount !important;
  -khtml-opacity:       @amount !important;
 
  @amtfilter:           @amount * 100;
 
  filter:               alpha(opacity=@amtfilter) !important;
  opacity:              @amount !important;
}
 
.transition(@transition: all ease-in .2s) {
  -webkit-transition: @transition;
  -moz-transition:    @transition;
  transition:         @transition;
}
 
.background(@url: '', @size: cover) {
  background: url('@{url}') no-repeat center center fixed;
 
  -webkit-background-size:  @size;
  -moz-background-size:     @size;
  -o-background-size:       @size;
  background-size:          @size;
}
 
// REM support
.font-size(@input) {
  @val:  unit(@input);
  @rem:  (@val / 10);
 
  font-size:  ~"@{val}px";
  font-size:  ~"@{rem}rem";
}
 
.line-height(@input) {
  @val:  unit(@input);
  @rem:  (@val / 10);
 
  line-height:  ~"@{val}px";
  line-height:  ~"@{rem}rem";
}
 
.margin-top(@input) {
  @val:  unit(@input);
  @rem:  (@val / 10);
 
  margin-top: ~"@{val}px";
  margin-top: ~"@{rem}rem";
}
 
.margin-right(@input) {
  @val:  unit(@input);
  @rem:  (@val / 10);
 
  margin-right: ~"@{val}px";
  margin-right: ~"@{rem}rem";
}
 
.margin-bottom(@input) {
  @val:  unit(@input);
  @rem:  (@val / 10);
 
  margin-bottom: ~"@{val}px";
  margin-bottom: ~"@{rem}rem";
}
 
.margin-left(@input) {
  @val:  unit(@input);
  @rem:  (@val / 10);
 
  margin-left: ~"@{val}px";
  margin-left: ~"@{rem}rem";
}
 
.margin(@t-in, @r-in, @b-in, @l-in) {
  @t: unit(@t-in);
  @r: unit(@r-in);
  @b: unit(@b-in);
  @l: unit(@l-in);
 
  @t-rem:  (@t / 10);
  @r-rem:  (@r / 10);
  @b-rem:  (@b / 10);
  @l-rem:  (@l / 10);
 
  margin:     ~"@{t}px" ~"@{r}px" ~"@{b}px" ~"@{l}px";
  margin:     ~"@{t-rem}rem" ~"@{r-rem}rem" ~"@{b-rem}rem" ~"@{l-rem}rem";
}
 
.padding-top(@input) {
  @val:  unit(@input);
  @rem:  (@val / 10);
 
  padding-top:  ~"@{val}px";
  padding-top:  ~"@{rem}rem";
}
 
.padding-right(@input) {
  @val:  unit(@input);
  @rem:  (@val / 10);
 
  padding-right:  ~"@{val}px";
  padding-right:  ~"@{rem}rem";
}
 
.padding-bottom(@input) {
  @val:  unit(@input);
  @rem:  (@val / 10);
 
  padding-bottom:  ~"@{val}px";
  padding-bottom:  ~"@{rem}rem";
}
 
.padding-left(@input) {
  @val:  unit(@input);
  @rem:  (@val / 10);
 
  padding-left:  ~"@{val}px";
  padding-left:  ~"@{rem}rem";
}
 
.padding(@t-in, @r-in, @b-in, @l-in) {
  @t: unit(@t-in);
  @r: unit(@r-in);
  @b: unit(@b-in);
  @l: unit(@l-in);
 
  @t-rem:  (@t / 10);
  @r-rem:  (@r / 10);
  @b-rem:  (@b / 10);
  @l-rem:  (@l / 10);
 
  padding:      ~"@{t}px" ~"@{r}px" ~"@{b}px" ~"@{l}px";
  padding:      ~"@{t-rem}rem" ~"@{r-rem}rem" ~"@{b-rem}rem" ~"@{l-rem}rem";
}
 
.sprite(@x, @y, @w, @h) {
  width:      ~'@{w}px';
  height:     ~'@{h}px';
  background-image:     url('../images/template_sprite.png');
  background-repeat:    no-repeat;
  background-position:  ~'-@{x}px' ~'-@{y}px';
}