https://github.com/dustin-archive/adapt
Sweet responsive extends
https://github.com/dustin-archive/adapt
adapt extend extends mixin mixins placeholder responsive sass scss taffy
Last synced: about 2 months ago
JSON representation
Sweet responsive extends
- Host: GitHub
- URL: https://github.com/dustin-archive/adapt
- Owner: dustin-archive
- License: mit
- Created: 2016-04-17T21:08:34.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2016-12-04T03:14:33.000Z (over 8 years ago)
- Last Synced: 2025-03-11T17:28:58.005Z (2 months ago)
- Topics: adapt, extend, extends, mixin, mixins, placeholder, responsive, sass, scss, taffy
- Language: CSS
- Homepage:
- Size: 6.84 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Adapt
===
> Sweet responsive extends
## Why?
+ Content that is easily extendable across at-rules
+ Programmatically extend content without interpolation
## Getting Started
+ Install with Bower
+ Import dependencies
```
$ bower install --save taffy-adapt
```
```scss
@import 'bower_components/fizz-sass/scss/main';
@import 'bower_components/taffy-adapt/scss/main';
```
## Adapt
+ Helps extending your placeholders
#### Using adapt
Simplify the adapt mixin by wrapping it with your own.
```scss
@mixin foobar($variants) {
@include adapt('foobar', $variants);
}
```
Now you can use your mixin.
```scss
.foobar {
@include foobar((1 baz) (2 baz));
}
```
## Loop
+ Helps generate your placeholders
+ Uses `$adapt-loop` global variable to set the scope for each placeholder
#### Using loop
The loop mixin accepts one argument that sets how many times it loops.
```scss
@include adapt-loop(2) {
%foobar-#{$adapt-loop}-baz {
// ...
}
%foobar-#{$adapt-loop}-qux {
// ...
}
}
```