Project

xass

0.0
No commit activity in last 3 years
No release in over 3 years
Namespace in sass
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
 Dependencies

Development

>= 0
>= 0
>= 0

Runtime

>= 3.4.7
 Project Readme

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!