https://github.com/dimitribouteille/sass-no-duplicate-breakpoints

Sass no duplicate breakpoints est une librairie Sass qui permet de regrouper les points de rupture.
https://github.com/dimitribouteille/sass-no-duplicate-breakpoints

css media-queries responsive responsive-css sass sass-library sass-mixins

Last synced: about 2 months ago
JSON representation

Sass no duplicate breakpoints est une librairie Sass qui permet de regrouper les points de rupture.

• Host: GitHub
• URL: https://github.com/dimitribouteille/sass-no-duplicate-breakpoints
• Owner: dimitriBouteille
• License: mit
• Created: 2018-08-24T10:42:13.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-12-12T13:22:44.000Z (about 6 years ago)
• Last Synced: 2024-12-19T00:40:10.566Z (about 2 months ago)
• Topics: css, media-queries, responsive, responsive-css, sass, sass-library, sass-mixins
• Language: CSS
• Homepage:
• Size: 41 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Sass no duplicate breakpoints

Sass no duplicate breakpoints est une librairie Sass qui permet de regrouper les points de rupture.

Jusqu'à présent, lors de la création d'un point de rupture pour un sélecteur, Sass générait à chaque fois un nouveau @media, problème: il pouvait y avoir plusieurs fois un même @media. 

Le but de la librairie est de palier à ce problème en regroupant les mêmes point de rupture.

### Installation

Importez le fichier `responsive/import.scss` dans votre fichier principal sass.

    @import 'pathToResponsive/import";

### Les points de ruptures

Vous pouvez créer autant de points de rupture que vous souhaitez, pour cela il suffit d'ajouter une nouvelle entrée dans la variable `$__responsiveQuery`.

    $__responsiveQuery : (

            md-breakpoint : (

                    query : 'screen and (max-width: 768px)',

            )

    ) !default;

`md-breakpoint` correspond au nom du point de rupture. La clef `query` est la régle du point de rupture.

### Ajout d'un point de rupture à un sélecteur

L'ajout d'un point de rupture se fait à l'aide de la mixin `respond-to` qui prendre deux paramètres : en premier `le nom du point du rupture` (ex : md-breakpoint) et en second paramètre 

la liste des propriétés. 

Si le point de rupture n'existe pas dans `$__responsiveQuery`, une erreur est levée ([@error](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#error)).

**Exemple :**

    .foo{

      color: red;    

      @include respond-to(md-breakpoint, (

        color: blue,

      ));

    }

    

    .hello {

      @include respond-to(my-breakpoint, (

          background: red,

      ));

    }

**Généré :**

    .foo {

        color: red;

    }

    @media (my-breakpoint) {

        .foo{

            color: blue;

        }

        .hello {

            background: red;

        }        

    }

  

### Générer les points de rupture

La génération des points de rupture se fait à l'aide de la mixin `loadMediaQuery` qui peut prendre zéro, un ou plusieurs paramétres. Si 

aucun paramètre n'est passés à la mixin, l'ensemble des points de rupture seront générés dans l'ordre des clefs qui se trouve dans `$__responsiveQuery`.

    @include loadMediaQuery();

Si vous souhaitez charger un point de rupture spécifique ou changer l'ordre de chargement des points de ruptures (ex: approche mobile first), il suffit de passer la liste des points de rupture à générer.

Si un point de rupture n'existe pas, une erreur est levée.

    @include loadMediaQuery(md-breakpoint, lg-breakpoint, ...);

    

### Fonctions

- getBreakpointQuery($breakpoint)

    Permet de récupération de la clef `query` d'un point de rupture. Si le point de rupture n'existe pas, une erreur est lévée.