Introduction

zurui-sass-rails で使えるSass Mixinsのサンプルページです。このサンプルページ自体のソースは https://github.com/mahm/zurui-sample にあります。

Zurui lines

@mixin zurui-line-top

Usage:

.zurui-line-top {
  @include zurui-line-top;
}

Effect:

zurui-line-top

@mixin zurui-line-right

Usage:

.zurui-line-right {
  @include zurui-line-right;
}

Effect:

zurui-line-right

@mixin zurui-line-left

Usage:

.zurui-line-left {
  @include zurui-line-left;
}

Effect:

zurui-line-left

@mixin zurui-line-bottom

Usage:

.zurui-line-bottom {
  @include zurui-line-bottom;
}

Effect:

zurui-line-bottom

Zurui font shadows

@mixin zurui-ts-000

Usage:

.zurui-ts-000 {
  @include zurui-ts-000;
}

Effect:

zurui-ts-000

@mixin zurui-ts-fff

Usage:

.zurui-ts-fff {
  @include zurui-ts-fff;
}

Effect:

zurui-ts-fff

Zurui gradations

@mixin zurui-gradient-top-lighten

Usage:

.zurui-gradient-top-lighten {
  @include zurui-gradient-top-lighten;
}

Effect:

zurui-gradient-top-lighten

@mixin zurui-gradient-top-darken

Usage:

.zurui-gradient-top-darken {
  @include zurui-gradient-top-darken;
}

Effect:

zurui-gradient-top-darken

Zurui box shadows

@mixin zurui-box-outer

Usage:

.zurui-box-outer {
  @include zurui-box-outer;
}

Effect:

zurui-box-outer

@mixin zurui-box-inner

Usage:

.zurui-box-inner {
  @include zurui-box-inner;
}

Effect:

zurui-box-inner

@mixin zurui-box-deboss

Usage:

.zurui-box-deboss {
  @include zurui-box-deboss;
}

Effect:

zurui-box-deboss

@mixin zurui-box-emboss

Usage:

.zurui-box-emboss {
  @include zurui-box-emboss;
}

Effect:

zurui-box-emboss