Premiers pas avec Sass Installation et les bases

Dans ce post, nous allons discuter d’un préprocesseur CSS appelé Sass ou Feuilles de style syntaxiquement impressionnantes.

Si vous avez suivi nos précédents articles sur LESS, nous sommes sûrs que vous connaissez le Préprocesseur CSS. Sass et LESS sont tous deux des préprocesseurs CSS qui élargissent principalement la façon dont nous composons les CSS simples-statiques de manière plus dynamique à l'aide de langages de programmation tels que Variables, Mixins et Fonctions..

Installer Sass

Avant de pouvoir composer Sass, nous devons l'installer. Sass est construit sur Ruby. Si vous travaillez sur un Mac, il y a des chances que Ruby soit déjà installé. Si vous pouvez installer Ruby sous Windows, utilisez ce programme d'installation Ruby..

Une fois l'installation terminée, vous pouvez accéder à Terminal (sur un Mac) ou à l'invite de commande (sous Windows), puis taper la ligne de commande suivante:

Sur Mac;

 sudo gem installe sass

Sur Windows;

 bijou installer sass

Si l'installation réussit, vous recevrez la notification suivante dans votre invite de terminal / de commande.

Ensuite, nous devons sélectionner le répertoire à surveiller par Sass à l’aide de la commande suivante:

 sass --watch path / sass-directory

La ligne de commande ci-dessus surveillera chaque .scss/.toupet fichiers dans chemin / répertoire et chaque fois que l'un des fichiers de ce répertoire est modifié, Sass met à jour les fichiers correspondants ou en crée un s'il n'en existe aucun..

Si nous avons besoin de Sass pour générer les fichiers dans un répertoire spécifique, nous pouvons le faire de cette façon;

 sass --watch path / sass-directory: chemin / css-directory

Nous pouvons également regarder un fichier spécifique plutôt que le répertoire, avec cette ligne de commande;

 sass --watch path / sass-directory / styles.css

Si la commande watch réussit, quelque chose comme cette notification ci-dessous apparaîtra dans votre invite de terminal / de commande.

Lectures complémentaires: Compiler automatiquement des fichiers Sass avec Sass 3

Sass Applications

Toutefois, si vous détestez utiliser Terminal ou Invite de commandes, vous pouvez utiliser certaines applications pour Sass. L'option gratuite est Scout; il est construit sur Adobe Air afin qu'il puisse être exécuté sur tous les systèmes d'exploitation (Windows, OSX et Linux).

Cependant, il est très lent car certains ont déjà signalé.

Donc, si vous n'en avez pas la patience, il existe également des options payantes. Le prix varie pour chaque application, Compass.app coûte 10 $, Fire.app, 14 $ et Codekit pour 25 $..

Surlignage de code

Bien que Sass soit principalement une extension CSS, votre éditeur actuel peut ne pas mettre en évidence la syntaxe correctement. Heureusement, il existe déjà des packages pour presque n'importe quel éditeur de code permettant .toupet ou .scss surlignage de code.

Si vous travaillez avec Sublime Text 2 comme moi, vous pouvez utiliser ces packages; Sublime Text HAML & Sass et Sublime Text 2 Sass Package, et pour vous faciliter la tâche, vous pouvez installer l'un de ces packages via Package Control.

Pour les autres éditeurs de code, voir ci-dessous ou essayez Googling pour cela..

Celui-ci est un excellent tutoriel de screencast pour travailler sur Sass avec Dreamweaver.
Mode Sass pour Coda. Mais, il semble que ce mode ait été intégré à Coda à partir de la version 2
TextMate Official SCSS Bundle
Sucre Espresso
Bundles InType

Langue sass

Sass et LESS partagent en fait des langues communes, en voici quelques unes..

Variables

 $ couleur-base: # 000; $ width: 100px;

La seule différence avec les variables LESS est que la variable dans Sass est définie avec un $ signe.

Règles de nidification

 en-tête largeur: 980px; hauteur: 80px; nav ul list-style: none; rembourrage: aucun; marge: aucune;  li display: inline; une text-decoration: none;

Mixins et fonctions

 @mixin border-radius ($ radius) -moz-border-radius: $ radius; -webkit-border-radius: $ radius; -ms-border-radius: $ radius; border-radius: $ radius;

Des opérations

 li width: $ width / 5 - 10px;

Déclaration conditionnelle

 @si légèreté ($ color-base)> = 51% background-color: # 333333;  @else background-color: #ffffff;

Dans MOINS, vous pouvez faire la même chose avec l'expression Guard, ce dont nous avons parlé dans ce tutoriel..

Pensée finale

Et c'est tout. Dans le prochain article, nous allons commencer à explorer les langues Sass et son compagnon, Compass. Restez à l'écoute.