README.md in xass-0.2.0 vs README.md in xass-0.3.0

@@ -1,9 +1,13 @@
 ##DESCRIPTION
 
 Xass extends Rails with namespacing CSS classes in Sass.
 
+##SUPPORT
+
+Currently supported sass version is 3.2.19
+
 ##INSTALLATION
 
 We suppose you use Rails with sass-rails.
 
 ###Gemfile
@@ -12,11 +16,11 @@
 gem 'xass'
 ```
 
 ##USAGE
 
-###Example 1
+###Namespacing by directory tree
 
 ```sass
 // /app/assets/stylesheets/application.sass
 
 @import ./main/**/*
@@ -27,25 +31,26 @@
 
 .hogehoge
   width: 100px
 ```
 
-This emits the following css.
+This emits the following css (notice that there are three underscores before `hogehoge`.)
 
 ```css
 .hoge__piyo__fuga___hogehoge {
   width: 100px;
 }
 ```
 
-In view, use helpers to apply the style.
+In view, use helpers or `ns` prefixed class names to apply the style.
 
 ```haml
 -# /app/views/someview.html.haml
 
 = namespace :hoge, :piyo, :fuga do
-  %div{ class: ns(:hogehoge) }
+  .ns-hogehoge
+  -# or %div{ class: ns(:hogehoge) }
 ```
 
 This emits
 
 ```html
@@ -58,67 +63,64 @@
 -# /app/views/someview.html.haml
 
 = namespace :hoge do
   = namespace :piyo do
     = namespace :fuga do
-      %div{ class: ns(:hogehoge) }
+      .ns-hogehoge
 ```
 
-###Example 2
+If you don't want to dig namespaces, you can specify namespaces directly in `ns` prefixed class name.
 
-You can use `root` class for convenience.
+```haml
+= namespace :hoge do
+  .ns-piyo--fuga--hogehoge
+```
 
+###Special class name `root`
+
+You can use `root` class for specify a root class name.
+
 ```sass
 // /app/assets/stylesheets/main/hoge/piyo/fuga.sass
 
 .root
   width: 10px
-
-.hogehoge
-  width: 100px
 ```
 
 This emits
 
 ```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) }
+  .nsr
+  -# or %div{ class: nsr }
 ```
 
 This emits
 
 ```html
-<div class="hoge__piyo__fuga">
-  <div class="hoge__piyo__fuga___hogehoge"></div>
-</div>
+<div class="hoge__piyo__fuga"></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) }
+= namespace_with_root :hoge, :piyo, :fuga
 ```
 
-###Example 3
+###Disable namespacing
 
 You can use `_` prefix to disable namespacing.
 
 ```sass
 // /app/assets/stylesheets/application.sass
@@ -127,37 +129,23 @@
 ```
 
 ```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;
 }
 ```
 
-###Example 4
+###Reset current namespace
 
 In partial, you may want to reset current namespace. `namespace!` and `namespace_with_root!` do this.
 
 ```haml
 -# /app/views/someview.html.haml
@@ -165,11 +153,11 @@
 = namespace_with_root :hoge, :piyo, :fuga do
   = render partial: 'partial'
 ```
 
 ```haml
--# /app/views/partial.html.haml
+-# /app/views/_partial.html.haml
 
 = namespace_with_root! :foo do
   foo
 ```
 
@@ -179,6 +167,17 @@
 <div class="hoge__piyo__fuga">
   <div class="foo">
     foo
   </div>
 </div>
+```
+
+###Abbreviations
+
+The following aliases are available.
+
+```ruby
+alias :dns :namespace
+alias :dns! :namespace!
+alias :dnsr :namespace_with_root
+alias :dnsr! :namespace_with_root!
 ```