{"id":8617,"date":"2016-03-08T23:16:27","date_gmt":"2016-03-08T22:16:27","guid":{"rendered":"http:\/\/www.palentino.es\/blog\/?p=8617"},"modified":"2016-03-08T23:25:31","modified_gmt":"2016-03-08T22:25:31","slug":"principales-preprocesadores-css-ventajas-entorno-y-enlaces","status":"publish","type":"post","link":"https:\/\/www.palentino.es\/blog\/principales-preprocesadores-css-ventajas-entorno-y-enlaces\/","title":{"rendered":"Principales preprocesadores CSS. Ventajas, entorno y enlaces."},"content":{"rendered":"

Los preprocesadores CSS son herramientas inform\u00e1ticas que nos permiten convertir un determinado lenguaje a otro tipo de ficheros, conocidos como hojas de estilo en cascada o CSS<\/strong>.<\/p>\n

Los m\u00e1s populares y extendidos son LESS<\/strong>, Sass<\/strong> y Stylus.<\/strong><\/p>\n

Por lo tanto lo que realizan es la conversi\u00f3n de un fichero (por ejemplo SCSS<\/strong>) con unas determinadas reglas y programaci\u00f3n a otro de tipo CSS compatible con los navegadores.<\/p>\n

Nos ofrecen nuevas caracter\u00edsticas que aportan mas versatilidad<\/strong> a la hora de crear las CSS. El resultado es el mismo<\/strong>, pero con una facilidad de construcci\u00f3n y claridad mayor.<\/p>\n

Cada preprocesador emplea su propio lenguaje, pero todos ellos exportan a CSS v\u00e1lido. Todos ellos, poseen un lenguaje muy similar al CSS, pero ampliando sus funcionalidades.<\/p>\n

El objetivo de todos ellos es generar un CSS compatible y acorde a la especificaci\u00f3n.<\/p>\n

<\/p>\n

La sintaxis es mas limpia<\/strong>, gracias a que se trabaja con contenido anidado. Posee una mejor gesti\u00f3n de ficheros, y de reutilizaci\u00f3n de c\u00f3digo. Poseen mayor flexibilidad<\/strong> y mantenimiento. Como inconveniente dir\u00eda, que es necesario preparar un entorno de trabajo (no siempre) para su uso lo que conlleva tiempo y aporta algo de complejidad inicial a su uso.<\/p>\n

Comparativa entre dos de los mas extendidos\u00a0Sass<\/strong> y\u00a0LESS<\/strong><\/p>\n

\u00bfCu\u00e1l de los dos mas conocidos es mejor?<\/strong><\/p>\n

Me quedo con Sass, pero LESS\u00a0posee ciertas ventajas respecto a Sass.<\/p>\n

Instalaci\u00f3n.<\/strong><\/p>\n

Es igual de complicado instalar Sass y Less.<\/p>\n

Sass requiere de Ruby<\/a>.<\/p>\n

Less dispone de una versi\u00f3n del lado de cliente en Javascript\u00a0para trabajar sin necesidad de disponer nada en el\u00a0lado del servidor.<\/p>\n

Gesti\u00f3n de errores.<\/strong><\/p>\n

Sass es mas estricto en determinadas circunstancias dejando menor\u00a0margen de error al programador.<\/p>\n

Los errores del compilador en less son mas informativos e \u00fatiles.<\/p>\n

Sintaxis.<\/strong><\/p>\n

Sass es mas consistente, posee mecanismos para construcci\u00f3n de estructuras condicionales, iteraciones, bucles, etc.<\/p>\n

Anidamiento<\/strong><\/p>\n

Sass ofrece ventajas respecto a Less porque permite anidar variaciones de una misma propiedad y compuestas<\/strong>.<\/p>\n

Variables y tipos de datos<\/strong><\/p>\n

Sass proporciona \u201clists\u201d y \u201cmaps\u201d, con capacidad de gesti\u00f3n avanzada mediante funciones predefinidas.<\/p>\n

Less posibilita reglas y selectores como un tipo de variables. Permite adem\u00e1s variables de variables e interpolaciones adicionales.<\/p>\n

Operaciones y unidades<\/strong><\/p>\n

Sass genera al ser mas estricto m\u00e1s errores.<\/p>\n

Less presupone que la primera unidad des la que tiene prioridad en cualquier operaci\u00f3n.<\/p>\n

Funciones predefinidas<\/strong><\/p>\n

Ambos poseen un set bastante amplio.<\/p>\n

Documentaci\u00f3n<\/b><\/p>\n

Less ofrece una mejor documentaci\u00f3n y selector de b\u00fasqueda.<\/p>\n

Frameworks<\/strong><\/p>\n

Bootstrap<\/a> soporta ambos.<\/p>\n

Los dos lenguajes ofrecen herramientas potentes, pero su elecci\u00f3n quedar\u00e1 determinada por nuestras preferencias. Si queremos flexibilidad o libertad es preferible Less, si deseas ser mas estricto Sass.<\/p>\n

Para poder trabajar con estos preprocesadores CSS es necesario disponer de un servidor web<\/strong> similar a Apache.<\/p>\n

Es necesario disponer de node.js<\/strong> para instalar otros componentes para trabajo con less y sass. Una vez instalado, dentro de node se puede instalar Grunt<\/a>, para realizar de forma repetitiva determinadas tareas<\/strong>, como la compilaci\u00f3n<\/strong> del fichero LESS o Sass se cree el fichero o ficheros CSS. Con Grunt nos ahorramos trabajo<\/strong>.<\/p>\n

Estos programas se instalan desde una terminal o cmd<\/strong>.<\/p>\n

Si tenemos instalado node, teclear\u00edamos node \u2013v<\/strong><\/p>\n

Una vez comprobada su funcionamiento, instalamos Grunt<\/p>\n

sudo npm install \u2013g grunt-cli -> Instalamos GRUNT<\/strong><\/p>\n

Despu\u00e9s si quisi\u00e9ramos usar Sass, tendr\u00edamos que instalarlo (less no es necesario).<\/p>\n

La instalaci\u00f3n de Sass se realiza desde Ruby on rails.<\/p>\n

Para comprobar que tenemos ruby instalado, desde una terminal:<\/p>\n

ruby \u2013v<\/strong> ->> En un entorno mac o gnu Linux, seguramente lo tengamos de serie instalado.<\/p>\n

\"Ruby\"<\/a><\/p>\n

Sudo gem install sass<\/strong> -> Es necesario usar el gestor de paquetes de ruby gem<\/strong>.<\/p>\n

Una vez instalado node, tendremos que configurar grunt, para ello existe un fichero llamado gruntfile.js<\/strong> donde se puede configurar su funcionamiento. Ojo tambi\u00e9n una vez instalado grunt, existir\u00e1 al lado un fichero package.json<\/strong>, con las dependencias necesarias que podemos terminar de instalar ejecutando npm install<\/strong><\/p>\n

Otra capacidad existente es la posibilidad de recargar el navegador autom\u00e1ticamente para comprobar los cambios de Grunt<\/strong>, para ello tendremos que instalar un plugin<\/strong> para nuestro navegador. Este plugin es capaz de entender las llamadas de Grunt, el nombre es LiveRoad<\/a><\/strong> (para Chrome ,Firefox, …). El navegador se encargar\u00e1 de escuchar las ordenes de Grunt. Es necesario que dentro del fichero gruntfile.js<\/strong> se deje la opci\u00f3n dentro de watch, livereload a true.<\/p>\n

Por ejemplo, en CSS cuando queremos anidar o crear reglas realizamos un c\u00f3digo de la siguiente forma<\/p>\n

div a {}\r\ndiv p {}<\/pre>\n
El c\u00f3digo en preprocesador seria:<\/p>\n
div \r\n{ a{}\r\n  p{}\r\n}<\/pre>\n
 <\/p>\n
Vemos en este min\u00fasculo ejemplo que no tenemos que repetir estructuras heredadas,<\/strong> y la visibilidad es mejor<\/strong>, entre otras muchas cosas mucho mas profesionales.<\/p>\n
Los Mixings<\/strong> son herramienta que nos permite combinar propiedades de diferentes estilos. Se crea una regla de CSS a partir de un selector, una vez creado el selector, podremos hacer uso de el en otro selector. Es similar a la herencia en OPP<\/strong>. Si existe c\u00f3digo que se comparte se puede usar tambi\u00e9n extends<\/strong>, pero mediante los mixins nos ofrece mas potencia que los extends, para no tener que repetir el uso de propiedades.<\/p>\n
Mediante el uso de variables<\/strong>, podemos realizar reemplazos program\u00e1ticos de la CSS. Mediante las estructuras de control<\/strong>, podemos agilizar la construcci\u00f3n de selectores.<\/p>\n
No solamente podemos trabajar de forma monitorizada<\/strong> con ruby con less o sass, sino que podemos emplear herramientas convencionales u online.<\/strong><\/p>\n
Para LESS<\/strong>, desde la web lesscss.org\/usage\/#online-less-compilers<\/a><\/p>\n
Disponemos de compiladores less online (sugerencias) y editores GUI para less<\/p>\n
Para Sass<\/strong><\/p>\n
http:\/\/sass-lang.com\/install<\/a><\/p>\n
Existen aplicaciones GUI<\/strong> y modo comando.<\/p>\n
Este otro enlace inferior nos muestra una utilidad para trabajar con less, Sass y Coffescript desde Visual Studio.<\/p>\n
www.mindscape.com\/products\/web-workbench<\/a><\/p>\n
La aplicaci\u00f3n Koala<\/strong> es un GUI para Less, Sass, Compass y Coffescript, y puede ser ejecutada en cualquier plataforma.<\/p>\n
Koala-app.com<\/a><\/p>\n
Para Sass existe otra denominada scout<\/p>\n
Mhs.github.io\/scout-app<\/a><\/p>\n
Como compiladores online existen otros 2 bastante conocidos para Sass como son:<\/p>\n
Codepen.io\/pen<\/a><\/p>\n
Otra es sassmeister.com<\/a><\/p>\n
En resumen, LESS\u00a0y Sass nos van a permitir ahorrar tiempo en la construcci\u00f3n de proyectos trabajando con el Frontend<\/strong> donde empleemos\u00a0CSS. El resultado es el mismo si trabajamos sin estos preprocesadores, pero la claridad y legibilidad<\/strong> de construcci\u00f3n, las herramientas disponibles para acelerar, ahorrar tiempo<\/strong> y construir la CSS sumado a la optimizaci\u00f3n , nos llevar\u00e1 a ser mas productivos y organizados.<\/p>\n","protected":false},"excerpt":{"rendered":"
Los preprocesadores CSS son herramientas inform\u00e1ticas que nos permiten convertir un determinado lenguaje a otro tipo de ficheros, conocidos como hojas de estilo en cascada o CSS. Los m\u00e1s populares y extendidos son LESS, Sass y Stylus. Por lo tanto lo que realizan es la conversi\u00f3n de un fichero (por ejemplo SCSS) con unas determinadas reglas y programaci\u00f3n a otro de tipo CSS compatible con los navegadores. Nos ofrecen nuevas caracter\u00edsticas que aportan mas versatilidad a la hora de crear las CSS. El resultado es el mismo, pero con una facilidad de construcci\u00f3n y claridad mayor. Cada preprocesador emplea su propio lenguaje, pero todos ellos exportan a CSS v\u00e1lido. Todos ellos, poseen un lenguaje muy similar al CSS, pero ampliando sus funcionalidades. El objetivo de todos ellos es generar un CSS compatible y acorde a la especificaci\u00f3n.<\/p>\n","protected":false},"author":1,"featured_media":4864,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[707],"tags":[208,708,709],"class_list":["post-8617","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend","tag-css","tag-less","tag-sass"],"_links":{"self":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts\/8617","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/comments?post=8617"}],"version-history":[{"count":6,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts\/8617\/revisions"}],"predecessor-version":[{"id":8624,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts\/8617\/revisions\/8624"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/media\/4864"}],"wp:attachment":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/media?parent=8617"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/categories?post=8617"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/tags?post=8617"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}