https://github.com/lukaskleinschmidt/snug
SCSS toolkit to create utility classes with ease.
https://github.com/lukaskleinschmidt/snug
css functional-css responsive scss utility-classes
Last synced: 15 days ago
JSON representation
SCSS toolkit to create utility classes with ease.
- Host: GitHub
- URL: https://github.com/lukaskleinschmidt/snug
- Owner: lukaskleinschmidt
- License: mit
- Created: 2021-02-01T09:43:40.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2021-06-21T11:10:53.000Z (almost 5 years ago)
- Last Synced: 2025-12-27T20:42:19.234Z (3 months ago)
- Topics: css, functional-css, responsive, scss, utility-classes
- Language: SCSS
- Homepage:
- Size: 21.5 KB
- Stars: 19
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# snug – super neat utility generator
SCSS toolkit to create utility classes with ease.
> ❗ snug is still under development and functionality may change
## Requirements
For now you need to use [dart sass](https://sass-lang.com/dart-sass) to compile your styles.
## Available variants
Name | Type
:-- | :--
responsive | `@media`
dark | `@media`
light | `@media`
`pseudo-class` | [`pseudo-class`](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#alphabetical_index)
group-`pseudo-class` | [`pseudo-class`](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#alphabetical_index)
## Basic Usage
```scss
@use '@snug/core' as * with (
$breakpoints: (
's': 640px,
'm': 768px,
'l': 1024px,
)
);
// Basic responsive variants
.banana {
@include variants('responsive') {
color: gold;
}
}
// Adding additional variants
.banana {
@include variants('responsive' 'hover' 'group-hover') {
color: gold;
}
}
```
## Responsive Variants
When using modifiers that change the same or a more specific css property these must be grouped by breakpoint.
A more specific property would be something like `padding-top` to `padding`.
```scss
// Wrap your code like this to have your modifiers grouped by breakpoint
@include variants('responsive') using ($props...) {
.p-1 {
@include variants($props...) {
padding: 0.25rem;
}
}
.pt-1 {
@include variants($props...) {
padding-top: 0.25rem;
}
}
}
```
## Using Options
```scss
$colors: (
'blue': (
100: #e5f1fd,
200: #b0d6f9,
300: #7bbaf6,
400: #469ff2,
500: #1183ee,
600: #0d66b9,
700: #094984,
800: #062c4f,
900: #020f1a,
)
);
.text {
@include options($colors, 'hover' 'group-hover') using ($value) {
color: $value;
}
}
```