Préprocesseur CSS: vue d'ensemble, la sélection, l'application

Absolument tous les concepteurs Web expérimentés utilisent le préprocesseur. Il n'y a aucune exception. Si vous voulez réussir dans cette activité, ne pas oublier ces programmes. À première vue, ils peuvent causer une horreur novice calme – il est trop semblable à la programmation! En fait, vous pouvez traiter toutes les fonctionnalités de préprocesseur CSS pour environ un jour, et si vous essayez, puis quelques heures. À l'avenir, ils vont simplifier considérablement votre vie.

Comment avez-CSS préprocesseur

Pour mieux comprendre les caractéristiques de cette technologie, plonger brièvement dans l'histoire de la présentation visuelle des pages Web.

Quand ne fait que commencer l'utilisation massive de l'Internet, pas de feuilles de style n'existaient pas. Exécution des documents dépendait entièrement du navigateur. Chacun d'entre eux avaient leurs propres styles, qui ont été utilisés pour le traitement de certaines balises. Par conséquent, les pages se voient différemment selon l'ordre dans lequel le navigateur que vous les ouvrez. Le résultat – le chaos, la confusion, des problèmes pour les développeurs.

En 1994, le scientifique norvégien Håkon Lie a développé une feuille de style qui pourrait être utilisé pour l'apparition des pages séparément du document HTML. Les priglanulas idée membres du W3C, qui a immédiatement mis à son terme. Quelques années plus tard, il a publié une première version de la spécification CSS. Puis elle a été constamment amélioré, en cours de finalisation … Mais le concept est resté tout de même: chaque style défini certaines propriétés.

L'utilisation des tables CSS a toujours été problématique. Par exemple, les concepteurs Web ont souvent des problèmes avec le tri et le regroupement des caractéristiques, et l'héritage est pas si simple.

Et puis vint le deux-millième. Les marquages sont de plus en plus ont commencé à se livrer à des développeurs professionnels front-end, ce qui est important d'être des styles de travail flexibles et dynamiques. Au placement Existait des préfixes CSS exigé de temps et de soutien le suivi des nouvelles fonctionnalités du navigateur. Puis, par JavaScript, et les experts Ruby se sont attelés à des affaires, la création d'un préprocesseur – superstructure pour CSS, de nouvelles fonctionnalités sont ajoutées.

CSS pour les débutants: caractéristiques préprocesseur

Ils ont plusieurs fonctions:

• unifier préfixes navigateur et Khaki;

• simplifier la syntaxe;

• donner l'occasion de travailler avec des sélecteurs imbriqués sans erreurs;

• améliorer le style logique.

En bref: le préprocesseur ajoute des fonctionnalités logiques de programmation CSS. Maintenant, le style n'est pas effectuée dans la liste habituelle des styles et avec quelques techniques et approches simples: variables, fonctions, myxine, les conditions de cycles. De plus, la possibilité d'utiliser les mathématiques.

Voyant la popularité de ces compléments, le W3C ont commencé à ajouter progressivement la possibilité d'entre eux dans le code CSS. Par exemple, dans la spécification de sorte qu'il fonction calc (), qui est soutenu par de nombreux navigateurs. Il est prévu que bientôt il sera possible de définir des variables et de créer un hagfish. Mais cela se produira dans un futur lointain, un préprocesseur est déjà là et a fonctionne parfaitement.

préprocesseurs populaire CSS. toupet

Conçu en 2007. A l'origine un composant Haml – un HTML de modèle. Nouvelles fonctionnalités pour les éléments CSS contrôlent les développeurs ont savouré sur Ruby on Rails, qui a commencé à se répandre partout. Le Sass un grand nombre de fonctionnalités qui sont maintenant incluses dans toute préprocesseur: variables, plongement de sélecteurs, hagfish (alors, cependant, ces arguments ne peut être ajouté).

Définitions de variables dans Sass

Les variables déclarées par le signe $. Ils peuvent conserver leurs propriétés et ensembles, par exemple: « borderSolid $: 1px rouge solide; ». Dans cet exemple, nous avons déclaré une variable appelée borderSolid et sauvé sa valeur rouge 1px solid. Maintenant, si dans le CSS, nous devons créer une largeur de bordure rouge de 1px, indique simplement que variable après le nom de la propriété. Après l'annonce des variables ne peuvent pas être modifiées. Il y a plusieurs fonctions intégrées. Par exemple, déclarer une variable avec une valeur de redColor de $ # FF5050. Maintenant, dans le code CSS dans les propriétés d'un élément, l'utiliser pour définir la couleur de la police: p {color: redColor $; }. Voulez-vous expérimenter avec la couleur? Utilisez la fonction assombrir ou éclaircir. Ceci est fait: p {color: assombrir (redColor $, 20%); }. En conséquence, la redColor couleur sera 20% plus léger.

Les Sass nombreuses fonctions intégrées. Vaut au moins les lire, mais mieux – à apprendre.

imbrication

Auparavant, pour indiquer la nidification a dû utiliser une conception longue et mal à l'aise. Imaginez que nous avons une div, qui est p, et en elle, à son tour, réglez la durée. Pour la div, nous devons définir la couleur de police rouge, pour p – jaune, pour la durée – rose. Dans un CSS typique, il se fait comme suit:

div {

couleur: rouge;

}

div p {

couleur: jaune;

}

div p durée {

couleur: rose;

}

Avec CSS préprocesseur tout devient plus facile et plus compact:

div {

couleur: rouge;

p {

couleur: jaune;

.span {

couleur: rose;

}

}

}

Éléments littéralement « investis » les uns les autres.

directives de préprocesseur

Utilisation des directives @import peut importer des fichiers. Par exemple, nous avons fichier fonts.sass qui déclare les styles pour les polices. Connectez au fichier principal style.sass: @import 'polices. Fait! Au lieu d'un seul gros fichier avec les styles que nous avons un peu qui peut être utilisé pour un accès rapide et facile aux propriétés requises.

hagfish

L'une des idées les plus intéressantes. Il permet une ligne de demander un ensemble de propriétés. Faire fonctionner comme suit:

@mixin largeFont {

Font-family: 'Times New Roman';

Font-size: 64px;

line-height: 80px;

font-weight: bold;

}

Hagfish à appliquer à l'élément sur la page, utilisez la directive @include. Par exemple, nous voulons l'appliquer à l'en-tête h1. Nous avons la structure suivante: h1 {@include: largeFont; }

Toutes les propriétés de la myxine sont attribués un élément h1.

Moins préprocesseur

Syntaxe Sass rappelle la programmation. Si vous êtes à la recherche d'une option qui est plus approprié pour les débutants étudier CSS, recherchez moins. Il a été créé en 2009. La principale caractéristique – support CSS syntaxe native, si peu familier avec la programmation Imposer il sera plus facile d'apprendre.

Les variables sont déclarées en utilisant le symbole @. Par exemple: @fontSize: 14px;. travaux nichant sur les mêmes principes que dans Sass. Hagfish sont annoncés comme suit: .largeFont () {font-family: 'Times New Roman'; Font-size: 64px; line-height: 80px; font-weight: bold; }. Pour se connecter, il est pas nécessaire d'utiliser les directives de préprocesseur – il suffit d'ajouter le hagfish nouvellement créé dans les propriétés de l'élément sélectionné. Par exemple: h1 {.largeFont; }.

style

Une autre préprocesseur. Créé en 2011 par le même auteur, qui a donné au monde le Jade, Express et d'autres produits utiles.

Les variables peuvent être déclarées de deux façons – soit explicitement ou implicitement. Par exemple: la police = Times New Roman "; – une option implicite. Mais $ font = 'Times New Roman' – clair. Hagfish sont déclarés et implicitement connecté. La syntaxe est la suivante: redColor () couleur rouge. Maintenant, nous pouvons ajouter l'article, par exemple: h1 redColor ();.

Stylus, à première vue, il peut sembler incompréhensible. Où se trouve les crochets et des points-virgules « indigènes »? Mais il est nécessaire de plonger en elle, tout devient beaucoup plus claire. Rappelez-vous, cependant, que le développement à long terme de ce préprocesseur peut « sevrer » vous utilisez la syntaxe CSS classique. Cela provoque parfois des problèmes lors de devoir travailler avec un style « pur ».

Qu'est-ce préprocesseur choisir?

En fait, il est … peu importe. Toutes les versions offrent sur les mêmes caractéristiques que la syntaxe de chacun est différent. Nous vous recommandons de procéder comme suit:

• si vous – programmeur et que vous voulez travailler avec des styles à la fois dans le code, utilisez le Sass;
• si vous – un codeur et que vous voulez travailler avec des styles comme la mise en page classique, faites attention aux moins;
• si vous aimez le minimalisme, utilisez le stylet.

Pour toutes les variantes d'un nombre infini de bibliothèques intéressantes qui peuvent encore simplifier le développement. Les utilisateurs Sass recommandé de prêter attention à la boussole – un outil puissant avec de nombreuses fonctionnalités intégrées. Par exemple, après l'avoir installé, vous ne serez jamais à vous soucier du préfixe de version du fournisseur. Simplifie travaillent avec des grilles. Il existe des outils pour travailler avec des fleurs, des sprites. Une gamme déjà annoncé hagfish. Donnez cet outil quelques jours – ainsi vous permettra d'économiser beaucoup de temps et d'efforts à l'avenir.