Maison > interface Web > tutoriel HTML > Family.scss 简化你子类选择器的 mixins_html/css_WEB-ITnose

Family.scss 简化你子类选择器的 mixins_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-21 08:46:57
original
1907 Les gens l'ont consulté

Family.scss

Versionv1.0.4

Family.scss is a set of 24smart 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

  • Clone the project
  • $ middleman( You don't use middleman ? Goto https://middlemanapp.com/)

Alternative install

  • $ npm install family.scss
  • $ bower install family.scss

Family.scss on npm

Usage

First of all, import the Family.scss source fileinto your project.

Then you can use the mixins right away on your stylesheets.

Input :

ul li {  background: blue;  @include first(3) {    background: blue;  }}
Copier après la connexion

Output :

ul li {  background: blue;}ul li:nth-child(-n + 3) {  background: blue;}
Copier après la connexion

Why only Sass ?

It's true, I did it for Sass, but some awesome contributors extended it to :

  • Stylus

Changelogs

v1.0.3

  • first()mixin now uses :first-childif 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-filterremoved from the about page
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal