Xass extends Rails with namespacing CSS classes in Sass.

We suppose you use Rails with sass-rails.

gem 'xass'

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

@import ./main/**/*

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

.hogehoge
  width: 100px

This emits the following css (notice that there are three underscores before hogehoge.)

.hoge__piyo__fuga___hogehoge {
  width: 100px;
}

In view, use helpers or ns prefixed class names to apply the style.

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

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

This emits

<div class="hoge__piyo__fuga___hogehoge"></div>

As matter of course, namespace can be nested as follows.

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

= namespace :hoge do
  = namespace :piyo do
    = namespace :fuga do
      .ns-hogehoge

If you don't want to dig namespaces, you can specify namespaces directly in ns prefixed class name.

= namespace :hoge do
  .ns-piyo--fuga--hogehoge

You can use root class for specify a root class name.

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

.root
  width: 10px

This emits

.hoge__piyo__fuga {
  width: 10px;
}

And,

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

= namespace :hoge, :piyo, :fuga do
  .nsr
  -# or %div{ class: nsr }

This emits

<div class="hoge__piyo__fuga"></div>

Abbreviately, you can write this as follows.

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

= namespace_with_root :hoge, :piyo, :fuga

You can use _ prefix to disable namespacing.

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

@import ./main/**/*

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

._current
  background-color: black

This emits the following css.

.current {
  background-color: black;
}

In partial, you may want to reset current namespace. namespace! and namespace_with_root! do this.

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

= namespace_with_root :hoge, :piyo, :fuga do
  = render partial: 'partial'

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

= namespace_with_root! :foo do
  foo

This emits

<div class="hoge__piyo__fuga">
  <div class="foo">
    foo
  </div>
</div>

The following aliases are available.

alias :dns :namespace
alias :dns! :namespace!
alias :dnsr :namespace_with_root
alias :dnsr! :namespace_with_root!