Premier site en local sur wordpress

SASS

Posted on by yannick

Sass (Syntactically Awesome Stylesheets) est un langage de génération de feuilles de style

Le site: http://sass-lang.com/

Les feuilles de style CSS ne sont au fond que de longues listes de règles, chacune consistant en un sélecteur et quelques styles à appliquer.

Pour lire ce nouveau langage il nous faut télécharger RUBY; les utilisateurs de Mac ont CodeKit qui est un vrai bonheur.

  • Dans Visual studio code, installer les extensions: Sass et Live Sass Compiler.

Avant de commencer:

  • Ouvrir notre dossier de travail
  • Dedans créer un dossier .vscode
  • Dedans créer un fichier settings.json
  • L’ouvrir et aller dans Live Sass Compile Config
  • Editer en cliquant sur le crayon « LiveSassCompile.setting.formats« 
  • Changer : null  par :« /css » (cela indiquera le nouveau chemin)
  • Ouvrir le fichier .styles.scss et lancer watch Sass dans la barre bleu en bas.

 

En partant d’un projet existant:

  • Créer un dossier de travail www et dedans
  • Créer depuis Visual studio code le dossier .vscode  et dedans le fichier settings.json (nous pouvons dupliquer celui de l’exercice précédant)
  • Créer un dossier css et un dossier scss
  • Dupliquer dans ce dossier scss le contenu du dossier css du projet existant
  • Renommer le fichier styles_communs.css en styles_communs.scss
  • Ouvrir le dossier www avec Visual studio code
  • Ouvrir  styles_communs.scss et lancer watch Sass (dans la bande bleu)
  • Pour travailler ouvrir le fichier html et lancer l’aperçu go live
  • Dans avec Visual studio code, nous pouvons supprimer tous les styles  du dossier d’origine
  • Supprimer aussi les liens de la page HTML et ne laisser que le lien pointant vers, ex:
    <link id= »lienStyles » rel= »stylesheet » href= »css/styles_01.css »>
  • Renommer le styles commun en .scss en rajouter devant: _  afin ne pas régénérer un fichier à chaque fois.
  • Renommer tous les fichiers styles.css en fichier  styles.scss  et placer dedans  au tout début la directive: @import »styles_commun »; (qui fusionnera le scss vers le css avec aussi le style commun.

Nous pouvons travailler sur le fichier scss

  • Les commentaire css: /*  */ (ceci apparaîtrons dans le css.)
  • Les commentaire scss: // (ceci n’apparaîtrons pas dans le css.)

Les variables

Il y a plusieurs possibilités, voici ici quelques exemple.

Déclarer les variables et fonctions.

Couleurs:

$couleurFondPage: white;
$couleurTexte:black;
$couleur02:#567598;
$couleur01:darken($couleur02,15%);
$couleur03:lighten($couleur02,15%);
$couleur04:lighten($couleur02,30%);
$couleur05:#3e546d;
$couleurFondEntete:darken($couleur02,40%) ;
// on peut aussi ajuster les couleurs par rapport à un cercle de couleur $couleur07: adjust-hue($couleur02, 100deg);
// également $couleur07: desaturate(adjust-hue($couleur02, 100deg),30%);
Polices:
$policeDefaut: Roboto,Arial, Helvetica, sans-serif;
$policeCorpsTexte: Georgia, ‘Times New Roman’, ‘Time’;
$policeTitre: $policeDefaut;
Calcules:
$largeurSectionPrincipale: 50%;
$largeurNavigationPrincipale: (100%-$largeurSectionPrincipale)/2;
$largeurAnnnexe: $largeurNavigationPrincipale;
Donner l’ordre.
.entete-page,
.pied-page {
color: $couleurFondPage;
background-color: $couleurFondEntete;
}
.navigation-principale {
float:left;
width:$largeurNavigationPrincipale;
}
Style imbriqué.
.entete-page{
h1 {
margin: 0;
font-size: 3em;
a
{
text-decoration: none;
color: inherit;
&:hover{
color: $couleurFondPage;
background-color: $couleur02;
text-decoration: none;
}
}
}
h2 {
margin: 0;
font-weight: 400;
font-size: 2em;
}
}
& (sélecteur parent)Pour signaler que c’est quand a est survolé et non pas l’élément qui est dans le a, si il n’y était pas.

Les bases d’@extend

La directive @extend de Sass permet à un sélecteur d’hériter des styles d’un autre. C’est particulièrement utile dans une architecture basée sur les composants, en nous permettant de faire des variations à partir d’un composant.

Voici un cas très basique d’extension d’un sélecteur :

.message {
	padding: .5em;
}

.message-error {
	@extend .message;
}

Le résultat en CSS :

.message, .message-error { 
	padding: .5em;
}

Facile, non ? Bien sûr l’extension n’est pas limitée aux classes, vous pouvez étendre à peu près tous les sélecteurs (p.ex. a), les IDs (p.ex. #id) etc. et bien sûr les placeholders qui fonctionnent explicitement ainsi.

 

Média queris

h1 {

font-size:16px;

@media (min-width:992px){

font-size:24px

}

}

 

Mixin

Les Mixins sont des ensembles de propriétés ou de règles que vous pouvez inclure, ou “mixer”, dans d’autres règles. Vous les définissez en utilisant le mot clé @mixin et vous les intégrez en utilisant le mot clé @include.

@mixin clearfix {
&:before,
&:after {
content: » »;
display:table;
}
&:after {
&:before,
&:after {
content: » »;
display:table; clear:both;
}
@media (min-width:992px){
.container {
@include clearfix;
}
}

Ici, un mixin qui applique des coins arrondis de 4px à un élément , suivies par la propriété standard border-radius de CSS3. J’ai également défini le rayon comme une variable, afin de le changer facilement si besoin :


@mixin rounded-corners {
   $rounded-corner-radius: 4px; 
   border-radius: $rounded-corner-radius; 
} 
.button {
   @include rounded-corners; 
}
Exemple de mixin:
Progression vers un menu déroulant:
Exercice(pas simple)
Une partie de la correction de cet exercice (les couleurs choisies ne sont pas forcément pas les même):