Share
Sass podría potencialmente ser llamado CSS 2.0; Tiene algunas características realmente ingeniosas que le permiten escribir su código en menos tiempo y con más flexibilidad. En el artículo de hoy, estaremos trabajando lo básico.!
Sass es simplemente una forma diferente de trabajar con CSS. Le permite mantener su código CSS muy simple y ayuda a aumentar la legibilidad. Se necesita algo como esto:
Y lo convierte en:
Puedes echar un vistazo a Sass en http://sass-lang.com/
Compass hace que trabajar con Sass sea aún más fácil. El autor, Chris Eppstein, también ha incluido algunos marcos convertidos como Blueprint, YUI y 960.gs. También se integra fácilmente con proyectos basados en Ruby, pero es tan fácil de agregar a cualquier otro proyecto. Compass es de código abierto y está extremadamente bien documentado. Echa un vistazo a la fuente y la documentación.
Tanto Sass (que es parte del Proyecto Haml) como Compass se instalan a través de RubyGems. Si no tiene idea de lo que estoy hablando, consulte el "Paso 1: Instalación de Ruby on Rails" de mi artículo anterior Ruby on Rails for Designers, y siga los pasos hasta que llegue a la sección llamada "Instalación de Rails"..
Para instalar estas dos gemas, solo podemos ejecutar un solo comando:
(sudo) gema instalar haml chriseppstein-compás
Mientras diga que instaló con éxito ambas gemas, está listo para comenzar!
Si está trabajando con un proyecto basado en Ruby, consulte la documentación, ya que le explicará cómo hacerlo funcionar con su marco específico, pero asumiré que estamos trabajando con un HTML simple o un proyecto similar..
El comando Brújula tiene muchas opciones, y si ejecuta brújula --ayuda, podría ver:
FYI: El lado de la línea superior que dice "Cargando gema de borde de Haml". es porque uso la última versión, por lo que no tiene que preocuparse si la suya dice algo diferente.
Ahora vamos a comenzar nuestro proyecto Compass. Para crear, ejecute el siguiente comando (incluido el período final, ¡eso le indica a la brújula dónde queremos hacer nuestro proyecto!)
compás --sass-dir = sass .
Y deberías ver:
Cuando se inicializaba, Compass normalmente usaría el Sass en una carpeta con el nombre src, pero quería cambiar eso, así que agregué la opción. Si observa la carpeta, debería ver un archivo llamado config.rb y otras dos carpetas.
El config.rb es la configuración que se ve en Compass, pero la mayoría de las veces no tendrá que meterse con esto. Además, como dice el resultado del comando de creación, tenemos tres formas de actualizar nuestro CSS desde nuestro Sass:
Accentsconagua
Brújula - utilizando esta opción, tendría que estar en el directorio correcto, y luego Compass compilaría su Sass una vez.compás -u camino / a / proyecto - esto es casi igual al comando anterior, pero no es necesario que esté en el directorio del proyecto, sino que debe pasarlo con el comando.brújula --watch [ruta / a / proyecto] - Este comando es bastante sorprendente ya que vigila cualquier cambio en tus archivos Sass y los recompilará automáticamente cada vez que se detecte un cambio..Ahora que sabe cómo configurar un proyecto, le explicaré algunas de las "reglas" de trabajar con Sass.
Normalmente al escribir CSS, escribirías algo como:
#header width: 900px; fondo: # 111; #header a color: # 000; texto-decoración: ninguno;
Uno de los problemas con eso es que estás repitiendo el mismo nombre muchas veces. Vamos a hacer esto en Sass. Voy a trabajar en el archivo screen.sass, así que elimínelo todo y a su Sass le gustaría:
#header: ancho 900px: fondo # 111 a: color # 000: texto-decoración ninguno
Personalmente, que es mucho más fácil leer y escribir de esta manera, sin llaves o punto y coma. La forma en que Sass entiende la anidación es a través de la sangría..
El primer selector no está sangrado en absoluto, así que el CSS final comienza con eso. Además, todas las propiedades (color, ancho de altura, etc.) comienzan con dos puntos. Así que para las propiedades de #header están indentadas. No importa si usa tabulaciones o espacios, pero debe permanecer constante, de lo contrario verá un error (que mostraré en solo un minuto).
Así que ahora que tiene sus propiedades, tenemos nuestro siguiente selector. Dado que esto tiene una sangría igual a la de las propiedades, la salida de CSS será #encabezar un ...
Ahora que estamos tan lejos, intentemos compilar: (en el directorio de su proyecto)
Brújula
Y voilá!
Digamos que usted no sangró todo lo mismo, Compass cometería un error:
Ahora, una vez que sepa CSS, Sass no será una curva de aprendizaje, ya que la principal diferencia al comenzar son las diferentes reglas de formato. A continuación, trabajaremos con algunas de las partes más avanzadas (¡pero más frescas!) De Sass.
Una característica impresionante de Sass es su capacidad para usar variables. Un ejemplo:
!link_color = #fff #header: ancho 900px: fondo # 111 a: color =! link_color: text-decoration ninguno
Recopilando esto, te daría:
Puede que te estés riendo de este título, pero es verdad, ¡puedes hacer matemáticas en Sass! Para esta demostración, usaremos el modo interactivo de Sass, así que ejecute:
sass -i
Y un poco de desorden te daría:
O un enfoque más visual:
# 111 - # 999 = # 000
# 111 + # 999 = #aaa
# 398191 + # 111 = # 4a92a2
# 398191 - # 111 = # 287080
Además de la suma y la resta, también puedes multiplicar y dividir:
# 398191/2 = # 1c4048
# 398191 * 2 = # 72ffff
Para salir del modo interactivo de Sass, pulse la tecla Control-C, escriba "Fin" y presione Entrar.
Si alguna vez has oído hablar de mantener tu código DRY, DRY significa "no te repitas". Los mixins te permiten hacer precisamente eso. Por ejemplo, con la creciente popularidad de las esquinas redondeadas, es posible que desee crear una mezcla para manejar eso, por lo que en algún lugar (no debajo de un selector) agregaría:
= redondeado: radio del borde 4px: -moz-border-radius 4px: -webkit-border-radius 4px
Y para usar, harías algo como:
#encabezado: ancho 900 px: fondo # 111 + redondeado
Y cuando se compila:
Digamos, sin embargo, que es posible que desee que el radio del borde sea variable, así que puede esperar que una mezcla pase algunos valores. Cambiando nuestro mixin, se vería como:
= redondeado (! radius = 4px): border-radius =! radius: -moz-border-radius =! radius: -webkit-border-radius =! radius
Y luego, para usarlo, podría usar lo que hicimos antes, y luego el valor se establecería de forma predeterminada en 4px, de lo contrario:
#header: ancho 900px: fondo # 111 + redondeado (8px)
Sass también tiene la capacidad de importar otros archivos Sass, así que digamos que desea importar un archivo (al igual que este archivo Sass), agregaría:
@import reset.sass
Esta característica es realmente agradable ya que le brinda la posibilidad de mantener estilos extraños fuera de su archivo principal. Por ejemplo, también podría mantener un archivo sass de mixins que copió en proyectos y luego una simple importación agregaría ese código, no copiar y pegar.
¡Espero que entiendas lo básico de usar Sass y Compass y posiblemente lo uses en tu próximo proyecto! Ahora, si usted es como yo cuando encontré a Sass y dijo "¡No necesito esto!", Inténtelo. Lo cambié para todos mis proyectos recientes y realmente disfruto trabajar con él.
Aquí hay algunos enlaces que pueden ayudarte en el camino:
