diff options
author | Feuerfuchs <git@feuerfuchs.dev> | 2020-11-01 21:11:47 +0100 |
---|---|---|
committer | Feuerfuchs <git@feuerfuchs.dev> | 2020-11-01 21:11:47 +0100 |
commit | 2a42ac16b9a705b2c5b369e0c55867cd568f7e8f (patch) | |
tree | bf61f079618e3a61a2a4836367d0fa235996d5ec | |
parent | Init (diff) | |
download | iro-sass-2a42ac16b9a705b2c5b369e0c55867cd568f7e8f.tar.gz iro-sass-2a42ac16b9a705b2c5b369e0c55867cd568f7e8f.tar.bz2 iro-sass-2a42ac16b9a705b2c5b369e0c55867cd568f7e8f.zip |
Readme update, lift direct-child restriction on iro-bem-at-theme
-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, &); |