DESCRIPTION

Xass extend Rails with namespacing Sass classes

INSTALLATION

We suppose you use Rails with sass-rails.

Gemfile

gem 'xass'

USAGE

Example 1

// /app/assets/stylesheets/application.sass

@import ./main/**/*

// /app/assets/stylesheets/main/hoge/piyo/fuga.sass

.hogehoge
  width: 100px

This emits the following css.

.hoge__piyo__fuga___hogehoge {
  width: 100px;
}

And,

-# /app/views/someview.html.haml

= namespace :hoge, :piyo, :fuga do
  %div{ class: ns(:hogehoge) }

Then, you can apply width: 100px to the div element.

Example 2

You can use root class for convenience.

// /app/assets/stylesheets/application.sass

@import ./main/**/*

// /app/assets/stylesheets/main/hoge/piyo/fuga.sass

.root
  width: 10px

.hogehoge
  width: 100px

This emits the following css.

.hoge__piyo__fuga {
  width: 10px;
}

.hoge__piyo__fuga___hogehoge {
  width: 100px;
}

And,

-# /app/views/someview.html.haml

= namespace :hoge, :piyo, :fuga do
  %div{ class: ns_root }
    %div{ class: ns(:hogehoge) }

You can also write as follows abbreviately.

-# /app/views/someview.html.haml

= namespace_with_root :hoge, :piyo, :fuga do
  %div{ class: ns(:hogehoge) }

Example 3

You can use _ prefix for unnamespaced .

// /app/assets/stylesheets/application.sass

@import ./main/**/*

// /app/assets/stylesheets/main/hoge/piyo/fuga.sass

.root
  width: 10px

.hogehoge
  width: 100px

._current
  background-color: black

This emits the following css.

.hoge__piyo__fuga {
  width: 10px;
}

.hoge__piyo__fuga___hogehoge {
  width: 100px;
}

.current {
  background-color: black;
}