Felipe at 20:40, 18 October 2017

2017-10-18T20:40:48Z

← Older revision		Revision as of 20:40, 18 October 2017
Line 187:		Line 187:
	* http://compass-style.org/, sitio oficial de Compass.		* http://compass-style.org/, sitio oficial de Compass.
	* http://thesassway.com/, tutoriales.		* http://thesassway.com/, tutoriales.

			[[Category:SASS]]
			[[Category:Compass]]
			[[Category:CSS]]

Felipe: Created page with "'''Importante''': Este artículo hace referencia a Sass como la sintaxis usada en archivos ''.scss'' no ''.sass''. ==Configuración== ===Instalación=== Para instalar Compas..."

2014-07-21T23:06:08Z

Created page with "'''Importante''': Este artículo hace referencia a Sass como la sintaxis usada en archivos ''.scss'' no ''.sass''. ==Configuración== ===Instalación=== Para instalar Compas..."

New page

'''Importante''': Este artículo hace referencia a Sass como la sintaxis usada en archivos ''.scss'' no ''.sass''.

==Configuración==

===Instalación===
Para instalar Compass ver [[Compass y Sass, Instalación]].

===Configurar un proyecto===
Para configurar un proyecto que use Compass se usa un archivo config.rb que debe estar ubicado en la carpeta desde donde se ejecuta el programa. Este comportamiento se puede sobre escribir usando el parámetro <code>-c archivoDeConfiguracion</code>.

===Usar Compass con NetBeans===
Se puede configurar NetBeans para que transforme los archivos de Compass al ser modificados y salvados. Para esto hay que entrar en ''Preferencias/Miscellaneous/CSS Prepropcessors'' y rellenar el campo que dice "''Sass Path:''" con lo siguiente:
<source lang="bash">
/usr/bin/sass --compass
</source>

Esta parte de NetBeans está pensada para Sass, el proyecto sobre el cual se basa Compass y para hacer que Sass funcione como compass se le pasa el argumento --compass. Es posible que esto no funcione en todos los casos, pero en el momento de escribir esto no se vieron problemas de compatibilidad entre ''compass'' y ''sass --compass''.

Probado con:
* NetBeans 8.0

==Syntaxis==

===Comentarios===
Se pueden usar comentarios en Sass de la forma:
* <code>/* comentario */</code>, este tipo de comentario es pasado al archivo generado.
* <code>// comentario</code>, este tipo de comentario '''no''' es pasado al archivo generado.

===@import (importar archivos)===
Sass permite importar archivos con lo que se puede logar:
* Crear un solo archivo a partir de varios.
* Reutilizar código en diferentes partes.

Para importar se usa el comando <code>@import</code> junto al archivo a importar.

'''Nota''': Por defecto Compass genera archivos ''.css'' adicionales para cada archivo importado, si no es el comportamiento deseado usar partials (más abajo).

Ejemplo:
<source lang="css">
/* inserta el contenido del archivo foo.scss en el actual */
@import "foo.scss";
</source>

[http://sass-lang.com/documentation/file.SASS_REFERENCE.html#import Más info].

====Partial (archivos parciales)====
Los ''partials'' son archivos que no se generan al momento de compilar y esto es util para no crear archivos innecesarios.
<source lang="css">
/* inserta el contenido del archivo _foo.scss en el actual */
@import "_foo.scss";
</source>

====Nested import====
Se puede importar archivos adentro de un definición de css.
<source lang="css">
a {
@import "_foo.scss";
}
</source>

===Variables===
Las variables deben empezar con $.
<source lang="bash">
$width: 5em;
#main {
width: $width;
}
</source>

[http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variables_ Más info]

===Nesting (anidado)===
La idea del ''nesting'' es especificar el estilo para un selector y adentro de la especificación agregar información para otro selector. Esto hace que se cree información para el primer selector y luego para el segundo selector solo cuando este se encuentra adentro del primero. De esta forma, se ahorra tiempo de escritura, el código generado es limpio y la lectura del CSS se hace sencilla.

Por ejemplo para obtener este código:
<source lang="css">
.post {
border-radius: 3px;
background: #FFF8FF;
border: 1px solid #EFC6F3;
padding: 15px;
color: #333333;
}
.post .title, .post .alt-title {
color: #000000;
font-size:20px;
}
.post .alt-title {
border-bottom:1px solid #EFC6F3;
}
</source>

Se puede usar el siguiente código de Sass:
<source lang="css">
$border: 1px solid #EFC6F3;
.post {
border-radius: 3px;
background: #FFF8FF;
border: 1px solid $border;
padding: 15px;
color: #333333;
.title {
color: #000000;
font-size:20px;
}
.alt-title {
@extend .title;
border-bottom:1px solid $border;
}
}
</source>

[http://thesassway.com/beginner/the-inception-rule Más info].

===Mixins (estilos reusables)===

Los Mixins son bloques de estilos que se puede utilizar en diferentes partes del ''.scss''.

Por ejemplo el siguiente es un ''mixin'' llamado ''large-text''.
<source lang="css">
@mixin large-text {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: #ff0000;
}
</source>

El uso del ''mixin'' anterior podría ser como el siguiente ejemplo.
<source lang="css">
.page-title {
@include large-text;
padding: 4px;
margin-top: 10px;
}
</source>

El resultado sería el siguiente.
<source lang="css">
.page-title {
font-family: Arial;
font-size: 20px;
font-weight: bold;
color: #ff0000;
padding: 4px;
margin-top: 10px; }
</source>

De acuerdo al ejemplo, cada vez que necesite formatear algo como ''large-text'' solo necesito usar el ''mixin''.

[http://sass-lang.com/documentation/file.SASS_REFERENCE.html#mixins Más info]

===Herencia===
En Sass se puede heredar el estilo de otro elemento usando el comando <code>@extend</code>, además permite agregar estilo adicional luego de la herencia.

El siguiente código:
<source lang="css">
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
</source>

Genera el siguiente css.
<source lang="css">
.error, .seriousError {
border: 1px #f00;
background-color: #fdd;
}

.seriousError {
border-width: 3px;
}
</source>

[http://sass-lang.com/documentation/file.SASS_REFERENCE.html#extend Más info]

==Referencias==
* http://sass-lang.com/, sitio oficial de Sass.
* http://sass-lang.com/documentation/, documentación de Sass.
* http://compass-style.org/, sitio oficial de Compass.
* http://thesassway.com/, tutoriales.

Compass y Sass, Configuración y uso - Revision history

Felipe at 20:40, 18 October 2017

Felipe: Created page with "'''Importante''': Este artículo hace referencia a Sass como la sintaxis usada en archivos ''.scss'' no ''.sass''. ==Configuración== ===Instalación=== Para instalar Compas..."