C
codigoadicto
Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
La verdad es que he realizado algunas búsquedas en el foro y no vi tema alguno que tratara de los Preprocesadores de CSS, si aun no lo sabes ¿que son entonces?
Para no hacer el tema largo para mi CSS es un lenguaje un poco estúpido y esto se debe a que en ningún momento podemos usar uso de variables, funciones, operaciones, mixins y usar selectores dentro de otros. Este es el inconveniente que resuelve el uso de usar preprocesadores.
Entre los mas comunes están: LESS, Stylus y SASS.
Para una visualización de lo que hablo un ejemplo en LESS:
Al compilarse a CSS sería algo como esto:
Esto hace que trabajes mas organizado, estructurado, que todo sea optimizado ya que puedes compilar el código a que sea minimizado y que seas mas eficiente cuando trabajas.
¿Donde puedo encontrar herramientas para comenzar a trabajar con esto?
Aquí voy a dejar una lista de artículos, links y videos que te pueden servir para comenzar a trabajar con los preprocesadores.
Herramientas
Sublime Text 2: LESS, Stylus y SASS.
CodeKit (Mac): LESS, Stylus y SASS.
Scout (Mac y PC): SASS
Crunch: LESS
WinLESS: LESS
Artículos:
Usando Mixins en LESS
Sass vs. LESS
Sass vs. LESS vs. Stylus: Preprocessor Shootout
David Walsh on Redesigning with Sass
Using Compass and Sass for CSS in your Next Project
Using LESS as a Live CSS Engine
Videos:
Get Yourself Preprocessing in Just a Few Minutes
LiveReload, a Menu Bar App for Preprocessors and Speedy Development
Quick Tip: Integrate Compass into an Existing CodeIgniter Project
¿Habías visto algo de esto antes?, entonces aporta a la causa, si no lo habías visto comenta lo que piensas.
Update: recientemente he comenzado a utilizar una nueva herramienta, para preprocesar CSS, HTML y JavaScript, se llama Prepros y es fácil de usar, no necesita dependencias de nada.
Para no hacer el tema largo para mi CSS es un lenguaje un poco estúpido y esto se debe a que en ningún momento podemos usar uso de variables, funciones, operaciones, mixins y usar selectores dentro de otros. Este es el inconveniente que resuelve el uso de usar preprocesadores.
Entre los mas comunes están: LESS, Stylus y SASS.
Para una visualización de lo que hablo un ejemplo en LESS:
Insertar CODE, HTML o PHP:
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}Al compilarse a CSS sería algo como esto:
Insertar CODE, HTML o PHP:
#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}Esto hace que trabajes mas organizado, estructurado, que todo sea optimizado ya que puedes compilar el código a que sea minimizado y que seas mas eficiente cuando trabajas.
¿Donde puedo encontrar herramientas para comenzar a trabajar con esto?
Aquí voy a dejar una lista de artículos, links y videos que te pueden servir para comenzar a trabajar con los preprocesadores.
Herramientas
Sublime Text 2: LESS, Stylus y SASS.
CodeKit (Mac): LESS, Stylus y SASS.
Scout (Mac y PC): SASS
Crunch: LESS
WinLESS: LESS
Artículos:
Usando Mixins en LESS
Sass vs. LESS
Sass vs. LESS vs. Stylus: Preprocessor Shootout
David Walsh on Redesigning with Sass
Using Compass and Sass for CSS in your Next Project
Using LESS as a Live CSS Engine
Videos:
Get Yourself Preprocessing in Just a Few Minutes
LiveReload, a Menu Bar App for Preprocessors and Speedy Development
Quick Tip: Integrate Compass into an Existing CodeIgniter Project
¿Habías visto algo de esto antes?, entonces aporta a la causa, si no lo habías visto comenta lo que piensas.
Update: recientemente he comenzado a utilizar una nueva herramienta, para preprocesar CSS, HTML y JavaScript, se llama Prepros y es fácil de usar, no necesita dependencias de nada.
Última edición por un moderador:
