PDF de programación - Manual oficial de SASS

Manual oficial de SASS

Manual oficial de SASS

Documento realizado basado en la traducción de Librosweb por necesidades
formativas se han eliminado referencias a Ruby que no son necesarias para el

desarrollo web tradicional.

Capítulo 1.Características

Sass (acrónimo de Syntactically Awesome StyleSheets) es una extensión de CSS
que añade características muy potentes y elegantes a este lenguaje de estilos.
Sass permite el uso de variables, reglas CSS anidadas, mixins, importación de hojas
de estilos y muchas otras características, al tiempo que mantiene la
compatibilidad con CSS.

Sass permite organizar mejor las hojas de estilos grandes y permite ser mucho más
productivo con las hojas de estilos pequeñas, sobre todo gracias a la librería
Compass.

En definitiva, Sass incluye las siguientes características:

• 100% compatible con CSS3.
• Permite el uso de variables, anidamiento de estilos y mixins.
•
• Permite el uso de elementos básicos de programación como las directivas de control

Incluye numerosas funciones para manipular con facilidad colores y otros valores.

y las librerías.

• Genera archivos CSS bien formateados y permite configurar su formato.
•

Integración con Firebug gracias a la extensión FireSass.

Capítulo 2. Sintaxis

Sass permite el uso de dos sintaxis diferentes para crear sus archivos. La primera,
conocida como SCSS (del inglés, Sassy CSS) es la que se utiliza en este manual y
es una extensión de la sintaxis de CSS3. Esto significa que cualquier hoja de estilos
CSS3 válida también es un archivo SCSS válido.

Además, SCSS es capaz de entender la mayoría de hacks de CSS y la sintaxis
específica de los navegadores, como por ejemplo la vieja sintaxis
filter
de

Internet Explorer. Obviamente esta sintaxis básica de CSS se ha mejorado con las



Realizado por Imobach Ramírez Fos Más temas en systemctl.ml

1

Manual oficial de SASS

características de Sass explicadas en los siguientes capítulos. Los archivos creados
con esta sintaxis utilizan la extensión .scss.

La segunda sintaxis, conocida como "sintaxis indentada" o simplemente "sintaxis
sass" permite escribir los estilos CSS de manera más concisa. En este caso, el
anidamiento de selectores se indica con tabulaciones en vez de con llaves y las
propiedades se separan con saltos de línea en vez de con puntos y coma.

Algunos diseñadores consideran que esta segunda sintaxis es más sencilla de leer
y más rápida de escribir que SCSS. En cualquier caso, las dos sintaxis tienen
exactamente las mismas funcionalidades y sólo se diferencia en su sintaxis. Los
archivos creados con esta segunda sintaxis utilizan la extensión .sass.

Una de las ventajas de Sass es que los archivos creados con una sintaxis pueden
importar cualquier archivo creado con la otra sintaxis. Además, dispones de una
utilidad para la línea de comandos que te permite convertir una sintaxis en otra:

# Convierte un archivo Sass en SCSS
$ sass-convert estilos.sass estilos.scss


# Convierte un archivo SCSS en Sass
$ sass-convert estilos.scss estilos.sass

Capítulo 3. Usando Sass

Sass se puede utilizar de tres maneras diferentes: 1) en la consola de comandos, 2)
como módulo de Ruby, 3) como plugin de cualquier framework compatible con
Rack (como por ejemplo Ruby on Rails y Merb).

Pero antes de nada tenemos que instalar Ruby.

Independientemente de cómo lo utilices, el primer paso siempre consiste en
instalar Sass con el siguiente comando:
$ gem install sass

Para utilizar Sass en la línea de comandos, simplemente ejecuta el comando
sass:
$ sass hoja_estilos.scss archivo_generado.css

Realizado por Imobach Ramírez Fos Más temas en systemctl.ml

2

Manual oficial de SASS

Si lo prefieres, también puedes añadir la opción –watch para decirle a Sass que
vuelva a generar el archivo CSS cada vez que se cambie la hoja de estilos
original:
$ sass --watch hoja_estilos.scss:archivo_generado.css

Si dispones de un directorio con muchos archivos Sass, también puedes vigilarlos
todos por si se producen cambios en alguno de ellos:
$ sass --watch app/sass:public/stylesheets

Para obtener toda la documentación sobre las opciones disponibles en este
comando, ejecuta lo siguiente:
$ sass –help

Usage: sass [options] [INPUT] [OUTPUT]
Description:
Converts SCSS or Sass files to CSS.
Options:
--stdin Read input from standard input instead of an input file
--trace Show a full traceback on error
--unix-newlines Use Unix-style newlines in written files.
--scss Use the CSS-superset SCSS syntax.
--watch Watch files or directories for changes.
…

Por otra parte, si quieres utilizar Sass directamente en tu aplicación Ruby, sólo
debes instalar la gema, añadirla en tu aplicación con require "sass" y después
utilizar Sass mediante el Sass::Engine:
engine = Sass::Engine.new("#main {background-color: #0000ff}", :syntax => :scss)
engine.render #=> "#main { background-color: #0000ff; }\n"

3.1. Selección de la sintaxis

Los comandos de Sass utilizan la extensión de cada archivo para determinar la
sintaxis que estás utilizando. No obstante, en ocasiones el código Sass no está
definido en ningún archivo y por tanto no es posible determinar la sintaxis
automáticamente.

En estos casos, el comando sass siempre utiliza por defecto la sintaxis tabulada,
pero puedes utilizar la opción —scss para forzar a que el comando utilice la
sintaxis SCSS. Si lo prefieres, tienes disponible otro comando llamado scss que
funciona exactamente igual que el comando sass pero que considera que la
sintaxis por defecto es SCSS.

Realizado por Imobach Ramírez Fos Más temas en systemctl.ml

3

Manual oficial de SASS

3.2. Cacheando los archivos compilados
Por defecto Sass guarda en la caché la compilación de las hojas de estilos y de
los partials. Esto hace que la recompilación de los estilos en las aplicaciones
complejas sea mucho más rápida. Para obtener los mejores resultados, divide las
hojas de estilos grandes en varios archivos pequeños e impórtalos después con la
directiva @import.

Si no utilizas un framework, Sass guarda los archivos cacheados en el directorio
oculto .sass-cache. En Rails y Merb, estos archivos se guardan en tmp/sass-
cache. Para modificar este directorio, utiliza la opción :cache_location. Si quieres
deshabilitar la caché de Sass, establece el valor false en la opción :cache.

3.3. Codificación
Si utilizas Ruby 1.9 o superior, Sass es capaz de determinar automáticamente la
codificación de cada hoja de estilos. Si no, Sass considera por defecto que la
codificación de los archivos es la misma que la codificación por defecto del
sistema operativo.

En la mayoría de los casos esto supone que la codificación por defecto es UTF-8,
que a su vez es la codificación más utilizada en la web. En cualquier caso, para
algunos usuarios la codificación de sus sistemas operativos puede no ser la más
correcta.

Para indicar explícitamente la codificación de las hojas de estilos, añade en ellas
una directiva @charset, tal y como se hace en los archivos CSS normales. Esta
directiva tiene que ser el primer contenido de la hoja de estilos, por lo que debes
añadirla antes que cualquier selector e incluso antes que cualquier comentario.

Ten en cuenta que utilices la codificación que utilices, esta debe ser convertible a
Unicode. Además, Sass no modifica el BOM y cualquier otra codificación Unicode
no compatible con ASCII que puedan contener los archivos. Sass no soporta las
codificaciones UTF-32-2143, UTF-32-3412, EBCDIC, IBM1026 y GSM 03.38
porque Ruby tampoco las soporta y apenas se utilizan en el mundo real.

Realizado por Imobach Ramírez Fos Más temas en systemctl.ml

4

Manual oficial de SASS

3.5.1. Codificación de los archivos compilados
Sass siempre trata de codificar los archivos CSS compilados con la misma
codificación que las hojas de estilo originales. Para que esto sea posible, las hojas
de estilo deben contener la directiva @charset. Además, a menos que la
codificación sea ASCII, a los archivos CSS compilados también se les añade la
directiva @charset.

Si en un archivo importas otras hojas de estilo que incluyen la directiva @charset,
Sass convierte todas esas hojas de estilo a la codificación del archivo principal.

Ten en cuenta que Ruby 1.8 y las versiones anteriores no tienen un buen soporte
para la codificación de caracteres. Por eso Sass puede comportarse un poco
diferente si se ejecuta con Ruby 1.8 o 1.9. En las versiones de Ruby 1.8, Sass
simplemente utiliza la primera directiva @charset que encuentre en cualquier
hoja de estilos, sea la principal o alguna que se ha importado mediante la
directiva @import.

Capítulo 4. Extensiones CSS

Este capítulo explica las características que Sass añade a CSS para hacer que tu
trabajo como diseñador/a sea más productivo.

4.1. Reglas anidadas
Sass permite anidar las reglas CSS para que las hojas de estilos sean más concisas
y fáciles de escribir. A los selectores anidados se les prefija automáticamente todos
los selectores de los niveles superiores. Ejemplo:
#main p {
color: #00ff00;
width: 97%;

.redbox {
background-color: #ff0000;
color: #000000;
}
}

El código Sass anterior se convierte automáticamente en el siguiente código CSS:
#main p {
color: #00ff00;
width: 97%;
}

Realizado por Imobach Ramírez Fos Más temas en systemctl.ml

5

Manual oficial de SASS

#main p .redbox {