L'essentiel de Ruby on Rails

Styliser les pages avec SCSS

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Les feuilles de style en cascade CSS (Cascading Style Sheets) permettent de créer l'apparence d'un site. Ici, vous ajouterez ces pages vous-même et vous vous initierez au SCSS (feuilles CSS basées sur le langage SASS).
04:39

Transcription

Nous allons dans cette vidéo améliorer un peu le design de notre site. Pour ce faire, nous allons utiliser la technologie SCSS. Elle est, en effet, embarqué par défaut dans les applications Ruby on Rails. Peut-être connaissez-vous déjà CSS. SCSS nous vient de SASS pour Syntactically Awesome Style Sheets. SASS est, pourrions-nous dire, une sorte d’évolution de CSS, et permet d’utiliser notamment des variables et d’autres choses assez utiles pour éviter la duplication de codes en CSS. Cela allège d’autant les feuilles de style et améliore la maintenabilité de votre code. Un autre avantage de la technologie SASS, est que vous pouvez continuer d’utiliser la syntaxe CSS si vous vous sentez plus à l’aise. Ce qui nous intéresse plus particulièrement dans cette technologie est que Foundation l’utilise également. Grâce à cela, nous avons ici un fichier settings qui est généré lors de l’exécution de la commande rails generate foundation:install. Dans ce fichier, vous retrouvez un certain nombre de variables permettant d’agir directement sur les différents éléments de foundation. Nous aimerions, par exemple, modifier la couleur de notre menu et le mettre en noir car nous trouvons cela un peu plus classe. Pour ce faire, rendons-nous ici et effectuons une recherche dans le fichier. Les variables en SCSS s’écrivent avec un $, suivi du nom de la variable, suivi de :. Nous remarquons, par exemple, que le fond du menu est de couleur light gray. Un peu plus haut, nous voyons que la variable black existe également. Remplaçons donc ici light gray par black. Voyons ce que cela donne dans notre site. Nous avons effectivement maintenant la barre de menu qui est en noir. Seulement, il faudrait modifier ces liens qui apparaissent en bleu et le texte ici que nous ne voyons plus, qui est en noir. Pour changer la couleur, nous allons créer notre propre feuille de style. Rendez-vous de nouveau dans votre code. Créez un fichier. Nous l’appellerons header.scss car nous y personnalisons l’en-tête de notre site. J’ai ouvert à droite la page application.html qui nous permet de voir les classes CSS pour pouvoir accéder à nos liens. Nous pouvons maintenant y spécifier la couleur que nous souhaitons leur attribuer. Rafraichissons notre site. Les liens apparaissent désormais bien en blanc. Faisons la même chose pour le texte à gauche. Grâce au CSS, plutôt que de dupliquer cette règle, nous pouvons faire ceci. En CSS, il aurait fallu éventuellement répéter header.menu pour l’élément .menu-text et l’élément a. En SCSS, nous pouvons utiliser plutôt cette syntaxe. Sur notre site, nous voyons désormais que tous nos liens paraissent en blanc ainsi que le texte à gauche. Nous pouvons également rajouter une règle au hover sur le li afin de remodifier la couleur de fond lorsque nous sommes au survol. J’ai mis ici une couleur transparente afin que cela éclaircisse seulement le fond noir lorsque nous sommes en survol de li. Regardons cela. Cela fonctionne très bien. Vous remarquez cependant que la règle s’applique également pour le texte qui n’est pas cliquable ici. Corrigeons cela. Nous pouvons rajouter ici la syntaxe suivante. Si nous testons cela, nous voyons bien que désormais au survol, nous n’avons plus le fond qui apparaît plus clair. La syntaxe avec le signe & fait référence à l’élément parent, à savoir ici li:hover. En rajoutant ici .menu-text, nous sélectionnons les éléments li ayant la classe menu-text et appliquons cette règle en hover. En CSS, il aurait fallu écrire ceci. Remarquez, comme du coup, le code ci-dessus allège nettement votre feuille de style. Enfin, si jamais vous voulez faire appel à des variables qui se trouvent dans le fichier settings.scss, vous pouvez utiliser la méthode import suivie de settings. Une fois fait, vous aurez accès aux variables qui ont été définies dans settings, par exemple la variable $white. Ici, si je n’avais pas accès à la variable $white, Ruby on Rails m’aurait relevé une erreur. Nous avons vu dans cette vidéo comment utiliser les feuilles de style en Ruby on Rails. N’hésitez pas à vous amuser avec, vous en aurez énormément besoin évidemment pour le développement de vos applications web.

L'essentiel de Ruby on Rails

Concevez des applications web évolutives et intemporelles avec Ruby on Rails. Installez l’environnement, réalisez un projet de stack overflow, enrichissez-le, etc.

6h08 (85 vidéos)
Aucun commentaire n´est disponible actuellement

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 !