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>
+```