Share
Sass pourrait potentiellement s'appeler CSS 2.0; Il dispose de fonctionnalités vraiment astucieuses qui vous permettent d'écrire votre code en moins de temps et avec plus de flexibilité. Dans l'article d'aujourd'hui, nous allons travailler les bases!
Sass est simplement une manière différente de travailler avec CSS. Il vous permet de garder votre code CSS très simple et contribue à améliorer la lisibilité. Il faut quelque chose comme ça:
Et le transforme en:
Vous pouvez vérifier Sass à http://sass-lang.com/
Compass facilite encore plus le travail avec Sass. L'auteur, Chris Eppstein, a également inclus des frameworks convertis tels que Blueprint, YUI et 960.gs. Il s'intègre également facilement aux projets basés sur Ruby, mais est tout aussi facile à ajouter à tout autre projet. Compass est open-source et extrêmement documenté. Découvrez la source et la documentation.
Sass (qui fait partie du projet Haml) et Compass sont tous deux installés via RubyGems. Si vous ne savez pas de quoi je parle, consultez "Étape 1 - Installation de Ruby on Rails" de mon article précédent, Ruby on Rails for Designers, et suivez les étapes jusqu'à ce que vous atteigniez la section "Installation de Rails"..
Pour installer ces deux gemmes, il suffit de lancer une seule commande:
(sudo) gem installer haml chriseppstein-compass
Tant qu'il dit que les deux gemmes ont été installées avec succès, vous êtes prêt à partir!
Si vous travaillez avec un projet basé sur Ruby, consultez la documentation, car elle expliquera comment le faire fonctionner avec votre cadre spécifique, mais je suppose que nous travaillons avec un simple projet HTML ou similaire..
La commande compass comporte de nombreuses options, et si vous exécutez compass --help, vous verrez peut-être:
FYI: La ligne suivante indique "Chargement de la pierre précieuse haml-edge". C’est parce que j’utilise la dernière version, de sorte que vous n’aurez pas à vous en inquiéter si la vôtre dit quelque chose de différent..
Nous allons maintenant commencer notre projet Compass. Pour créer, exécutez la commande suivante (y compris la période de fin, qui indique à Compass où nous voulons créer notre projet!)
boussole --sass-dir = sass .
Et vous devriez voir:
À l’initialisation, Compass aurait normalement par défaut d’avoir le Sass dans un dossier src, mais je voulais le modifier, j’ai donc ajouté l’option. Si vous regardez le dossier, vous devriez voir un fichier nommé config.rb et deux autres dossiers..
Le fichier config.rb est la configuration que Compass examine, mais la plupart du temps, vous n'aurez pas à vous soucier de cela. En outre, comme l'indique la sortie de la commande de création, nous disposons de trois méthodes pour mettre à jour notre code CSS à partir de notre Sass:
Accentsconagua
boussole - En utilisant cette option, vous devriez être dans le bon répertoire, puis Compass compilerait votre Sass une fois..boussole -u chemin / projet / - c'est à peu près la même chose que la commande ci-dessus, mais vous n'avez pas besoin d'être dans le répertoire du projet, mais de le passer avec la commande.compass --watch [chemin / vers / projet] - cette commande est assez impressionnante dans la mesure où elle surveille toutes les modifications apportées à vos fichiers Sass et les recompilera automatiquement chaque fois qu'une modification est détectée.Maintenant que vous savez configurer un projet, je vais vous expliquer certaines des "règles" du travail avec Sass.
Normalement, lorsque vous écrivez CSS, vous écrivez quelque chose comme:
#header width: 900px; background: # 111; #header a color: # 000; text-decoration: aucune;
L’un des problèmes est que vous répétez le même nom plusieurs fois. Faisons-en Sass. Je vais travailler dans le fichier screen.sass, alors supprimez tout et votre Sass aimerait:
# en-tête: largeur 900px: arrière-plan # 111 a: couleur # 000: décoration de texte aucune
Personnellement, il est beaucoup plus facile de lire et d’écrire de cette façon, sans accolades ni points-virgules. Sass comprend la nidification à travers l'indentation.
Le premier sélecteur n'est pas en retrait du tout, donc le CSS final commence par cela. En outre, toutes les propriétés (couleur, hauteur, largeur, etc.) commencent par un signe deux-points. Donc, pour les propriétés de #header, elles sont en retrait. Peu importe si vous utilisez des tabulations ou des espaces, mais vous devez rester cohérent, sinon vous verrez une erreur (que je montrerai dans une minute).
Alors maintenant que vous avez vos propriétés, nous avons notre prochain sélecteur. Comme cela est identique aux propriétés, la sortie CSS sera #header a…
Maintenant que nous sommes si loin, essayons de compiler: (dans le répertoire de votre projet)
boussole
Et le tour est joué!
Disons que vous n'avez pas tout indenté de la même façon, Compass aurait une erreur:
Maintenant, une fois que vous maîtriserez CSS, Sass ne sera plus une courbe d'apprentissage, car la principale différence lors de la mise en route réside dans les différentes règles de formatage. Ensuite, nous travaillerons avec certaines des parties les plus avancées (mais plus cool!) De Sass.
Une fonctionnalité géniale de Sass est sa capacité à utiliser des variables. Un exemple:
!link_color = #fff #header: width 900px: background # 111 a: color =! link_color: text-decoration none
Compiler ceci vous donnerait:
Vous pouvez rire de ce titre, mais c’est vrai, vous pouvez faire des maths avec Sass! Pour cette démonstration, nous utiliserons le mode interactif de Sass, alors lancez:
sass -i
Et un peu déconner vous donnerait:
Ou une approche plus visuelle:
# 111 - # 999 = # 000
# 111 + # 999 = #aaa
# 398191 + # 111 = # 4a92a2
# 398191 - # 111 = # 287080
Outre l’addition et la soustraction, vous pouvez également multiplier et diviser:
# 398191/2 = # 1c4048
# 398191 * 2 = # 72ffff
Pour quitter le mode interactif Sass, appuyez sur Control-C, tapez "end" et appuyez sur Entrée..
Si vous avez déjà entendu parler de garder votre code au sec, DRY signifie "ne vous répétez pas". Les mixins vous permettent de faire exactement cela. Par exemple, avec la popularité croissante des angles arrondis, vous pouvez créer un mixin pour le gérer. Ainsi, quelque part (et non sous un sélecteur), vous ajouteriez:
= arrondi: border-radius 4px: -moz-border-radius 4px: -webkit-border-radius 4px
Et pour utiliser, vous feriez quelque chose comme:
# en-tête: largeur 900px: arrière-plan # 111 + arrondi
Et une fois compilé:
Disons cependant que vous souhaitez peut-être que le rayon de la frontière soit variable - vous pouvez avoir un mélange qui s’attend à recevoir certaines valeurs. En changeant notre mixin, cela ressemblerait à:
= arrondi (! radius = 4px): border-radius =! radius: -moz-border-radius =! radius: -webkit-border-radius =! radius
Et ensuite, vous pourriez utiliser ce que nous faisions auparavant, puis la valeur par défaut serait 4px, sinon:
# en-tête: largeur 900px: arrière-plan # 111 + arrondi (8px)
Sass a également la capacité d'importer d'autres fichiers Sass, alors disons que vous vouliez importer un fichier (de la même manière que ce fichier sass), vous ajouteriez:
@import reset.sass
Cette fonctionnalité est vraiment agréable en vous donnant la possibilité de garder les styles superflus en dehors de votre fichier principal. Par exemple, vous pouvez également conserver un fichier sass mixins que vous avez copié autour de projets, puis une simple importation ajouterait ce code, sans copier-coller..
J'espère que vous comprenez les bases de l'utilisation de Sass et Compass et que vous l'utiliserez éventuellement dans votre prochain projet! Maintenant, si vous êtes comme moi quand j'ai trouvé Sass et que vous avez dit "Je n'ai pas besoin de ça!", Essayez-le. Je suis passé à cela pour tous mes projets récents et j'aime vraiment travailler avec ça.
Voici quelques liens qui peuvent vous aider en cours de route:
