https://github.com/brettm12345/stylus-mixins
A collection of mixins for stylus-lang
https://github.com/brettm12345/stylus-mixins
mixins stylus stylus-lang
Last synced: about 1 month ago
JSON representation
A collection of mixins for stylus-lang
- Host: GitHub
- URL: https://github.com/brettm12345/stylus-mixins
- Owner: Brettm12345
- Created: 2020-03-03T00:30:40.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T08:53:09.000Z (over 2 years ago)
- Last Synced: 2025-03-18T14:12:22.197Z (about 1 month ago)
- Topics: mixins, stylus, stylus-lang
- Language: CSS
- Homepage:
- Size: 267 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Stylus Mixins
A collection of shorthand mixins for [stylus-lang](https://stylus-lang.com/)
## Usage
```sh
yarn add -D stylus-mixins
```
```css
@import "stylus-mixins";
```
## Mixins
### [Border](lib/_border.styl)
| Mixin | Property |
| ----- | ------------------------------ |
| `b` | `border` |
| `bt` | `border-top` |
| `bl` | `border-left` |
| `br` | `border-right` |
| `by` | `border-top` & `border-bottom` |
| `bx` | `border-left` & `border-right` |
| `r` | `border-radius` |
### [Colors](lib/_colors.styl)
#### The `c` mixin
The `c` mixin works like this
```css
// c
```
```scss
input
c white gray black 1 0 1
```
would expand to
```css
input {
color: white !important;
border-color: gray;
background-color: black !important;
}
```
> note you can use `0` to omit arguments
| Mixin | Property |
| ----- | ------------ |
| `c` | see below |
| `bg` | `background` |
| `fg` | `color` |
### [Misc](lib/_misc.styl)
| Mixin | Property |
| ----- | ------------ |
| `an` | `animation` |
| `d` | `display` |
| `bs` | `box-shadow` |
| `tr` | `transition` |
| `op` | `opacity` |
### [Spacing](lib/_spacing.styl)
| Mixin | Property |
| ----- | -------------------------------- |
| `p` | `padding` |
| `pb` | `padding-bottom` |
| `pl` | `padding-left` |
| `pr` | `padding-right` |
| `px` | `padding-left` & `padding-right` |
| `py` | `padding-top` & `padding-bottom` |
| `m` | `margin` |
| `mb` | `margin-bottom` |
| `ml` | `margin-left` |
| `mr` | `margin-right` |
| `mx` | `margin-left` & `margin-right` |
| `my` | `margin-top` & `margin-bottom` |
### [Typography](lib/_typography.styl)
| Mixin | Property |
| ----- | ----------------- |
| `ff` | `font-family` |
| `fs` | `font-size` |
| `fw` | `font-weight` |
| `td` | `text-decoration` |
### Todo
[ ] - Add tests