10BC0 (docs) customizing styling conventions · geddski/csstyle@45c042c · GitHub
[go: up one dir, main page]
Skip to content

Commit 45c042c

Browse files
geddskigeddski
committed
(docs) customizing styling conventions
1 parent 616e1ff commit 45c042c

File tree

1 file changed

+41
-12
lines changed

1 file changed

+41
-12
lines changed

‎README.md‎

Lines changed: 41 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,47 @@ Be sure to include postcss-nested and csstyle in that order.
3737

3838
Now you're set and can start creating components with options & parts, adding in tweaks and locations as needed. Enjoy!
3939

40+
## Customizing Styling Conventions
41+
csstyle lets you change the style conventions to whatever suits your style.
42+
43+
### Default Symbols
44+
- `options`: `\--`
45+
- `parts`: `__`
46+
- `tweaks`: `\+`
47+
- `locations`: `\@`
48+
- `rootId`: `csstyle`
49+
50+
### With SASS
51+
Override the defaults using SASS variables.
52+
- `options`: `$csstyle-option-symbol`
53+
- `parts`: `$csstyle-part-symbol`
54+
- `tweaks`: `$csstyle-tweak-symbol`
55+
- `locations`: `$csstyle-location-symbol`
56+
- `rootId`: `$csstyle-root-id`
57+
58+
Example:
59+
```scss
60+
$csstyle-part-symbol: '\\/';
61+
$csstyle-root-id: 'app';
62+
```
63+
64+
### With Postcss
65+
Override the defaults by calling the cssytle function with an options object.
66+
- `options`: `optionSymbol`
67+
- `parts`: `partSymbol`
68+
- `tweaks`: `tweakSymbol`
69+
- `locations`: `locationSymbol`
70+
- `rootId`: `rootId`
71+
72+
Example:
73+
74+
```js
75+
require('../csstyle')({optionSymbol: '\\-', partSymbol: '\\/', rootId: 'app'})
76+
```
77+
78+
**IMPORTANT NOTE** All characters besides `_` need to be escaped! However, if you are using dashes, only _the first one_ needs to be escaped. Use two backslashes to properly escape in SASS. For example to use a forward slash to separate parts, set $csstyle-part-symbol to `\\/`.
79+
80+
4081
## FAQ
4182

4283
### Can I use this with Libsass?
@@ -65,18 +106,6 @@ In Sass you can append a `&` to a selector or pseudo-selector to have it applied
65106
}
66107
```
67108

68-
### Can I configure the styling convention (SASS)?
69-
There are a few settings you can change. You can set these to whatever suits your style.
70-
71-
- The style to denote `options` by changing the `$csstyle-option-symbol` variable. The default is `\--`.
72-
- The style to denote `parts` by changing the `$csstyle-part-symbol` variable. The default is `__`.
73-
- The style to denote `tweaks` by changing the `$csstyle-tweak-symbol` variable. The default is `\+`.
74-
- The style to denote `locations` by changing the `$csstyle-location-symbol` variable. The default is `\@`.
75-
76-
**All characters besides `_` need to be escaped!** However, if you are using dashes, only _the first one_ needs to be escaped. Use two backslashes to properly escape in SASS. For example to use a forward slash to separate parts, set $csstyle-part-symbol to `\\/`.
77-
78-
In adition to that, you can also change your app's root `id` on the html or body element by changing the `$csstyle-root-id` variable. The default is `csstyle`.
79-
80109
## License
81110
MIT
82111

0 commit comments

Comments
 (0)
0