Share
Susy est un ensemble puissant de mixins Sass pour la création de dispositions basées sur une grille..
En quoi Susy est-elle si géniale? Nous allons vous montrer les bases du travail avec Susy dans ce tutoriel, mais voici une liste de professionnels à prendre en compte:
Ces trois simples avantages sont amplement suffisants pour justifier de jeter un coup d'œil à Susy. Commençons!
Tout d'abord, vous devez être suffisamment familiarisé avec Sass pour l'écrire et le compiler. Au moment de la rédaction de ce document, Susy implémente certaines fonctionnalités de Sass qui ne sont pas actuellement prises en charge par LibSass (le compilateur Sass basé sur C). Vous devez donc utiliser la version Ruby de Sass. Commencez par installer Sass et apprenez à utiliser le regarder commandement, qui sera essentiel pour travailler avec Sass en général, ainsi que Susy.
Ensuite, vous devrez installer Susy sur votre ordinateur. Sass étant la seule dépendance de Susy, vous pouvez télécharger le fichier zip du projet à partir de GitHub et copier le contenu du dossier Sass dans votre projet..
Ensuite, vous devrez importer Susy dans votre fichier Sass.
@import "susy";
Cela suppose que vous êtes dans un répertoire avec le contenu du dossier Sass.
Susy est fondamentalement un ensemble de mixins, qui sont comme des fonctions dans Sass. Ces mixins sont appelés dans votre code Sass et, lorsque le compilateur Sass est exécuté, il examine les définitions de mixin contenues dans les fichiers Susy et détermine le bon résultat..
Le mixin le plus important à Susy est le envergure mixin, qui ressemble à ceci:
.content @include span (20%);
le envergure mixin s'appuie également sur le récipient mixin, qui configure ce que Susy appelle un "contexte de mise en page".
.conteneur @include conteneur (1180px);
Susy vous permet également de créer des étendues basées sur un nombre prédéfini de colonnes dans un jeu de grilles:
.quart @include span (4 sur 12);
La puissance de Susy va bien au-delà de la moyenne du réseau, permettant des configurations de réseau inférieures à la normale. Commençons par un exemple simple: une mise en page à 9 colonnes.
.neuvième @clude span (1 of 9);
Susy vous permet de configurer la configuration via le $ susy variable. La création d'une carte Sass vous permet de définir un certain nombre de préférences concernant le fonctionnement de Susy pour répartir vos étendues. Susy implémente un disposition mixin qui sort une carte de configuration. Voici les paramètres par défaut, extraits directement de la documentation de Susy.
$ susy: (débit: ltr, math: fluide, sortie: float, position de la gouttière: après, conteneur: auto, position du conteneur: centre, colonnes: 4, gouttières: 0,25, largeur de colonne: faux, global-box -sizing: content-box, last-flow: to, debug: (image: hide, couleur: rgba (# 66f, .25), sortie: fond, bascule: en haut à droite,), use-custom: (background-image : true, options de fond: false, taille de la boîte: true, clearfix: false, rem: true,));
Vous pouvez remplacer tout paramètre spécifique en l'ajoutant à votre propre $ susy carte:
$ susy: (colonnes: 16, dernier flux: de)
Les options couramment modifiées sont le nombre de colonnes, la largeur de la gouttière et le sortie option. Chacune de ces options de configuration fait quelque chose de différent.
Pour les besoins de ce didacticiel, nous ne passerons pas en revue toutes les options de configuration (la documentation de Susy explique très bien). Au lieu de cela, passons en revue quelques exemples pratiques d'utilisation de Susy.
Ici, nous pouvons voir une utilisation de base des mixins span et container:
Remarque: pour apprécier les colonnes en pleine largeur, jetez un œil à la version plein écran.
Il y a quelques choses à noter avec cet exemple. Nous avons créé un exemple artificiel de tableau de bord. Nous avons également inclus un peu de JavaScript qui récupère de fausses images utilisateur à partir de l'API uifaces.com..
Les pièces spécifiques à Susy sont les colonnes. Dans cet exemple, nous avons créé une disposition réactive utilisant le @include span () syntaxe. Nous utilisons également les capacités d'imbrication de SCSS à quelques endroits. Notez que Susy s’intègre parfaitement dans votre syntaxe de requête multimédia classique. Nous avons créé un conteneur sur le .Statistiques section utilisant @include conteneur;.
Il convient également de noter qu'il existe des colonnes imbriquées dans cet exemple particulier; la .avatar les éléments sont imbriqués dans une autre colonne Susy, et cela fonctionne parfaitement car Susy utilise par défaut les largeurs de fluide.
Ensuite, nous pouvons voir une utilisation de la sténographie de Susy pour la présentation avec une grille comportant des colonnes plus grandes au milieu qu'à l'extérieur..
Dans cet exemple, nous utilisons différentes options qui devraient vous sembler nouvelles. Premièrement, nous créons notre balisage en utilisant Haml. Haml est un substitut de balisage HTML sensible à l’espace et basé sur Ruby. Pensez-y comme à un pré-processeur pour HTML.
Regardons ce que notre exemple crée.
.liste de briques
Cela crée un Cette ligne en retrait répète tout ce qui est imbriqué à l'intérieur du même renvoi 30 fois. Cela signifie que tout ce qui est sorti sera à l'intérieur de la division que nous avons créée ci-dessus avec Nous voyons cela à l'intérieur de notre Une autre partie importante de ces lignes est la La grille de Susy est unique dans cet exemple. nous installons une variable de grille avec la ligne: Cette variable sera transmise à Susy dans notre Nous utilisons ensuite cette grille tout au long de l’exemple, plaçant notre Voici le même exemple, avec une mise en page asymétrique différente. Comme vous pouvez le constater, les grilles non conventionnelles sont simples à réaliser, et Susy fait du contrôle puissant de la grille une tâche agréable.. Susy fournit un moyen plus souple et moins avisé de créer vos propres dispositions de grille sans vous obliger à adopter un ensemble prédéterminé de CSS. Grâce à cette flexibilité, Susy peut être rapidement apprise et intégrée à un projet sans s’engager pleinement à l’utiliser dans chacune des déclarations CSS que vous créez.. Que vous estimiez que Susy vous convient ou non, en tant que développeur front-end, vous devez au moins connaître tous les outils de prétraitement à votre disposition. Ils deviennent un jeu d’outils clé pour les développeurs modernes.liste de briques.- 30. fois | i |
.liste de briques. le | i | partie passe dans le courant indice, qui est le compte de la boucle, commençant à 0. Donc, par exemple, lors de notre cinquième passage dans la boucle, je serait égal à 4. .col% img src: "http://hhhhold.com/jpeg/700?v=#i"
30 fois boucle. le .col crée un div avec un classe de col. le % img … crée un # , qui vous permet d’imprimer le je variable d'index (on appelle cela interpolation, si vous souhaitez en savoir plus, Hugo Giraudel explique tout ce que vous devez savoir). Nous utilisons cette variable dans l'URL en tant que paramètre pour que les images que nous chargeons ne soient pas toutes identiques.$ grille: (1 2 5 5 2 1);
envergure mixin appelle et lit créer une grille avec six colonnes; la première colonne doit avoir une largeur relative de 1, la deuxième colonne de largeur relative de 2, la troisième colonne de largeur relative de 5, etc...col divs aux positions de départ de la 1ère, 3ème et 5ème colonnes et couvrant 2 colonnes en utilisant le nième enfant Règle CSS. Si nous devions modifier cette même grille pour avoir chaque colonne avec la même largeur de colonne relative, cela ressemblerait à ceci.Conclusion
Accentsconagua