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