Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/LukyVj/family.scss
Family.scss is a set of Sass mixins which will help you to manage the style of :nth-child'ified elements, in an easy way.
https://github.com/LukyVj/family.scss
css nth-order sass
Last synced: 14 days ago
JSON representation
Family.scss is a set of Sass mixins which will help you to manage the style of :nth-child'ified elements, in an easy way.
- Host: GitHub
- URL: https://github.com/LukyVj/family.scss
- Owner: LukyVj
- License: mit
- Created: 2016-05-21T19:00:23.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-04-12T07:32:54.000Z (over 1 year ago)
- Last Synced: 2024-05-19T05:37:16.077Z (6 months ago)
- Topics: css, nth-order, sass
- Language: SCSS
- Homepage: http://lukyvj.github.io/family.scss
- Size: 1010 KB
- Stars: 2,309
- Watchers: 45
- Forks: 127
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-github-star - family.scss - child'ified elements, in an easy way. | LukyVj | 2318 | (SCSS)
README
# Family.scss
[](https://badge.fury.io/js/family.scss)
[](https://badge.fury.io/bo/family.scss)
[](https://travis-ci.org/LukyVj/family.scss)
[](https://gitter.im/LukyVj/family.scss?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
#### Version [v1.0.8](https://github.com/LukyVj/family.scss/releases)
Family.scss is a set of **26** smart Sass mixins which will help you to manage the style of `:nth-child`'ified elements, in an easy and classy way.
Website : [https://lukyvj.github.io/family.scss/](http://lukyvj.github.io/family.scss/)
## Installation
### Regular
- Clone the project
- `$ middleman` ( You don't use middleman ? Goto [https://middlemanapp.com/](https://middlemanapp.com/) )
### Alternative install
- `$ npm install family.scss`
- `$ bower install family.scss`
- `gem install family-rails` ([maintained by pzi](https://github.com/pzi/family-rails))
Family.scss on [npm](https://www.npmjs.com/package/family.scss)
## Usage
First of all, you need to import Family.scss into your project. If you're using [eyeglass](http://eyeglass.rocks/) you can import it as such:
```scss
@import "family";
```
Otherwise import the [Family.scss source file](https://github.com/LukyVj/family.scss/blob/master/source/src/_family.scss).
Then you can use the mixins right away on your stylesheets.
Input :
```scss
ul li {
background: blue;
@include first(3) {
background: blue;
}
}
```
Output :
```sass
ul li {
background: blue;
}
ul li:nth-child(-n + 3) {
background: blue;
}
```
### Why only Sass ?
It's true, I did it for Sass, but some awesome contributors extended it to :
- [Stylus](https://github.com/nusususuzu/family.styl)
## Stargazers over time
[](https://starchart.cc/LukyVj/family.scss)
## Changelogs
### v1.0.8
- Repository consistency | No changes on the lib.
### v1.0.7
- Repository consistency - No big changes on the lib.
- The source `family.scss` file is now on `source/src/_family.scss` instead of `source/src/family.scss`
### v1.0.6
- `each-after()` mixin removed, re-opening [#37](https://github.com/LukyVj/family.scss/issues/37)
### v1.0.5
- `first-child()` mixin added.
- `last-child()` mixin added.
- `each-after()` mixin added, closing [#37](https://github.com/LukyVj/family.scss/issues/37)
- Mention [Holmes.js](https://github.com/Haroenv/holmes) in the about modal.
### v1.0.3
- `first()` mixin now uses `:first-child` if the given parameter is `1`, closing [#10](https://github.com/LukyVj/family.scss/issues/10)
- `n-between()` mixin added, closing [#35](https://github.com/LukyVj/family.scss/issues/35)
- `at-least()`, `at-most()` and `in-between()` quantity queries mixins added, closing [#24](https://github.com/LukyVj/family.scss/issues/24)
- `pair-between()` is now `even
-between()`, closing [#34](https://github.com/LukyVj/family.scss/issues/34)
- `impair-between()` is now `odd-between()`, closing [#34](https://github.com/LukyVj/family.scss/issues/34)
- Source code for the header pattern generator added in the about modal
- Version number added in the footer
- `backdrop-filter` removed from the about page