Sha256: 08fd7bb3aca8e07c67782f1ccf758895230b014a5c8a7879656faf8a1db86a5d
Contents?: true
Size: 1.72 KB
Versions: 4
Compression:
Stored size: 1.72 KB
Contents
##DESCRIPTION Xass extend Rails with namespacing Sass classes ##INSTALLATION We suppose you use Rails with sass-rails. ###Gemfile ```rb gem 'xass' ``` ##USAGE ###Example 1 ```sass // /app/assets/stylesheets/application.sass @import ./main/**/* ``` ```sass // /app/assets/stylesheets/main/hoge/piyo/fuga.sass .hogehoge width: 100px ``` This emits the following css. ```css .hoge__piyo__fuga___hogehoge { width: 100px; } ``` And, ```haml -# /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. ```sass // /app/assets/stylesheets/application.sass @import ./main/**/* ``` ```sass // /app/assets/stylesheets/main/hoge/piyo/fuga.sass .root width: 10px .hogehoge width: 100px ``` This emits the following css. ```css .hoge__piyo__fuga { width: 10px; } .hoge__piyo__fuga___hogehoge { width: 100px; } ``` And, ```haml -# /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. ```haml -# /app/views/someview.html.haml = namespace_with_root :hoge, :piyo, :fuga do %div{ class: ns(:hogehoge) } ``` ###Example 3 You can use `_` prefix for unnamespaced . ```sass // /app/assets/stylesheets/application.sass @import ./main/**/* ``` ```sass // /app/assets/stylesheets/main/hoge/piyo/fuga.sass .root width: 10px .hogehoge width: 100px ._current background-color: black ``` This emits the following css. ```css .hoge__piyo__fuga { width: 10px; } .hoge__piyo__fuga___hogehoge { width: 100px; } .current { background-color: black; } ```
Version data entries
4 entries across 4 versions & 1 rubygems
Version | Path |
---|---|
xass-0.1.4 | README.md |
xass-0.1.3 | README.md |
xass-0.1.2 | README.md |
xass-0.1.1 | README.md |