diff options
| -rw-r--r-- | README.md | 41 | ||||
| -rw-r--r-- | src/bem/_theme.scss | 6 |
2 files changed, 13 insertions, 34 deletions
| @@ -1,23 +1,20 @@ | |||
| 1 | # iro-sass | 1 | # iro-sass |
| 2 | 2 | ||
| 3 | iro-sass is a [Sass](http://sass-lang.com/) library that I developed to create websites. | 3 | iro-sass is a multi-purpose [Sass](http://sass-lang.com/) library for designing websites. |
| 4 | 4 | Its main feature is a BEM system, but it also includes some other useful features: | |
| 5 | Its main feature is a **[BEM system](#bem-system)**, though it also includes some other useful features: | ||
| 6 | 5 | ||
| 7 | - Easing background gradients | 6 | - Easing background gradients |
| 8 | - Context stacks: A temporary data storage | 7 | - Context stacks: A temporary data storage |
| 9 | - Property trees]: A persistent data storage | 8 | - Property trees: A persistent data storage |
| 10 | - Responsive properties: A generalization of responsive typography | 9 | - Responsive properties: A generalization of responsive typography |
| 11 | - Modular scales | 10 | - Modular scales |
| 12 | 11 | ||
| 13 | All features are explained in greater detail in the [Wiki](https://git.vulpes.one/Feuerfuchs/iro-sass/wiki). | 12 | ## Contents |
| 14 | The rest of this document is a quick overview over what iro-sass has to offer. | ||
| 15 | 13 | ||
| 16 | - [iro-sass](#iro-sass) | 14 | - [iro-sass](#iro-sass) |
| 15 | - [Contents](#contents) | ||
| 17 | - [Getting started](#getting-started) | 16 | - [Getting started](#getting-started) |
| 18 | - [Development](#development) | 17 | - [Development](#development) |
| 19 | - [Changelog](#changelog) | ||
| 20 | - [Known issues](#known-issues) | ||
| 21 | - [Features](#features) | 18 | - [Features](#features) |
| 22 | - [BEM system](#bem-system) | 19 | - [BEM system](#bem-system) |
| 23 | - [Easing background gradients](#easing-background-gradients) | 20 | - [Easing background gradients](#easing-background-gradients) |
| @@ -28,48 +25,30 @@ The rest of this document is a quick overview over what iro-sass has to offer. | |||
| 28 | 25 | ||
| 29 | ## Getting started | 26 | ## Getting started |
| 30 | 27 | ||
| 31 | Install the package [iro-sass](https://www.npmjs.com/package/iro-sass) from the npm repository using the package manager of your choice. | 28 | Include iro-sass in your Sass stylesheet: |
| 32 | |||
| 33 | - npm: `npm install iro-sass` | ||
| 34 | - yarn: `yarn add iro-sass` | ||
| 35 | |||
| 36 | Then include iro-sass in your Sass stylesheet: | ||
| 37 | 29 | ||
| 38 | ```scss | 30 | ```scss |
| 39 | @import 'iro-sass/src/main'; | 31 | @import 'iro-sass/src/main'; |
| 40 | // (overrides) | ||
| 41 | // files that depend on iro-sass | ||
| 42 | ``` | 32 | ``` |
| 43 | 33 | ||
| 44 | iro-sass uses function, mixin and variable names that are prefixed with 'iro-' to avoid clashes with other libraries. | 34 | iro-sass uses function, mixin and variable names that are prefixed with 'iro-' to avoid clashes with other libraries. |
| 45 | There are, however, shorter versions of many mixins and functions available (referred to as "shortcodes"). | 35 | There are, however, shorter versions of many mixins and functions available (referred to as "shortcodes"). |
| 46 | Just import one of these files to use a certain set of shortcodes: | 36 | Just import one of these files to use a specific set of shortcodes: |
| 47 | 37 | ||
| 48 | - `iro-sass/src/bem-shortcodes`: BEM | 38 | - `iro-sass/src/bem-shortcodes`: BEM |
| 49 | - `iro-sass/src/responsive-shortcodes`: Responsive properties | 39 | - `iro-sass/src/responsive-shortcodes`: Responsive properties |
| 50 | - `iro-sass/src/harmony-shortcodes`: Modular scales | 40 | - `iro-sass/src/harmony-shortcodes`: Modular scales |
| 51 | 41 | ||
| 52 | **Note:** If the 'node_modules' folder isn't a search path for Sass imports, you have to prefix your imports with the path to 'node_modules'. | ||
| 53 | An import might then look like this: `@import 'node_modules/iro-sass/src/main';` | ||
| 54 | |||
| 55 | ## Development | 42 | ## Development |
| 56 | 43 | ||
| 57 | Clone the repository, then run `npm install` or `yarn` to install all dependencies. | 44 | Clone the repository, then run `npm install` or `yarn` to install all dependencies. |
| 58 | 45 | ||
| 59 | The following npm scripts are available: | 46 | The following npm scripts are available: |
| 60 | 47 | ||
| 61 | - `lint`: Lint the source code with [sass-lint](https://www.npmjs.com/package/sass-lint). | 48 | - `lint`: Lint the source code. |
| 62 | - `livelint`: Lint automatically whenever the code changes. | 49 | - `livelint`: Lint automatically whenever the code changes. |
| 63 | - `doc`: Generate the SassDoc documentation with [sassdoc](http://sassdoc.com/). | 50 | - `doc`: Generate the SassDoc documentation. |
| 64 | - `test`: Run unit tests with [sass-true](https://www.npmjs.com/package/sass-true) and [Mocha](https://mochajs.org/). | 51 | - `test`: Run unit tests. |
| 65 | |||
| 66 | ## Changelog | ||
| 67 | |||
| 68 | [Changelog](https://git.vulpes.one/Feuerfuchs/iro-sass/blob/main/CHANGELOG.md) | ||
| 69 | |||
| 70 | ## Known issues | ||
| 71 | |||
| 72 | Check out the [issue tracker](https://git.vulpes.one/Feuerfuchs/iro-sass/issues). | ||
| 73 | 52 | ||
| 74 | ## Features | 53 | ## Features |
| 75 | 54 | ||
diff --git a/src/bem/_theme.scss b/src/bem/_theme.scss index b4bcc76..a49981c 100644 --- a/src/bem/_theme.scss +++ b/src/bem/_theme.scss | |||
| @@ -45,9 +45,9 @@ | |||
| 45 | $parent-context: iro-context-get($iro-bem-context-id, 'block'); | 45 | $parent-context: iro-context-get($iro-bem-context-id, 'block'); |
| 46 | $parent-selector: map-get(nth($parent-context, 2), 'selector'); | 46 | $parent-selector: map-get(nth($parent-context, 2), 'selector'); |
| 47 | 47 | ||
| 48 | @if not iro-selector-suffix-match(&, $parent-selector) { | 48 | //@if not iro-selector-suffix-match(&, $parent-selector) { |
| 49 | @error 'An at-theme rule must be an immediate child of a block'; | 49 | // @error 'An at-theme rule must be an immediate child of a block'; |
| 50 | } | 50 | //} |
| 51 | 51 | ||
| 52 | $selector: iro-bem-theme-selector($name, $names...); | 52 | $selector: iro-bem-theme-selector($name, $names...); |
| 53 | $selector: selector-nest($selector, &); | 53 | $selector: selector-nest($selector, &); |
