|
6 | 6 |
|
7 | 7 | Use this plugin to:
|
8 | 8 | - Define an 'silent' extendable selector — a "placeholder selector" — to which you can (from anywhere in the doc), add concrete selectors from other rule sets.
|
9 |
| -- Add concrete selectors from one rule (containing the `@extend`) to all rule sets with the selector specified (or a sub class of the one specified). |
| 9 | +- Add concrete selectors from one rule (containing the `@extend`) to all rule sets with the selector specified (or a subclass of the one specified). |
10 | 10 | - Pull-in declarations in rulesets (most) anywhere in the doc (by a selector) from within `@media` statements (semi-safely)
|
11 | 11 | - Extend existing media-conscious rulesets, even if some of them are within `@media` statements.
|
12 | 12 |
|
@@ -49,8 +49,6 @@ In regards to the concerns people have with Sass's `@extend`, and the problems t
|
49 | 49 | > **A Note on "mixins" & "extends"**: Mixins copy declarations from an abstract definition into a concrete rule set. These `@extend`s (normally) clone a concrete rule set's selector(s) and add them to an abstract placeholder selector, or another existing rule. *This* plugin enables extends. If you would like to use mixins, as well — or instead — have a look at [`postcss-mixins`](https://github.com/postcss/postcss-mixins).
|
50 | 50 |
|
51 | 51 | ## Installation
|
52 |
| -This is just a fork, not an NPM module yet :(, it's also still in development, the origin is here, use it in the mean-time: |
53 |
| - |
54 | 52 | ```
|
55 | 53 | npm install postcss-extend --save
|
56 | 54 | ```
|
@@ -112,11 +110,11 @@ You can also use its alias `@define-extend'.
|
112 | 110 | ```
|
113 | 111 | Both rules and placeholders are extended in much the same fashion, the only real difference is that placeholders can be named most anything, whereas rules need to be extended via the same syntax in the css. For example, to extend a 'foo' class it'd be `@extend .foo`
|
114 | 112 |
|
115 |
| -There is only one overarching `@extend` guideline to obey: `@extend` must *not* occur at the root level, it only can be used inside rule sets. |
| 113 | +There is only one overarching `@extend` guideline to obey: `@extend` must **not** occur at the root level, it only can be used inside rule sets. |
116 | 114 |
|
117 | 115 | #### Extending Sub Classes and Sub Elements
|
118 | 116 |
|
119 |
| -Whenever extending a rule or placeholder, you are also automatically trying to extend any sub classes or elements that have *exactly* what you selected (before a space, `.`, `:`, or `#`). For example: |
| 117 | +Whenever extending a rule or placeholder, you are also automatically trying to extend any subclasses or elements that have *exactly* what you selected (before a space, `.`, `:`, or `#`). For example: |
120 | 118 | ```css
|
121 | 119 | .potato {
|
122 | 120 | color: white;
|
@@ -195,7 +193,7 @@ Notice how `.spud` only takes in declarations it doesn't already have from `.pot
|
195 | 193 |
|
196 | 194 | ##### External Sub classes
|
197 | 195 |
|
198 |
| -So what does it do when sub classes of the extended rule are also outside `@media`? |
| 196 | +So what does it do when subclasses of the extended rule are also outside `@media`? |
199 | 197 | ```css
|
200 | 198 | .potato {
|
201 | 199 | float: left;
|
@@ -352,10 +350,10 @@ console.log(outputCss);
|
352 | 350 | Or take advantage of [any of the myriad of other ways to consume PostCSS](https://github.com/postcss/postcss#usage), and follow the plugin instructions they provide.
|
353 | 351 |
|
354 | 352 | ## Quirks
|
355 |
| -As with any piece of code it's got a few quirks. Behaviors that are not intended, and not enforced, and may disappear (or be forcively altered) with the next release, so it's useful to be aware of them. |
| 353 | +As with any piece of code it's got a few quirks. Behaviors that are not intended, and not enforced, and may disappear (or be forcibly altered) with the next release, so it's useful to be aware of them. |
356 | 354 |
|
357 | 355 | **Order of Processing** : Currently, all of the `@extend`s being processed are run in a sequential manner from the top to the bottom of the doc. This keeps thing relatively snappy, but makes it so that we have to do conditional-recursion on not-yet-declared-or-extended rules. This leads to some blatant inefficiencies when processing badly formed CSS. So if you want to keep processing time down, write good CSS.
|
358 | 356 |
|
359 | 357 | **Non-logical means of extension for `@media`** : As anyone who's aware of the complications discussed in the [SASS issue about extending across `@media`](https://github.com/sass/sass/issues/1050) would know. There is no way (known) of extending when `@media` rules are involved that is both 'clean and simple' and 'logically correct with how `@extend` is used elsewhere'. The way this plugin operates, and it's logical meaning, is a blatant compromise so that it has both common use cases and easier implementation. While the current implementations will not change (without flags), such things as extending an `@media` from within an `@media` does nothing, this could possibly change in the future.
|
360 | 358 |
|
361 |
| -##### Originally a fork of davidtheclark's [postcss-simple-extend](https://github.com/davidtheclark/postcss-simple-extend) (extended) by way of the included [MIT License](https://github.com/travco/postcss-extend/blob/master/LICENSE) |
| 359 | +##### Originally a fork of davidtheclark's [postcss-simple-extend](https://github.com/davidtheclark/postcss-simple-extend) (extended) by way of the included [MIT License](https://github.com/travco/postcss-extend/blob/master/LICENSE) |
0 commit comments