Share
Dans ce tutoriel, nous verrons ce qui peut être fait avec les styles Sass flexibles inclus dans le framework Foundation. Beaucoup d'entre eux offrent un ensemble de fonctionnalités plus personnalisable que celui de la version CSS, de plus, il existe des raccourcis qui peuvent être utilisés pour styler rapidement et facilement des éléments tels que la barre supérieure..
Suivez les instructions de la rubrique Configuration de Foundation avec Sass and Compass ou de la documentation de Zurb si vous avez besoin d’aide pour la configuration de Foundation avec Sass. Vous pouvez utiliser la ligne de commande pour commencer à utiliser Compass et Bourbon, ou simplement récupérer les fichiers Sass autonomes de GitHub, les placer dans votre projet et importer ceux dont vous avez besoin..
Commençons par la grille car il s’agit de la base de Foundation. C'est également un excellent composant pour vous montrer à quel point scss / sass peut être flexible.
Par exemple, lorsque vous utilisez les mixins disponibles pour la grille (mixins, ce sont en fait des raccourcis vers du code pré-écrit), vous pouvez créer vos propres classes, voire votre propre grille, en utilisant quelques variables simples. Regardons le premier exemple que Foundation vous donne:
/ * Options de mixage créant des lignes * / @include grid-row ($ behavior); / * La valeur par défaut est false, ce qui introduira les styles de ligne par défaut * / $ behavior: false / * Si l'élément que vous créez en tant que ligne est imbriqué dans un autre élément * / / * qui est également une ligne, vous devez pour ajouter les styles d'imbrication appropriés * / $ behavior: nest / * Vous pouvez utiliser cette option pour réduire les marges du conteneur * / / * Cela s'avère pratique lorsque vous travaillez avec des formulaires dans la grille * / $ comportement: collapse / * Si vous Si vous avez une ligne imbriquée et que vous voulez la réduire, vous devez ajouter cette option * / $ behavior: nest-collapse
Vous pouvez voir ici que nous avons un mixin (référencé par le préfixe du signe '@') qui comporte des crochets contenant une variable. Nous commençons par le mixin @include grid-row, spécifiant ses options entre parenthèses.
Lorsque vous créez un mixin, vous pouvez spécifier des parties du code pré-écrit à modifier chaque fois que vous utilisez ce mixin. Un exemple simple serait de créer un mixin qui ajoute une police avec sa taille, son poids, sa couleur, etc. mais peut-être voulez-vous pouvoir changer la couleur de la police à chaque fois que vous utilisez le mixin. Ce serait ce que vous placez entre parenthèses.
Dans ce cas, nous utilisons une variable dans le code. Vous pouvez utiliser des variables pour stocker toute valeur dans Sass et commencer par un signe '$'. Par exemple:
/ * nous créons ici la police mixin * / @mixin ($ color) font-family: 'Arial'; taille de police: 14px; poids de la police: 500; couleur: $ couleur; / * nous définissons ici une variable à utiliser en son sein * / $ blue = # 0099cc; / * et ici nous utilisons réellement la police mixin * / @include ($ blue);
Donc, dans ce code, nous avons créé un mixin avec l’option de couleur personnalisable, en dessous de laquelle nous avons défini une couleur en utilisant une variable $ bleu puis suivant que nous utilisons réellement le mixin, référençant entre les crochets notre variable $ bleu, ce qui équivaut au code hexadécimal # 0099cc.
Si nous nous référons au premier exemple de code, vous verrez comportement utilisé plusieurs fois. Cela peut sembler un peu étrange et une interprétation courante est "Attendez! N’est-ce pas simplement écraser la variable à chaque fois?". En gros, vous fournissez une valeur pour chaque option dans un type de liste, également appelé tableau. Chaque fois que vous utilisez comportement la sortie correspondra à l'option dans l'ordre dans lequel elles ont été déclarées.
Vous pouvez également voir plusieurs variables dans votre inclusion:
@include grid-column ($ colonnes, $ dernière-colonne); / * L'option la plus couramment utilisée avec une colonne * / / * Cette option définit les propriétés de largeur de la colonne. Utilisez un nombre pour représenter les colonnes * / $ colonnes: # / * Utilisez cette option si vos colonnes ne totalisent pas 12. * / / * Nous faisons en sorte que la dernière colonne par défaut soit float: droit de garder les choses alignées * / / * Si vous ne le souhaitez pas, définissez $ last-column sur true * / $ last-column: false
Pour vraiment mettre cela en perspective, nous allons créer une grille en utilisant seulement du HTML très basique, car les classes ne sont pas aussi proches que nécessaire en raison de tous les raccourcis de style définis dans le code Sass lui-même. Voici un exemple simple pour construire un en-tête.
$ row-width: em-calc (600); $ colonne-gouttière: em-calc (30); $ total-columns: 12! default; en-tête @include grid-row; @include panel; côté @include grid-column (3); Section @include grid-column (9); article @include grid-row; en-tête @include grid-column (2); Div @include grid-column (10);
Vous pouvez voir ici que le code html est minimal et que sass calcule parfaitement l’imbrication. J'ai également défini des valeurs globales pour la largeur maximale, l’espace entre les colonnes et le nombre de colonnes. D'un point de vue HTML, cela permet de gagner beaucoup de temps, mais ces processus de réflexion derrière la mise en page peuvent être un peu déroutants pour commencer. Voyons maintenant les boutons et comment les manipuler avec Sass.
Une des choses intéressantes à propos de Sass est la rapidité avec laquelle vous pouvez styliser vos pages et le temps que vous gagnez sans avoir à dupliquer du code..
Vous pouvez raccourcir facilement le style du bouton en utilisant quelque chose de simple comme:
.votre-nom-classe bouton @include;
Ajoutez quelques options, et dans une seule ligne de code, vous avez répliqué un style prenant six ou sept lignes de CSS, quel gain de temps!
Vous remarquerez également que pour les boutons, de nombreuses options n'existent pas dans la version CSS, ce qui est le cas pour tous les éléments Sass. Cela va vraiment ajouter une couche supplémentaire de liberté par rapport à la version CSS avec laquelle vous avez peut-être déjà travaillé. Vous trouverez ci-dessous un exemple de bouton créé à l'aide de variables, puis identique, mais utilisant des valeurs directes, afin de vous donner une idée précise de leur fonctionnement..
.votre-nom-classe bouton @include ($ padding, $ bg, $ radius, $ pleine largeur, $ désactivé, $ is-input); @include inset-shadow ($ actif); .votre-nom de classe @ bouton d'inclusion (1em, # ca2727, 2px, false, false, false); @include inset-shadow (true);
Ce n’est qu’un exemple simple, mais c’est un exemple que vous utiliserez souvent. Une fois le code compilé, vous obtiendrez CSS comme ceci (et comme vous pouvez l'imaginer, le code de sortie prendrait beaucoup plus de temps à écrire que celui de Sass):
.link style de bordure: solide; largeur de la bordure: 1px; curseur: pointeur; famille de polices: hériter; poids de police: gras; hauteur de trait: normale; marge: 0 0 1,25 m; position: relative; texte-décoration: aucun; text-align: center; affichage: inline-block; rembourrage en haut: 1em; rembourrage à droite: 2em; rembourrage en bas: 1.0625em; rembourrage à gauche: 2em; taille de police: 1.25em; couleur de fond: # ca2727; border-color: # 9f1f1f; Couleur blanche; -webkit-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: 0 1px 0 rgba (255, 255, 255, 0.5) inset; box-shadow: 0 1px 0 rgba (255, 255, 255, 0,5) incrusté;
Bien que beaucoup d’entre vous voient le sass comme une langue d’un autre monde, il est en fait très rapide à comprendre une fois que vous avez écrit quelques lignes. La structure est légèrement améliorée par rapport à CSS et si vous êtes bloqué, vous pouvez utiliser CSS pour utiliser CSS lorsque vous en avez absolument besoin..
Enfin, l’un des éléments les moins écrits sur les fonctionnalités de Sass est la possibilité d’ajouter des fonctions à vos feuilles de style. Ce ne sont pas des fonctions dynamiques sur la page (elles sont exécutées lorsque vous compilez votre code Sass), mais elles offrent des opportunités intéressantes pour gagner encore du temps..
Par exemple, dans Foundation, il existe une fonction intéressante pour convertir px en em. C'est fantastique pour les sites réactifs. il suffit de définir la valeur de base em via:
$ em-base: 16px! default;
Ensuite, chaque fois que vous souhaitez utiliser une valeur em pour laquelle vous devez normalement calculer le pixel à em, utilisez simplement:
hauteur: em-calc (46);
"46" étant le nombre de pixels et em-calc être la fonction. Vous pouvez utiliser cela n'importe où dans votre code Sass où vous auriez besoin d'une valeur de pixel..
Dans le dernier article, j'ai mentionné les compilateurs Sass et les énormes avantages qu’ils offrent par rapport à la compilation manuelle. Cette fois, je vais vous indiquer un outil que j'ai trouvé utile dans presque tous les projets sur lesquels j'ai travaillé..
Principalement lorsque vous parlez de Foundation, vous travaillez avec Sass, CSS, HTML et JavaScript, mais n'oublions pas qu'une grande partie de la conception web tourne autour des images, en particulier des fichiers png et jpg. Il est absolument nécessaire d'avoir des images optimisées pour le Web, c'est pourquoi utiliser soit imageOptim (OS X) ou File Optimizer (Windows)..
Ces outils compresseront les images sans perdre la qualité. C'est en fait très efficace et les taux de compression peuvent être ahurissants, avec des réductions allant jusqu'à 70%. Penses-y; Si vous téléchargez un fichier png à 100 Ko, vous pourrez peut-être consulter un fichier de 30 Ko après la conversion. Cela peut être encore plus efficace si vous utilisez des images sprite.
Nous avons examiné les bases de Sass, comment il devrait être configuré, ce que vous pouvez en faire et comment il peut accélérer votre flux de travail. Dans le prochain article, nous allons passer à quelque chose d'assez excitant; Fondation pour Rails. Cela vous permettra de disposer de fonctions dynamiques intéressantes pouvant s’asseoir aux côtés de vos langages HTML, CSS et JavaScript..
Accentsconagua