Prueba SASS

SASSUsos comunes y básicos del lenguaje Sass para desarrollo de estilos Css:Nombre de los archivos: Para la organización de los archivos en Sass, todo archivo que contenga el guión bajo previo al nombre le está diciendo aSass y al Framework de uso que no debe ser compilado y creado en un archivo css.Ej: _archivosass.scss --> no traerá un archivo css \"archivosass.css\".En cambio un archivo sin guión bajo, le estamos indicando que queremos que se cree el archivo css una vez haga la compilación.Ej: styles.scss --> creará el archivo css \"styles.css\".Uso de variables: Para el uso de menos líneas y de casos repetitivos en CSS, Sass nos permite la creación de variables para cierta cantidad deparámetros que vayamos a usar durante el desarrollo del proyecto. En Magento, este archivo principal se llama \"_var.scss\" dentro de la carpeta scssdentro del tema del sitio.Toda variable se escribe con el signo de peso '$' previo al nombre que le denominemos. $colordelsitio: #FF00FF; .main { background-color: $colordelsitio; }Importar archivos, librerías, sass, css: En cualquier archivo sass (.scss) podemos hacer la importación de algún otro archivo que nos interese paratraernos variables, funciones u otros parámetros que no queramos volver a escribir. En Magento, el archivo que hace la mayor parte de lasimportaciones es \"_framework.scss\", el cual luego es importado en casi todos los archivos \"*.scss\" que se usan en el tema. @import \"nombredelarchivo.scss\"; @import \"_framework.scss\";Nesting: Sass nos permite hacer un orden alternativo de nuestros códigos Css. Se puede hacer árbol de contenidos con tabulaciones que permitenindicar que todo lo que se encuentre dentro de un llamado padre pertenece a él y no tenemos que repetir líneas de código. Ej: Pagina 1

En Sass= .main { .col-left { background-color: #000000; color: $colordelsitio; width: 30%; } .col-main { background-color: #999999; color: $colordelsitio; width: 70%; a{ text-decoration: none; color: #333333; } } } En Css= .main .col-left { background-color: #000000; color: #FF00FF; width: 30%; } .main .col-main { background-color: #999999; color: #FF00FF; width: 70%; } .main .col-main a { text-decoration: none; color: #333333; }Ampersand: El uso del ampersand en Sass nos indica que se está repitiendo el nombre de la case padre antes de su siguiente clase o atributo, se usa\"&\" dentro del nesting y nos deja usarlo cuantas veces sea necesario para indicar los llamados de estilos a los atributos o divs que queramos. a{ color: #000; &:hover { color: #333; text-decoration: none; } &:active { color: $colordelsitio; } }Extend: Sass nos permite extender llamados de previas clases ya escritas en nuestro archivo .scss, es decir si ya tenemos un llamado ya hecho sobreuna clase y queremos es reusar las mismas reglas y sólamente agregarle una línea más para otro #id o clase, usamos @extend nombre-de-la-clase; . Pagina 2

Sass= .error { color: #000; background-color: #FFF; font-size: 14px; } .grave-error { @extend .error; font-weight: bolder; } Css= .error, .grave-error { color: #000; background-color: #FFF; font-size: 14px; } .grave-error { font-weight: bolder; }Mixin: Los mixin son creación de llamados comunes en css donde se pueden ubicar varias líneas de código que serán comúnmente usadas dentro delproyecto. Una vez tengamos denominado un mixin, podemos incluirlo cuantas veces necesitemos dentro de nuestro archivo scss con @includenombre-del-mixin($variable-del-mixin); dentro de nuestra clase.En Magento al usar Compass como Framework se basa mayormente en los Mixin que trae ya pre-hechos (podemos ubicarlos en: http://compass-style.org/reference/compass/css3/), cualquier mixin adicional se agregará dentro de la carpeta \"mixin\" dentro de nuestro proyecto en \"scss\" con el nombre delarchivo que creemos, recordar luego importarlo dentro del archivo \"_framework.scss\". @mixin border-radius($variable) { border-radius: $variable; -webkit-border-radius: $variable; -ms-border-radius: $variable; -o-border-radius: $variable; } .main { @include border-radius(20px); } En Css= .main { border-radius: 20px; -webkit-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; }RGBA Color: No hace falta en Sass ubicarlo con los valores rgb, al ponerlo en Hex, el lo compilará y lo creará en rgb, el segundo valor dentro delparéntesis será la opacidad que tendrá el color en el sitio. Pagina 3

Sass= .main { background: rgba(#333,0.5); } Css= .main { background: rgba(51,51,51, 0.5); }Porcentajes: Sass trae consigo el cálculo de porcentajes para las medidas que le especifiquemos. Esto puede ser muy útil para cálculos de layouts Responsive dentro de nuestro Magento para no tener problema al momento de llevar el diseño lo más parecido en cuanto a medidas posible. Usamos lafunción \"percentage($valor1/$valor2)\" Sass= .col-left { width: percentage(440px/1440px); } .col-main { width: percentage(1000px/1440px); } Css= .col-left { width: 30.556%; } .col-main { width: 69.444%; }Si queremos redondearlos al próximo valor, sea mayor o menor, más cercano a los decimales, ubicamos \"round\": Sass= .col-left { width: round(percentage(440px/1440px)); } Css= .col-left { width: 31%; }Funciones: Como nueva implementación en Sass, diferente a Css, es el poder crear funciones que nos devuelvan un resultado impreso en nuestra hojade estilos. Para crear una nueva función ubicaremos \"@function nombre-de-la-funcion($valor1,$valor2) {}\" y dentro de nuestros corchetesubicaremos lo que debe imprimir la misma.En Magento se encuentra una carpeta con funciones ya predeterminadas, en esa carpeta podremos ubicar archivos nuevos con nuestras funciones ausar en el proyecto o expandir las que ya están. Pagina 4

@function text-contrast($background-color,$variable) { @return ( $background-color + $variable ); } .main { color: text-contrast(#111,#333); } Css= .main { color: #444; }También podemos establecer variables numerales que darán resultado a otro color que en Hex quizás para el momento de desarrollar el código no losepamos: .main { color: text-contrast(#111,100); } Css= .main { color: #757575; }Placeholder Selectors: en las nuevas versiones de Sass, podemos implementar selectores dentro de nuestros llamados, algo muy parecido a lasfunciones y mixin, pero directamente dentro de nuestra clase. Usaremos para ello el prefijo de porcentaje \"%\" y seguidamente el nombre de nuestroselector. Pagina 5

Sass=/*Creamos el selector*/#main %blue { color: #FFF; background-color: blue; font-size: 14px;}/*lo ubicamos en las clases*/.sign { @extend %blue;}.box { @extend %blue;}Css=#main .sign, #main .box { color: #fff; background-color: blue; font-size: 14px;} Pagina 6