L'essentiel de Sass

Créer le code Sass de l'en-tête

Testez gratuitement nos 1304 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Dans cette vidéo, vous utiliserez Dreamweaver CC 2017 pour écrire le code Sass de l'en-tête de votre site.

Transcription

Maintenant que Dreamweaver est capable de compiler nos fichiers Sass en fichiers CSS et puis surtout de faire ça dans les bons dossiers, bref que tout est configuré convenblement, il est temps de créer des partiels supplémentaires afin de définir maintenant les styles qui seront spécifques à ce site Web. Alorsխ je vais créer ici une première partielle, nouveau fichiers voilà, je vais l'appeler « _main.scss » et puis tout de suite après, je vais m'empresser d'aller dans mon fichier principal « ddxBlog.scss » pour venir ici « import site specific styles », et donc, le premier import que je dois faire c'est l'import de ce fichier « main.scss ». Voilà qui est fait. Alors de nouveau, pour gagner un petit peu de temps je vais ouvrir ce fichier « main.scss » et je vous donne le contenu de ce fichier ici, dans « main.txt ». Je vais ouvrir « main.txt », « Commmande » ou « Ctrl+A» pour tout sélectionner, « Commande » ou « Ctrl+C » pour tout copier. Puis, je vais venir tout coller ici, « Commande » ou « Ctrl+V » dans « main.scss ». Alors, qu'est-ce que je fais ici dans ce fichier ? Je vais d'abord créer un premier style CSS pour « Body ». ça c'est très simple, regardez simplement que je fais réféence à des variables Sass qui se trouvent définies dans mon fichiers « variables.scss ». Ensuite, je crée une classe que j'appelle « .wrapper ». Alors, dans mon fichier HTML j'ai plein d'éléments qui ont cette classe « .wrapper », d'abord j'ai ce « header » qui se trouve ici, j'ai cet élément « Nav », j'ai cet élément « div », j'ai cet élément « section » qui se trouve ici. Tous ces éléments vont être chargés de donner à mon site sa largeur, et de centrer mon site dans la fenêtre du navigateur. Donc, comment je m'y suis pris pour ça ? J'ai d'abord ici une largeur de 100% et ensuite vous voyez que j'ai inclu une première mixin qui s'appelle « center block ». Alors cette mixin, elle est toute simple, vous allez voir ici. Une marge de 0 pixel en haut et en bas et automatique sur les côtés. C'est ça qui me permet de centrer un élément dans son conteneur. Alors, je ne suis pas obligé de faire mixin pour ce genre de choses, mais j'utilise ce petit bout de code tellement souvent que je fais une mixin, et puis si un jour j'ai envie de changer les marges ici, je peux le faire dans un endroit qui est centralisé et qui va mettre mon site à jour en une fois. Alors autre petite chose ici, j'ai une boucle, une boucle « each », alors là, je vais aller voir ce qui se passe au niveau de mes variables parce que vous remarquez que j'ai une variable ici qui se s'appelle « breakpoints ». Cette variable « breakpoints » vous la reconnaissez avec ses parenthèses. C'est une map avec 3 clés, la clé « sm » pour small, « md » pour medium, « xl » pour extralarge avec chaque fois une valeur en pixels qui correspond. Alors, au niveau de « main.scss » , regardez, j'ai utilisé une fonction que nous n'avons pas encors vu, qui s'appelle « map-values ». Alors allons voir dans la docs ce que ça représente, cette fonction. Donc, « map-values » ici retourne une liste de toutes les valeurs qui sont stockées dans une map. Donc si j'applique ça à mon code ici, les valeurs c'est quoi ? C'est 768 px, espace, 1024 px, espace, 1480 px. Donc, ça me donne une liste de ces trois valeurs et vous savez que je peux boucler autour de cette liste. Nous l'avons fait d'ailleurs, dans un chapitre précédent. C'est exactement ce que je fais ici. Pour chaque « breakpoint » à l'intérieur de cette liste de valeurs et dont je crée ici une « média query » pour chacun de ces « breakpoint ». Autre petite chose : j'ai une classe ici qui s'appelle « responsive » que je vais appliquer à tous les éléments que je veux qu'ils soient « responsives » je veux que ces éléments aient une largeur de 100% et une hauteur automaique C'est comme ça, par exemple, qu'on rend des images réactives. Alors ça donne quoi ? Si je vais voir au niveau de mon navigateur, regardez, ça donne déjà pas mal de choses. Voyez que mon site est centré dans la fenêtre et puis si je change la largeur de ma fenêtre, vous voyez que le site les fluides ici pour le plus petit écran et puis après j'ai deux points de ruptures qui arrivent ici. Mon site est déjà réactif. Je vais retourner dans Dreamweaver, créer encore ici une nouvelle partielle que je vais appeler « _header.scss », voilà. De nouveau je vous donne un fichier Text pour ceci, donc ça s'appelle « header.txt », on va ouvrir ceci, « Commande » ou « Ctrl+A » pour tout sélectionner, « Commande » ou « Ctrl+C » pour tout copier, et puis je vais retourner dans « header.scss » , « Commande » ou « Ctrl+V » maintenant, pour tout coller. Dernière petite chose : on va s'empresser de retourner dans le fichier principal pour venir maintenant, bien évidemment, importer « header » Alors, qu'est-ce que je fais dans « header » ? On ne va pas tout passer en revue. Mais regardez, au tout début, je crée ici un sélecteur CSS que j'appele « header » et puis j'ouvre une accolade. Et cette accolade, je la ferme ici tout dans le fond de ce fichier. Alors, cet élément « #header », ça correspond dans mon HTML, vous allez voir à ce « div » . Donc, c'est ce « div » qui porte l'« id header ». Alors, en fait, c'est très courant dans les fichiers SCSS, dans les partielles. Je commence ici par ce sélecteur, j'ouvre une accolade et je la ferme tout dans le fond. Et donc, je définis ce qu'on appelle un « scopp », c'est-à-dire que tous les styles que je vais imbriquer ici, dans ce sélecteur « header », je suis certain qu'ils n'affecteront que cette partie-là de mon code HTML. Et donc, il n'y a absolument aucun risque si je fais une bêtise d'aller affecter d'autres éléments de la page C'est une façon aussi de permettre à chaque partielle de bien rester dans son scopp, de bien affecter uniquement l'élément de la page auquel je fais référence par, le plus souvent, le nom de la partielle. Voilà, je vous invite à faire ça vous-même, à venir inspecter ces différentes partielles, à créer ces différentes partielles vous-même, à copier coller ce qui se trouvent dans les fichiers « txt » et à inspecter tout ça. Je vous retrouve dans quelques instants quand tout ça sera terminé pour une conclusion générale.

L'essentiel de Sass

Abordez et intégrez Sass dans votre flux de travail. Découvrez les options pour compiler votre code Sass en CSS, passez en revue les mécanismes pour le réutiliser, etc.

2h59 (31 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Sass Sass 3.4.22
Spécial abonnés
Date de parution :25 avr. 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !