README.md in xass-0.1.4 vs README.md in xass-0.1.5

- old
+ new

@@ -1,8 +1,8 @@ ##DESCRIPTION -Xass extend Rails with namespacing Sass classes +Xass extends Rails with namespacing CSS classes in Sass. ##INSTALLATION We suppose you use Rails with sass-rails. @@ -35,42 +35,51 @@ .hoge__piyo__fuga___hogehoge { width: 100px; } ``` -And, +In view, use helpers to apply the style. ```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. +This emits -###Example 2 +```html +<div class="hoge__piyo__fuga___hogehoge"></div> +``` -You can use `root` class for convenience. +As matter of course, `namespace` can be nested as follows. -```sass -// /app/assets/stylesheets/application.sass +```haml +-# /app/views/someview.html.haml -@import ./main/**/* += namespace :hoge do + = namespace :piyo do + = namespace :fuga do + %div{ class: ns(:hogehoge) } ``` +###Example 2 + +You can use `root` class for convenience. + ```sass // /app/assets/stylesheets/main/hoge/piyo/fuga.sass .root width: 10px .hogehoge width: 100px ``` -This emits the following css. +This emits ```css .hoge__piyo__fuga { width: 10px; } @@ -88,22 +97,30 @@ = namespace :hoge, :piyo, :fuga do %div{ class: ns_root } %div{ class: ns(:hogehoge) } ``` -You can also write as follows abbreviately. +This emits +```html +<div class="hoge__piyo__fuga"> + <div class="hoge__piyo__fuga___hogehoge"></div> +</div> +``` + +Abbreviately, you can write this as follows. + ```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 . +You can use `_` prefix to disable namespacing. ```sass // /app/assets/stylesheets/application.sass @import ./main/**/* @@ -134,6 +151,34 @@ } .current { background-color: black; } -``` \ No newline at end of file +``` + +###Example 4 + +In partial, you may want to reset current namespace. `namespace!` and `namespace_with_root!` do this. + +```haml +-# /app/views/someview.html.haml + += namespace_with_root :hoge, :piyo, :fuga do + = render partial: 'partial' +``` + +```haml +-# /app/views/partial.html.haml + += namespace_with_root! :foo do + foo +``` + +This emits + +```html +<div class="hoge__piyo__fuga"> + <div class="foo"> + foo + </div> +</div> +```