Namespacing CSS classes in Sass.
Ruby HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
lib
spec
.gitignore
Gemfile
Gemfile.lock
README.md
xass.gemspec

README.md

DESCRIPTION

Xass extends Rails with namespacing CSS classes in Sass.

SUPPORT

Xass version Supported Sass version
0.3.0 3.4.7~3.4.10
0.2.0 3.2.19

INSTALLATION

We suppose you use Rails with sass-rails.

Gemfile

gem 'xass'

USAGE

Namespacing by directory tree

// /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

Special class name root

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

Disable namespacing

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;
}

Reset current namespace

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>

Abbreviations

The following aliases are available.

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