https://github.com/djfarly/sass-blocks

Introduces a pattern to make working with blocks/modules a little more oop.
https://github.com/djfarly/sass-blocks

Last synced: 2 months ago
JSON representation

Introduces a pattern to make working with blocks/modules a little more oop.

• Host: GitHub
• URL: https://github.com/djfarly/sass-blocks
• Owner: djfarly
• License: mit
• Created: 2015-10-09T08:10:42.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2015-10-10T12:33:13.000Z (about 9 years ago)
• Last Synced: 2024-10-02T16:09:06.440Z (3 months ago)
• Language: CSS
• Size: 141 KB
• Stars: 10
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# SassBlocks 

SassBlocks introduces a pattern to make working with bem-blocks/modules in Sass/Scss a little more oop.

# Install

Install SassBlocks via Bower or npm.

## Bower

```

bower install sass-blocks --save-dev

```

## npm

```

npm install sass-blocks --save-dev

```

# Usage

Make sure to import the _sass-blocks.scss file.

```scss

@import "path/to/sass-blocks";

```

SassBlocks proposes a pattern where you first declare all variables that should be local to the current block into the sass map `$this`.

Inside the block only those variables are used. Block variables are only ever accessed via the `this()` function.

After the blocks execution `$this` is reset.

```scss

// Somewhere else before the block is loaded

$global-height-value: 130px;

$global-color-brand: hotpink;

// _myblock.scss

// Each block should live in it's seperate file.

// To begin declare all internal variables for this block.

// Reference any external variables that will be used in here.

// Think of this as a 'constructor'.

$this: (

    // Block name

    block:                  myblock,

    // Block variables

    height:                 100px,

    subheight:              $global-height-value,

    somecolor:              $global-color-brand,

);

// Define your block.

// This does not need to follow bem-principles, but it certainly can't hurt. ;)

// Do not use any global variables in here!

.#{this(block)} {

    height: this(height);

    &__element {

        height: this(subheight);

        &--modifier {

            color: this(somecolor);

        }

    }

}

// Remember to unset $this. This way we fake scoping it to that file.

$this: null;

// all of this should result in

// .myblock { height: 100px; }

// .myblock__element { height: 130px; }

// .myblock__element--modifier { color: hotpink; }

```

Remember that using SassBlocks reserves the `$this` variable.

The actual function itself isn't that big of deal. `this()` just makes accessing the `$this` map a bit less verbose.

```scss

// 'old'

$foo = map-get($this, bar);

// the SassBlocks way

$foo = this(bar);

```