TASS

Ultimate lightweight stylesheet language

Ultimate lightweight

Back to the source. TASS does not provide any complex syntaxes or functions, so this is just little better CSS.

TASS is like SCSS in SASS and can be used with only browsers like LESS because written in JavaScript.

Check it out!

<link rel="stylesheet/tass" type="text/x-tass" href="styles.tass"/>
<script type="text/javascript" src="tass.js"></script>

Download

Variables

$base-color : #333;
$base-back  : #fff;

body {
  color: $base-color;
  background: $base-back;
}

.invert {
  background: $base-color;
  color: $base-back;
}

You can give unambiguous meaning to values by naming it and reuse it in other rules.

Nesting

blockquote {
  font-style: italic;

  ul, ol {
    margin: 1em 0;
    padding: 0;

    li {
      padding: 0 0 0 2em;
    }
  }
}

Also supports nesting selectors.

Mixins

@mixin linear-gradient ($color1, $color2) {
  background: $color1;
  background: -webkit-linear-gradient(top, $color1 0%, $color2 100%);
  background: -moz-linear-gradient(top, $color1 0%, $color2 100%);
  background: -o-linear-gradient(top, $color1 0%, $color2 100%);
  background: -ms-linear-gradient(top, $color1 0%, $color2 100%);
  background: linear-gradient(top, $color1 0%, $color2 100%);
}

h1 { @include linear-gradient(#fff, #ccc) }
h2 { @include linear-gradient(#333, #000) }
h3 { @include linear-gradient(#999, #333) }

Reuse design component.

Usage

Try it

<link rel="stylesheet/tass" type="text/x-tass" href="styles.tass"/>
<script type="text/javascript" src="tass.js"></script>

For production

$ npm install tass
$ tass style.tass > style.css

Syntax

Variables

Definition

$varname : varvalue; /* ok */
$var-name : varvalue; /* ok */

foo { $varname : varvalue; } /* ng */

foo
{ $varname : varvalue; } /* ng */

Variable definition is by leading $ and written by property style. There must be no other leading characters exclude white-space.

Scope

$foo : foo;
prop : $foo; /* foo */
bar {
    $foo : bar;
    prop : $foo; /* bar */
}
prop : $foo; /* foo */

A brace creates new variable scope like above.

Mixins

Basis

/* ok */
@mixin mixin-name {
    foobar {
    }
}

/* ng */
 @mixin mixin-name {
    foobar {
    }
 }

/* ng */
@mixin mixin-name {
foobar {
}
}

Mixins are defined by leading @mixin mixin-name { and end with }. There must be no any characters (includes white-space) before start mixin (@mixin) and end of mixin brace (}). And inner of a mixin must be indented.

Use mixins

@mixin linear-gradient ($color1, $color2) {
  background: $color1;
  background: -webkit-linear-gradient(top, $color1 0%, $color2 100%);
  background: -moz-linear-gradient(top, $color1 0%, $color2 100%);
  background: -o-linear-gradient(top, $color1 0%, $color2 100%);
  background: -ms-linear-gradient(top, $color1 0%, $color2 100%);
  background: linear-gradient(top, $color1 0%, $color2 100%);
}

.foo {
  @include linear-gradient(#000, #333);
}

.bar,
.baz {
  @include linear-gradient(#333, #666);
}

Mixins can used by @include and take some parameters which is parted by comma and assigned by @include($args).

Include external files

/* This is var.tass */
$foo: bar;

@include var.tass;
body {
    foo: $foo;
}

@include can take filename like above.

Development

$ git clone git://github.com/cho45/tasscss.git

TASS is developed at github. Fork it and send push-request.

Bugs?

Please report it to github issues or fix and send push-request.

Active Issues

Fixed Issues

Contributors

Fork me on GitHub