Cómo convertir su CSS a Sass & SCSS

CSS es un lenguaje muy simple y sencillo, pero cuando se se está haciendo demasiado larga, digamos de un millar de líneas, se convierte en un mantenimiento de «pesadilla». Todo va a ser muy complicado de mantener, y que se perderá con normas de estilo para mantener el sitio al día. Por esa razón, se crea un pre-procesador de CSS para hacer la escritura CSS programable y más fácil de mantener.

Si usted acaba de hacer el canje desde CSS a Sass, usted podría estar pensando en convertir su viejo CSS en Sass o SCSS. Bueno, si ese es el caso, puede utilizar una herramienta de terceros llamado css2sass.

Usted podría estar pensando en convertir su viejo CSS en Sass o SCSS. Bueno, si ese es el caso, puede utilizar una herramienta de terceros llamado css2sass.

Usando CSS2SASS

Esta herramienta es muy sencilla e intuitiva – Ni siquiera puede que tenga que decir cómo utilizarlo, pero para fines de demostración, vamos a realizar algunas pruebas con la herramienta. En primer lugar, teniendo en cuenta los siguientes códigos CSS:

[css]
header .nav {
margin-top: 100px;
}
header .nav li {
margin-left: 10px;
}
header .nav li a {
height: 30px;
line-height: 10px;
}
[/css]

Nos gustaría convertirla en la sintaxis Sass, que se convierte en:

[css]
header .nav
margin-top: 100px
li
margin-left: 10px
a
height: 30px
line-height: 10px
[/css]

Las reglas de estilo están anidadas bajo selectores anteriores utilizando sangrado para reconocer distinto nivel en cascada. Si lo convertimos en sintaxis SCSS la cascada se diferenciará con llaves, como en CSS.

Las mismas reglas de estilo

Vamos a darle otra oportunidad. Esta vez, tenemos las siguientes dos selectores con las mismas reglas de estilo, y vamos a convertirlo en sintaxis Sass.

[css]
.footer {
color: #b3b3b3;
background-color: #fafafa;
}

.copy {
color: #b3b3b3;
background-color: #fafafa;
}
[/css]

El resultado generado es bastante intuitivo, esta herramienta concatenan los selectores en una sola línea, y los separan mediante una coma, como sigue.

[css]
.footer, .copy
color: #b3b3b3
background-color: #fafafa
[/css]

Aunque, esto no es lo que esperabas realmente. Sería mejor si la salida fuera en Herencia de Selectores, probablemente será algo así como en el siguiente código:

[css]
.inherit1
color: #b3b3b3
background-color: #fafafa
.footer
@extend .inherit1
.copy
@extend .inherit1
[/css]

Combinación de Selector y Pseudo-clases

Por último, nos gustaría tratar de convertir algunas reglas de estilo con la pseudo-clase :hover y la combinación del selector como se muestra a continuación.

[css]
.button:hover {
color: #ffffff;
background-color: #bf813d;
}

.button.active {
background-color: #986731;
}

[/css]

El resultado es el esperado. Esta herramienta anida la pseudo-clase y la combinación del selector como tal.

[css]
.button
&:hover
color: #ffffff
background-color: #bf813d
&.active
background-color: #986731
[/css]

Espacio para mejorar

Esta herramienta tiene algunas limitaciones en el reconocimiento de nuestra estructura en cascada CSS para convertir adecuadamente en sintaxis Sass o SCSS pero sin duda hay margen de mejora. No estoy muy seguro de si es posible la integración de Compass a esta herramienta de conversión. Sería genial, si fuéramos capaces de convertir la iguiente regla CSS3 @font-face:

[css]
@font-face {
DroidSansRegular";
src: url("fonts/DroidSans-webfont.eot");
src: url("fonts/DroidSans-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/DroidSans-webfont.woff") format("woff"), url("fonts/DroidSans-webfont.ttf") format("truetype"), url("fonts/DroidSans-webfont.svg#DroidSansRegular") format("svg");
font-weight: normal;
font-style: normal;
}
[/css]

… En Compass @font-face mixin, es de la siguiente manera:

[css]
@include font-face("DroidSansRegular", font-files("DroidSansRegular-webfont.ttf", "DroidSansRegular-webfont.otf", "DroidSansRegular-webfont.woff"), "DroidSansRegular-webfont.eot", normal);
[/css]

Pero, en general, esta herramienta es una de muchas que hay en la red para los que se acaba de empezar con Sass. Convierte tu viejo CSS y verá cómo se construye en Sass o la sintaxis SCSS.