{"id":15111810,"url":"https://github.com/dimitribouteille/sass-no-duplicate-breakpoints","last_synced_at":"2026-01-19T05:32:31.538Z","repository":{"id":131252969,"uuid":"145979264","full_name":"dimitriBouteille/sass-no-duplicate-breakpoints","owner":"dimitriBouteille","description":"Sass no duplicate breakpoints est une librairie Sass qui permet de regrouper les points de rupture.","archived":false,"fork":false,"pushed_at":"2018-12-12T13:22:44.000Z","size":42,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-02-11T14:56:48.131Z","etag":null,"topics":["css","media-queries","responsive","responsive-css","sass","sass-library","sass-mixins"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dimitriBouteille.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-08-24T10:42:13.000Z","updated_at":"2018-12-12T13:22:46.000Z","dependencies_parsed_at":null,"dependency_job_id":"d1db82fe-d02e-4102-9572-79243fbdf5c5","html_url":"https://github.com/dimitriBouteille/sass-no-duplicate-breakpoints","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimitriBouteille%2Fsass-no-duplicate-breakpoints","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimitriBouteille%2Fsass-no-duplicate-breakpoints/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimitriBouteille%2Fsass-no-duplicate-breakpoints/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimitriBouteille%2Fsass-no-duplicate-breakpoints/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dimitriBouteille","download_url":"https://codeload.github.com/dimitriBouteille/sass-no-duplicate-breakpoints/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247378092,"owners_count":20929293,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","media-queries","responsive","responsive-css","sass","sass-library","sass-mixins"],"created_at":"2024-09-26T00:23:48.436Z","updated_at":"2025-04-05T17:44:44.708Z","avatar_url":"https://github.com/dimitriBouteille.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Sass no duplicate breakpoints\n\nSass no duplicate breakpoints est une librairie Sass qui permet de regrouper les points de rupture.\n\nJusqu'à 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. \nLe but de la librairie est de palier à ce problème en regroupant les mêmes point de rupture.\n\n### Installation\n\nImportez le fichier `responsive/import.scss` dans votre fichier principal sass.\n\n    @import 'pathToResponsive/import\";\n\n### Les points de ruptures\n\nVous 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`.\n\n    $__responsiveQuery : (\n            md-breakpoint : (\n                    query : 'screen and (max-width: 768px)',\n            )\n    ) !default;\n\n`md-breakpoint` correspond au nom du point de rupture. La clef `query` est la régle du point de rupture.\n\n### Ajout d'un point de rupture à un sélecteur\n\nL'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 \nla liste des propriétés. \n\nSi 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)).\n\n**Exemple :**\n\n    .foo{\n      color: red;    \n      @include respond-to(md-breakpoint, (\n        color: blue,\n      ));\n    }\n    \n    .hello {\n      @include respond-to(my-breakpoint, (\n          background: red,\n      ));\n    }\n\n**Généré :**\n\n    .foo {\n        color: red;\n    }\n\n    @media (my-breakpoint) {\n        .foo{\n            color: blue;\n        }\n        .hello {\n            background: red;\n        }        \n    }\n  \n### Générer les points de rupture\n\nLa 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 \naucun 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`.\n\n    @include loadMediaQuery();\n\nSi 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.\nSi un point de rupture n'existe pas, une erreur est levée.\n\n    @include loadMediaQuery(md-breakpoint, lg-breakpoint, ...);\n    \n### Fonctions\n\n- getBreakpointQuery($breakpoint)\n\n    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.\n    \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdimitribouteille%2Fsass-no-duplicate-breakpoints","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdimitribouteille%2Fsass-no-duplicate-breakpoints","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdimitribouteille%2Fsass-no-duplicate-breakpoints/lists"}