Share
Dans la première partie de cette série, j'ai donné un aperçu rapide des préprocesseurs CSS populaires LESS et SASS. J'ai également partagé quelques-uns des cadres dans lesquels ils sont utilisés.
Je prévois de plonger plus profondément dans LESS et de parler des parties de la langue que j'utilise le plus souvent. Je prévois également de vous montrer comment commencer à l'utiliser avec CodeKit.
Creusons!
Personnellement, j'utilise MOINS pour la plupart des projets WordPress. Je passe beaucoup de temps à travailler avec Standard, qui utilise Bootstrap comme cadre de choix..
Depuis que Bootstrap utilise LESS pour compiler son CSS, j’ai appris à utiliser son .Moins fichiers pour faire des modifications. Je connais d’autres concepteurs et développeurs Web qui préfèrent utiliser Foundation. Depuis que la Fondation utilise le SASS, ils ont appris à l'utiliser à la place.
Personnellement, je commence à travailler sur un autre projet Web qui utilise le SASS et il a été relativement facile de comprendre les choses en raison de mon expérience avec LESS.
Les variables sont assez explicites. Vous pouvez créer une variable quelque part dans votre .Moins fichier, puis référencez-le à d’autres endroits de ce fichier ou dans d’autres fichiers. J'ai tendance à l'utiliser pour les couleurs, les polices, les rembourrages et les marges.
Voici un exemple:
// Variables @red: # ff0000; @vert: # 00ff00; @blue: # 0000ff; // Styling // Liens a color: @blue; a: visité color: @blue;
Cela va ensuite compiler à ceci:
a color: # 0000ff; a: visité color: # 0000ff;
Si vous voulez changer la couleur des deux styles de lien, il vous suffit de changer la variable:
@bleu
de
# 0000ff
à
# 0000a4
Vous modifiez en un seul endroit, recompilez et vous avez changé toutes les occurrences de cette variable dans le fichier..
Une autre façon d'utiliser ces variables serait également d'utiliser un nom plus sémantique, comme:
@couleur primaire
et
@secondaryColor
Vous pouvez ensuite utiliser ces variables dans votre code. Lorsque votre concepteur propose ces couleurs, vous pouvez les modifier une seule fois, les recompiler, puis vous avez terminé.!
L’imbrication est utilisée comme une logique d’imbrication dans un sinon bloquer dans votre PHP ou JavaScript: vous définissez votre sélecteur de niveau supérieur comme .poster, puis placez les autres sélecteurs à l'intérieur. Cela éliminera le besoin de taper à plusieurs reprises .poster devant vos autres sélecteurs, comme ceci:
// Post .post padding: 20px; .post-header margin: 20px 0;
Cela va ensuite compiler à ceci:
.post padding: 20px; .post .post-header margin: 20px 0;
Vous pouvez aussi utiliser Et concaténer des sélecteurs aussi. Un exemple pourrait être si vous vouliez cibler des widgets spécifiques dans votre barre latérale. Supposons que vous souhaitiez attribuer un style différent à la couleur d'arrière-plan des widgets Recent Posts et Recent Comments. Vous pouvez effectuer les opérations suivantes dans MOINS:
.widget padding: 20px; & .widget_recent_entries background-color: white; & .widget_recent_comments background-color: black;
Cela compilerait ceci:
.widget padding: 20px; .widget.widget_recent_entries background-color: white; .widget.widget_recent_comments background-color: black;
Vous pouvez également l'utiliser pour des pseudo-classes telles que :flotter, :actif, :a visité, :avant, et :après.
// lie a color: blue; &: hover couleur: rouge; &: visité couleur: rouge;
Cela compilerait à ceci:
a couleur: bleu; a: hover color: red; a: visité couleur: rouge;
Les mixins sont essentiellement un certain nombre d'attributs de style que vous souhaitez regrouper. Un bon exemple de cela concerne les attributs qui diffèrent d’un navigateur à l’autre, comme le rayon de la bordure..
Au lieu d'avoir à vous souvenir de chacun, vous pouvez appeler votre mixin et il vous fournira chaque attribut. Voici un exemple:
// Mixin .border-radius border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; // Widget .widget .border-radius;
Cela compilera à ce qui suit:
.widget border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;
Et si vous vouliez utiliser le rayon de la bordure plusieurs fois dans votre .Moins déposer mais vous voulez des montants différents pour chacun? C'est à ce moment-là que vous utiliseriez un mixin paramétrique.
Cela signifie simplement que vous pouvez réutiliser un mixin et lui transmettre un argument à utiliser. Voici un exemple:
// Mixin .border-radius (@radius: 4px) border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; // Widget .widget .border-radius (); // Post .post .border-radius (8px);
Cela compilerait à ceci:
.widget border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; .post border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;
Voici un exemple d'utilisation de variables, d'imbrication et de mixins en même temps:
// Variables @ widget-recent-posts-border-radius: 4px; @ widget-recent-posts-background-color: blanc; @ widget-recent-posts-link-color: @blue; @ widget-recent-comments-border-radius: 8px; @ widget-recent-comments-background-color: noir; @ widget-recent-comments-link-color: @red; // Colors @blue: # 0000ff; @red: # ff0000; // Mixins .border-radius (@radius: 4px) border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; // Widgets .widget & .widget_recent_entries couleur d'arrière-plan: @ widget-recent-posts-background-color; .border-radius (@ widget-recent-posts-border-radius); ul li a color: @ widget-recent-posts-link-color; & .widget_recent_comments background-color: @ widget-recent-comments-background-color; .border-radius (@ widget-recent-comments-border-radius); ul li a color: @ widget-recent-comments-link-color;
Qui seraient tous compiler dans ceci:
.widget.wiget_recent_entries background-color: white; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; .widget.widget_recent_entries ul li a color: # 0000ff; .widget.wiget_recent_comments background-color: black; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; .widget.widget_recent_entries ul li a color: # ff0000;
Il est extrêmement facile de configurer votre projet CodeKit. Vous pouvez simplement faire glisser votre dossier dans CodeKit ou cliquer sur le bouton plus en bas à gauche, puis sélectionner un dossier dans le navigateur de fichiers..
Une fois cette opération effectuée, CodeKit analysera automatiquement tous les fichiers de ce dossier, puis les regroupera dans les catégories suivantes:
Vous avez donc importé vos fichiers de projet. Ensuite, nous allons définir le chemin de sortie de votre .Moins des dossiers. Je suggère d'avoir un css dossier et un Moins dossier à l'intérieur de celui-ci. Vous voudrez vous assurer que tous vos fichiers se trouvent dans cette Moins dossier pour pointer vers votre style.less fichier.
Vous voudrez passer à la vue Styles. Nous voudrons avoir le style.less fichier être compilé dans le dossier racine de votre thème en tant que style.css. Pour ce faire, vous voudrez faire un clic droit sur le style.less fichier et sélectionnez "Définir le chemin de sortie… ". Cela fera apparaître un navigateur de fichiers.
Ensuite, vous voudrez cliquer sur dans le nom du fichier de sortie et du texte d'extension. Une fois que vous faites cela, il peut se remplir automatiquement style.css pour vous. Si ce n'est pas le cas, vous voudrez entrer style.css. Enfin vous allez cliquer sur Sélectionner sauver.
Nous y sommes presque! Ensuite, nous devrons sélectionner un paramètre de compilation. L’écran des paramètres de compilation s’affiche lorsque vous cliquez sur un bouton. .Moins fichier. Nous avons trois styles de sortie disponibles:
Sélectionnez l'une des options ci-dessus et cliquez sur "Compiler". Vous devriez recevoir une notification que votre style.less fichier a compilé.
Si toute votre syntaxe est correcte, votre compilation sera réussie. S'il y a des erreurs, il vous retournera à la Bûche afficher et vous donner le numéro de ligne et l'explication de l'erreur.
Si tout se compile correctement, vous devriez pouvoir ouvrir votre style.css fichier et voir la sortie. En modifiant votre .Moins fichiers et les sauvegarder, CodeKit recompilera automatiquement vos fichiers.
Remarque: assurez-vous de ne pas modifier le style.css fichier, car dès que vous recompilez votre .Moins fichiers, vos modifications seront annulées.
Nous avons maintenant approfondi nos connaissances sur LESS et analysé quelques-unes des fonctionnalités les plus populaires. J'ai expliqué quelques raisons pour lesquelles j'ai personnellement choisi d'utiliser LESS dans mes projets WordPress et comment utiliser CodeKit pour compiler tous mes fichiers..
Dans le prochain article, je détaillerai comment structurer votre.Moins'fichiers et les connecter tous ensemble.
Accentsconagua