A universal CSS helper library.
npm install snack-helper
Snack-helper is a universal CSS helper library.
``bash`
$ npm install snack-helper --save
`scss`
@use 'snack-helper';
The @use-based Sass API is only available in the version 2.2.0 or above.
Some helpers can be customized with variables. Take the spacing for example.
Here is the default spacing variable.
`scss`
$spacer: 1rem !default;
$spacers: (
0: 0,
4: $spacer * .25,
8: $spacer * .5,
12: $spacer * .75,
16: $spacer,
24: $spacer * 1.5,
32: $spacer * 2,
48: $spacer * 3
) !default;
You can cover the whole original spacing with $spacers as you like.
`scss`
@use 'snack-helper' with (
$spacers: (
0: 0,
1: .25rem,
2: .5rem,
3: .75rem,
4: 1rem,
5: 1.5rem
)
);
If you just want to extend the original spacing, you can use the $spacers-extend;
`scss``
@use '~snack-helper' with (
$spacers-extend: (
5: 5px,
10: 10px,
15: 15px
)
);
- Color
- Spacing
- Sizing
- Border
- Rounded
- Shadow
- Text
- Alignment
- Display
- Position
- Flexbox
MIT License