hileon

Sass/Less Comparison

In this document I am using Sass's SCSS syntax. You can choose to use the indented syntax in sass, if you prefer it, it has no functional differences from the SCSS syntax.

For Less, I'm using the JavaScript version because this is what they suggest on the website. The ruby version may be different.

Variables

hileon

Markdown: Syntax
================

*   [Overview](#overview)
    *   [Philosophy](#philosophy)
    *   [Inline HTML](#html)
    *   [Automatic Escaping for Special Characters](#autoescape)
*   [Block Elements](#block)
    *   [Paragraphs and Line Breaks](#p)
    *   [Headers](#header)

hileon

.clear_margin_padding() {
    margin: 0 !important; 
    padding: 0 !important; 
    padding-left: 0px !important; 
    padding-right: 0px !important; 
}

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;

hileon

.box-shadow(@x: 0, @y: 1px, @blur: 1px, @color: #000) {
  box-shadow: @x @y @blur @color;
  -moz-box-shadow: @x @y @blur @color;
  -webkit-box-shadow: @x @y @blur @color;
}

.inset-box-shadow(@x: 0, @y: 1px, @blur: 1px, @color: #000) {
  box-shadow: inset @x @y @blur @color;
  -moz-box-shadow: inset @x @y @blur @color;
  -webkit-box-shadow: inset @x @y @blur @color;

hileon

.border-radius(@radius:15px)
{
  -webkit-border-radius:@radius;
  -moz-border-radius:@radius;
  border-radius:@radius;
}

.multi-rounded-corners(@topLeft: 5px, @topRight: 5px, @bottomRight: 5px, @bottomLeft: 5px)
{
  -webkit-border-radius: @topLeft @topRight @bottomRight @bottomLeft;

hileon

.css3_gradient(@from, @to, @fallback: @to) {
    background-color:@fallback;
    background-image:-webkit-gradient(linear, left top, left bottom, from(@from), to(@to));
    background-image:-webkit-linear-gradient(top, @from, @to);
    background-image:-moz-linear-gradient(top, @from, @to);
    background-image:-ms-linear-gradient(top, @from, @to);
    background-image:-o-linear-gradient(top, @from, @to);
    background:linear-gradient(to left bottom, @from, @to);
}

hileon

.rounded-corners (@radius: 5px) { 
    border-radius: @radius; 
    -webkit-border-radius: @radius; 
    -moz-border-radius: @radius; 
} 

hileon

@font-face {
  font-family: 'OpenSans-Bold';
  src: url('../fonts/OpenSans-Bold.ttf');
  font-weight: normal;
  font-style: normal;
}

.fonts (@the-font:"OpenSans-CondLight",@size:14px) {
      font-weight: normal;
      font-style: normal;

hileon

///*---------------------------------------------------------------------*/
.mixin-border-radius(@topleft:5px,@topright:5px,@bottomright:5px,@bottomleft:5px) {
    border-top-left-radius: @topleft;
    border-top-right-radius: @topright;
    border-bottom-right-radius: @bottomright;
    border-bottom-left-radius: @bottomleft;
    -moz-border-radius-topleft: @topleft;
    -moz-border-radius-topright: @topright;
    -moz-border-radius-bottomright: @bottomright;
    -moz-border-radius-bottomleft: @bottomleft;

hileon

///*---------------------------------------------------------------------*/
@mixin border-radius($topleft:5px,$topright:null,$bottomright:null,$bottomleft:null) {
  @if $topright != null and $bottomright != null and $bottomleft != null {
    border-top-left-radius: $topleft;
    border-top-right-radius: $topright;
    border-bottom-right-radius: $bottomright;
    border-bottom-left-radius: $bottomleft;
    -moz-border-radius-topleft: $topleft;
    -moz-border-radius-topright: $topright;
    -moz-border-radius-bottomright: $bottomright;