Need help with family.scss?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

LukyVj
2.3K Stars 135 Forks MIT License 145 Commits 17 Opened issues

Description

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.

Services available

!
?

Need anything else?

Contributors list

# 36,280
Algolia
CSS
React N...
Sass
124 commits
# 20,772
sass-mi...
Sass
Jekyll
Sketch
5 commits
# 5,525
Algolia
React N...
algolia...
google-...
3 commits
# 38,368
Algolia
Ruby
algolia...
Rails
1 commit
# 65,258
Shell
Sass
js
modal-p...
1 commit
# 34,522
JavaScr...
lightbo...
Vue.js
vuex
1 commit
# 3,582
CSS
css-fra...
Sass
syntax-...
1 commit
# 381,192
HTML
Sass
1 commit

Family.scss

npm version Bower version Build Status

Gitter

Version v1.0.8

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 : http://lukyvj.github.io/family.scss/

Installation

Regular

Alternative install

  • $ npm install family.scss
  • $ bower install family.scss
  • gem install family-rails
    (maintained by pzi)

Family.scss on npm

Usage

First of all, you need to import Family.scss into your project. If you're using eyeglass you can import it as such:

scss
@import "family";
Otherwise import the Family.scss source file.

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

Stargazers over time

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

v1.0.5

  • first-child() mixin added.
  • last-child() mixin added.
  • each-after() mixin added, closing #37
  • Mention Holmes.js in the about modal.

v1.0.3

  • first() mixin now uses :first-child if the given parameter is 1, closing #10
  • n-between() mixin added, closing #35
  • at-least(), at-most() and in-between() quantity queries mixins added, closing #24
  • pair-between() is now `even
  • between()`, closing #34
  • impair-between() is now odd-between(), closing #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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.