Comenzando con la instalación de Sass y lo básico

En este post, vamos a discutir un preprocesador CSS llamado Sass o Hojas de estilo sintácticamente impresionantes.

Si ha estado siguiendo nuestras publicaciones anteriores en MENOS, estamos seguros de que está familiarizado con el Preprocesador CSS. Tanto Sass como LESS son preprocesadores de CSS que se extienden principalmente a la forma en que componemos CSS liso-estático de forma más dinámica utilizando lenguajes de programación como Variables, Mixins y Funciones..

Instalando Sass

Antes de poder componer Sass necesitamos instalarlo.. Sass se basa en Ruby. Si está trabajando en una Mac, es probable que ya tenga instalado Ruby. Si puede instalar Ruby en Windows, use este Ruby Installer.

Una vez completada la instalación, puede ir a Terminal (en una Mac) o en Símbolo del sistema (en Windows) y luego escribir la siguiente línea de comandos:

En mac;

 sudo gema instalar sass

En Windows;

 gema instalar sass

Si la instalación se realiza correctamente, tendrá la siguiente notificación en su Terminal / Símbolo del sistema.

A continuación, debemos seleccionar qué directorio debe ver Sass usando el siguiente comando;

 sass --watch path / sass-directory

La línea de comando de arriba mirará cada .scss/.hablar con descaro a archivos en ruta / directorio y siempre que se cambie uno de los archivos en ese directorio, Sass actualizará los archivos correspondientes o creará uno si no existe..

Si necesitamos que Sass genere los archivos en un directorio específico, podemos hacerlo de esta manera;

 sass --watch ruta / sass-directory: ruta / css-directory

También podemos ver un archivo específico en lugar del directorio, con esta línea de comando;

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

Si el comando de vigilancia se ejecuta correctamente, aparecerá algo como esta notificación a continuación en su Terminal / Símbolo del sistema.

Otras lecturas: Compilación automática de archivos Sass con Sass 3

Aplicaciones Sass

Sin embargo, si no te gusta trabajar con Terminal o Símbolo del sistema, puedes usar algunas aplicaciones para Sass. La opción gratuita es Scout; está construido en Adobe Air para que pueda ejecutarse en todos los sistemas operativos (Windows, OSX y Linux).

Sin embargo, se ejecuta muy lento como algunos han informado anteriormente.

Entonces, si no tienes la paciencia para hacerlo, también hay algunas opciones de pago. El precio varía para cada aplicación, Compass.app va por $ 10, Fire.app, $ 14 y Codekit por $ 25.

Código resaltado

Aunque Sass es principalmente una extensión CSS, es posible que su editor actual no resalte la sintaxis correctamente. Afortunadamente, ya hay algunos paquetes para casi cualquier editor de código para habilitar .hablar con descaro a o .scss resaltado de código.

Si está trabajando con Sublime Text 2 como yo, puede usar estos paquetes; Sublime Text HAML & Sass y Sublime Text 2 Sass Package, y de una manera más fácil, puede instalar uno de estos paquetes a través de Package Control.

Para otros editores de código, vea más abajo, o intente buscar en Google.

Este es un excelente tutorial de screencast sobre cómo trabajar en Sass con Dreamweaver
Modo Sass para Coda. Pero, parece que este modo se ha integrado con Coda a partir de la versión 2.
TextMate Official SCSS Bundle
Espresso Sugar para Sass
Paquetes InType

Lenguaje sass

Sass y LESS en realidad comparten algunos idiomas comunes, a continuación se muestran algunos de ellos.

Variables

 $ base de color: # 000; $ ancho: 100px;

La única diferencia con las variables LESS es que la variable en Sass se define con una PS firmar.

Reglas de anidación

 encabezado ancho: 980px; altura: 80px; nav ul estilo de lista: ninguno; relleno: ninguno; margen: ninguno;  li display: inline; a texto-decoración: ninguno;

Mixins y funciones

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

Operaciones

 li width: $ width / 5 - 10px;

Sentencia condicional

 @if lightness ($ color-base)> = 51% background-color: # 333333;  @else background-color: #ffffff;

En MENOS puedes hacer algo similar a través de la expresión Guard, que hemos cubierto en este tutorial.

Pensamiento final

Y eso es. En el próximo post, comenzaremos a explorar los idiomas Sass y su compañero, Compass. Manténganse al tanto.