{"id":7219,"date":"2018-02-06T14:27:46","date_gmt":"2018-02-06T12:27:46","guid":{"rendered":"https:\/\/www.espai.es\/blog\/?p=7219"},"modified":"2021-09-14T16:49:16","modified_gmt":"2021-09-14T14:49:16","slug":"preprocesadores-de-css-descubriendo-sass-1","status":"publish","type":"post","link":"https:\/\/www.espai.es\/blog\/2018\/02\/preprocesadores-de-css-descubriendo-sass-1\/","title":{"rendered":"Preprocesadores de css. Descubriendo Sass (Parte 1)"},"content":{"rendered":"

Un preprocesador\u00a0de css\u00a0es\u00a0una gran herramienta para el desarrollo web front-end. Nos ayuda a escribir el c\u00f3digo y nos ahorra muchas l\u00edneas.\u00a0Su filosof\u00eda es poder superar los l\u00edmites de css y a la vez hacerlo m\u00e1s sencillo y entendible. Pero, \u00bfsignifica esto que debemos usar un preprocesador obligatoriamente? \u00bfEs imprescindible usarlo si queremos dedicarnos al desarrollo web profesionalmente? Lo cierto es que no. Debemos entender que un preprocesador no es m\u00e1s que eso. Algo que como resultado nos dar\u00e1 css normal y corriente. Si sabemos escribir css y lo hacemos bien, el resultado final ser\u00e1 siempre el mismo.<\/p>\n

Por lo tanto, usar un preprocesador como puede ser Less o Sass\u00a0no es imprescindible para el desarrollador font-end. No obstante, si existe algo que facilita nuestro trabajo \u00bfpor qu\u00e9 no usarlo? Todo lo que pueda ayudarnos a maquetar y escribir mejor es bienvenido. La intenci\u00f3n de este art\u00edculo es hacer una aproximaci\u00f3n a este tipo de lenguaje. Este ser\u00e1 el primero de una serie de art\u00edculos donde desgranaremos el lenguaje Sass y estudiaremos las ventajas que nos da.\u00a0En todo caso, una vez conozcamos c\u00f3mo es trabajar con Sass, decidiremos si vale la pena usarlo o no, pero no debemos descartar esta herramientas por miedo o por desconocimiento.<\/p>\n

Sass, gu\u00eda de instalaci\u00f3n<\/h2>\n

Lo primero que haremos ser\u00e1 instalar Sass en nuestro ordenador. Lo que hace sass es procesar un archivo escrito en este lenguaje (con la extensi\u00f3n .scss) y convertirlo a css entendible por el navegador. Para instalarlo podemos ir a su p\u00e1gina oficial:\u00a0https:\/\/sass-lang.com\/install<\/a>. Aqu\u00ed nos indican dos maneras de instalarlo. Lo mejor es instalarlo a trav\u00e9s de ruby<\/em>. En Windows tendremos que instalarlo a trav\u00e9s del ruby installer<\/a>,<\/em> pero aseg\u00farate de bajar la versi\u00f3n 2.4.x<\/strong>, de lo contrario el comando para instalar Sass no funcionar\u00e1. Si eres usuario de Mac est\u00e1s de suerte, ruby<\/em> ya viene preinstalado.<\/p>\n

Una vez instalado ruby<\/em>, s\u00f3lo tendremos que ir a la consola de comandos. (Desde Windows, ejecutando el archivo ‘cmd’. Desde Mac abriendo ‘Terminal.app’). Deberemos escribir:<\/p>\n

gem instal sass<\/pre>\n
Con eso ya estaremos listos para empezar.<\/p>\n
Primeros pasos<\/h2>\n
Lo primero que vamos a haces es crear nuestro primeros estilos. Con ello empezaremos a notar las diferencias entre Sass y css.<\/p>\n
Lo primero que vamos a hacer es crear nuestro archivo Sass. Abrimos nuestro editor de texto y guardamos un archivo con la extensi\u00f3n \u00ab.scss\u00bb. (Si queremos que Sulime Text reconozca el formato y nos coloree el c\u00f3digo, deberemos instalar el paquete de Sass para Sublime).<\/p>\n
Variables<\/h3>\n
Podemos empezar a crear unas cuantas variables. S\u00ed, hab\u00e9is o\u00eddo bien: variables. Podemos decretar algunos valores fijos que podremos llamar en cualquier selector y en cualquier propiedad css que los acepte. Por ejemplo:<\/p>\n
Puedo crear la variable \u00ab$primary-color: coral;\u00bb. Lo \u00fanico que tengo que hacer es decretar una palabra clave a mi elecci\u00f3n con el s\u00edmbolo del d\u00f3lar ($) delante. Luego simplemente bastar\u00e1 con llamarla:<\/p>\n
\r\n.selector { \r\n   color: $primary-color; \r\n   background-color: $primary-color; \r\n} \r\n<\/pre>\n
Esto ya nos da una ventaja enorme. Si quisieramos cambiar el color principal de mi web, lo \u00fanico que tendr\u00edamos que hacer ser\u00eda cambiar el valor de la variable \u00ab$primary-color\u00bb (recordad que el nombre de la variable lo he escogido yo, pero podr\u00eda llamarse de cualquier otra forma). Autom\u00e1ticamente ese valor cambiar\u00eda en todas las propiedades de css que usen la variable.<\/p>\n
Las variables son bastante \u00fatiles s\u00ed, pero es algo que ya pod\u00edamos hacer con css nativo<\/a>. Sin embargo, hacerlo con Sass es mucho mejor debido a que nos ahorramos problemas de compatibilidad con los navegadores (Las variables nativas de css no est\u00e1n soportadas en IE).<\/p>\n
Nesting<\/h3>\n
El nesting es otra de las incre\u00edbles ventajas que nos trae Sass. En css para afectar a una etiqueta o identificador en concreto pod\u00edamos escribir toda la ruta de sus contenedores hasta llegar al elemento. Siendo espec\u00edficos logr\u00e1bamos asegurarnos que s\u00f3lo afect\u00e1bamos al elemento deseado. Para\u00a0hacer nesting en css deb\u00edamos hacer lo siguiente:<\/p>\n
 header nav ul li a {reglas css;} <\/pre>\n
Ten\u00edamos que repetir la ruta una y otra vez hasta llegar al elemento que quer\u00edamos afectar, creando en ocasiones selectores largu\u00edsimos.<\/p>\n
Con Sass podemos hacer algo as\u00ed:<\/p>\n
\r\n\/*VARIABLES*\/\r\n$primary-font: 'Raleway', sans-serif;\r\n$titles-font: 'Abril Fatface', cursive;\r\n$primary-color: coral;\r\n\r\n\/*REGLAS*\/\r\n* {\r\n\tmargin: 0;\r\n}\r\n\r\nbody {\r\n\tfont: 15px $primary-font;\r\n\r\n\ta {\r\n\t\ttext-decoration: none;\r\n\t}\r\n}\r\n\r\nheader {\r\n\tbackground-color: $primary-color;\r\n\tcolor: #fff;\r\n\toverflow: auto;\r\n\tpadding: 1.4rem;\r\n\r\n\t* {\r\n\t\tvertical-align: middle;\r\n\t}\r\n\r\n\th1 {\r\n\t\tfont: $titles-font;\r\n\t\tdisplay: inline-block;\r\n\t}\r\n\r\n\tnav {\r\n\t\tdisplay: inline-block;\r\n\t\tfloat: right;\r\n\t\tmargin-top: 7px;\r\n\r\n\t\tul {\r\n\t\t\tpadding: 0;\r\n\r\n\t\t\tli {\r\n\t\t\t\tdisplay: inline-blocK;\r\n\t\t\t}\r\n\r\n\t\t\ta {\r\n\t\t\t\ttransition: all 0.5s;\r\n\t\t\t\tpadding: 5px 1rem;\r\n\t\t\t\t&:hover {\r\n\t\t\t\t\tbackground-color: rgba(255,255,255,0.8)\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n\r\n<\/pre>\n
Si os fij\u00e1is, podemos escribir selectores dentro de otros selectores. De tal manera que podremos afectar a los links dentro de un nav de la siguiente manera:<\/p>\n
\r\n.contenedeor {\r\n   nav {\r\n      a {\r\n         reglas css de la a;\r\n      }\r\n   }\r\n}\r\n<\/pre>\n
El resultado en css dar\u00e1 el siguiente selector: .contenedor nav a.<\/p>\n
Compilar el archivo a css<\/h2>\n
Una vez hayamos acabado nuestros primeros estilos, querremos probar cu\u00e1l es el resultado final en el navegador. Pero si enlazamos nuestro html a nuestro archivo scss no funciona. Un navegador no puede leer c\u00f3digo scss, necesitamos un archivo en css nativo.<\/p>\n
Para que Sass pueda crear el archivo css deberemos escribir lo siguiente en la consola de comandos (sass –watch *ruta de la carpeta que contiene nuestro scss*:*ruta de la carpeta que tendr\u00e1 el css final*), en mi caso:<\/p>\n
sass --watch scss:css<\/pre>\n
Nota: Para que funcione el comando sass y localice nuestro nuestro archivo, tendremos que haber accedido a la carpeta ra\u00edz de nuestra web mediante el comando cd.<\/p><\/blockquote>\n
\u00a1Hasta aqu\u00ed por hoy! Ya pod\u00e9is practicar con Sass. Pod\u00e9is tomar de muestra el c\u00f3digo de este art\u00edculo y aplicarlo a vuestro html o pod\u00e9is animaros y crear vuestras propias normas. Ver\u00e9is en seguida que es muy sencillo. De hecho si os acostumbr\u00e1is a escribir con Sass ver\u00e9is que es incluso m\u00e1s f\u00e1cil que escribir css.<\/p>\n","protected":false},"excerpt":{"rendered":"
Un preprocesador\u00a0de css\u00a0es\u00a0una gran herramienta para el desarrollo web front-end. Nos ayuda a escribir el c\u00f3digo y nos ahorra muchas l\u00edneas.\u00a0Su filosof\u00eda es poder superar los l\u00edmites de css y a la vez hacerlo m\u00e1s sencillo y entendible. Pero, \u00bfsignifica esto que debemos usar un…<\/p>\n","protected":false},"author":26,"featured_media":7513,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_ef_editorial_meta_date_first-draft-date":"","_ef_editorial_meta_paragraph_assignment":"","_ef_editorial_meta_checkbox_needs-photo":"","_ef_editorial_meta_number_word-count":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[7,4],"tags":[12,15,611],"class_list":["post-7219","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","category-internet","tag-css","tag-html","tag-sass"],"yoast_head":"\nPreprocesadores de css. Descubriendo Sass (Parte 1) - Blog Escola Espai<\/title>\n<meta name=\"description\" content=\"Este ser\u00e1 el primero de una serie de art\u00edculos donde desgranaremos el lenguaje Sass y estudiaremos las ventajas que nos da.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.espai.es\/blog\/2018\/02\/preprocesadores-de-css-descubriendo-sass-1\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Preprocesadores de css. Descubriendo Sass (Parte 1) - Blog Escola Espai\" \/>\n<meta property=\"og:description\" content=\"Este ser\u00e1 el primero de una serie de art\u00edculos donde desgranaremos el lenguaje Sass y estudiaremos las ventajas que nos da.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.espai.es\/blog\/2018\/02\/preprocesadores-de-css-descubriendo-sass-1\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Escola Espai\" \/>\n<meta property=\"article:published_time\" content=\"2018-02-06T12:27:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-09-14T14:49:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2018\/04\/descubriendo-sass.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"508\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Paco Luque\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Paco Luque\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.espai.es\/blog\/2018\/02\/preprocesadores-de-css-descubriendo-sass-1\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2018\/02\/preprocesadores-de-css-descubriendo-sass-1\/\"},\"author\":{\"name\":\"Paco Luque\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/2147604b486e1347f6e764b0d3964725\"},\"headline\":\"Preprocesadores de css. Descubriendo Sass (Parte 1)\",\"datePublished\":\"2018-02-06T12:27:46+00:00\",\"dateModified\":\"2021-09-14T14:49:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2018\/02\/preprocesadores-de-css-descubriendo-sass-1\/\"},\"wordCount\":941,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2018\/02\/preprocesadores-de-css-descubriendo-sass-1\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2018\/04\/descubriendo-sass.jpg\",\"keywords\":[\"CSS\",\"HTML\",\"sass\"],\"articleSection\":[\"Dise\u00f1o Web\",\"Internet\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.espai.es\/blog\/2018\/02\/preprocesadores-de-css-descubriendo-sass-1\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.espai.es\/blog\/2018\/02\/preprocesadores-de-css-descubriendo-sass-1\/\",\"url\":\"https:\/\/www.espai.es\/blog\/2018\/02\/preprocesadores-de-css-descubriendo-sass-1\/\",\"name\":\"Preprocesadores de css. Descubriendo Sass (Parte 1) - Blog Escola Espai\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2018\/02\/preprocesadores-de-css-descubriendo-sass-1\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2018\/02\/preprocesadores-de-css-descubriendo-sass-1\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2018\/04\/descubriendo-sass.jpg\",\"datePublished\":\"2018-02-06T12:27:46+00:00\",\"dateModified\":\"2021-09-14T14:49:16+00:00\",\"author\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/2147604b486e1347f6e764b0d3964725\"},\"description\":\"Este ser\u00e1 el primero de una serie de art\u00edculos donde desgranaremos el lenguaje Sass y estudiaremos las ventajas que nos da.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2018\/02\/preprocesadores-de-css-descubriendo-sass-1\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.espai.es\/blog\/2018\/02\/preprocesadores-de-css-descubriendo-sass-1\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/2018\/02\/preprocesadores-de-css-descubriendo-sass-1\/#primaryimage\",\"url\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2018\/04\/descubriendo-sass.jpg\",\"contentUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2018\/04\/descubriendo-sass.jpg\",\"width\":1024,\"height\":508,\"caption\":\"descubriendo-sass\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.espai.es\/blog\/2018\/02\/preprocesadores-de-css-descubriendo-sass-1\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.espai.es\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Preprocesadores de css. Descubriendo Sass (Parte 1)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.espai.es\/blog\/#website\",\"url\":\"https:\/\/www.espai.es\/blog\/\",\"name\":\"Blog Escola Espai\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.espai.es\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/2147604b486e1347f6e764b0d3964725\",\"name\":\"Paco Luque\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1f139c1b28c03e6963f4e701f000714729510b27ec31d7ff3fd8019fde1330fd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1f139c1b28c03e6963f4e701f000714729510b27ec31d7ff3fd8019fde1330fd?s=96&d=mm&r=g\",\"caption\":\"Paco Luque\"},\"url\":\"https:\/\/www.espai.es\/blog\/author\/paco\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Preprocesadores de css. Descubriendo Sass (Parte 1) - Blog Escola Espai","description":"Este ser\u00e1 el primero de una serie de art\u00edculos donde desgranaremos el lenguaje Sass y estudiaremos las ventajas que nos da.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.espai.es\/blog\/2018\/02\/preprocesadores-de-css-descubriendo-sass-1\/","og_locale":"es_ES","og_type":"article","og_title":"Preprocesadores de css. Descubriendo Sass (Parte 1) - Blog Escola Espai","og_description":"Este ser\u00e1 el primero de una serie de art\u00edculos donde desgranaremos el lenguaje Sass y estudiaremos las ventajas que nos da.","og_url":"https:\/\/www.espai.es\/blog\/2018\/02\/preprocesadores-de-css-descubriendo-sass-1\/","og_site_name":"Blog Escola Espai","article_published_time":"2018-02-06T12:27:46+00:00","article_modified_time":"2021-09-14T14:49:16+00:00","og_image":[{"width":1024,"height":508,"url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2018\/04\/descubriendo-sass.jpg","type":"image\/jpeg"}],"author":"Paco Luque","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Paco Luque","Tiempo de lectura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.espai.es\/blog\/2018\/02\/preprocesadores-de-css-descubriendo-sass-1\/#article","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/2018\/02\/preprocesadores-de-css-descubriendo-sass-1\/"},"author":{"name":"Paco Luque","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/2147604b486e1347f6e764b0d3964725"},"headline":"Preprocesadores de css. Descubriendo Sass (Parte 1)","datePublished":"2018-02-06T12:27:46+00:00","dateModified":"2021-09-14T14:49:16+00:00","mainEntityOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2018\/02\/preprocesadores-de-css-descubriendo-sass-1\/"},"wordCount":941,"commentCount":0,"image":{"@id":"https:\/\/www.espai.es\/blog\/2018\/02\/preprocesadores-de-css-descubriendo-sass-1\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2018\/04\/descubriendo-sass.jpg","keywords":["CSS","HTML","sass"],"articleSection":["Dise\u00f1o Web","Internet"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.espai.es\/blog\/2018\/02\/preprocesadores-de-css-descubriendo-sass-1\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.espai.es\/blog\/2018\/02\/preprocesadores-de-css-descubriendo-sass-1\/","url":"https:\/\/www.espai.es\/blog\/2018\/02\/preprocesadores-de-css-descubriendo-sass-1\/","name":"Preprocesadores de css. Descubriendo Sass (Parte 1) - Blog Escola Espai","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2018\/02\/preprocesadores-de-css-descubriendo-sass-1\/#primaryimage"},"image":{"@id":"https:\/\/www.espai.es\/blog\/2018\/02\/preprocesadores-de-css-descubriendo-sass-1\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2018\/04\/descubriendo-sass.jpg","datePublished":"2018-02-06T12:27:46+00:00","dateModified":"2021-09-14T14:49:16+00:00","author":{"@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/2147604b486e1347f6e764b0d3964725"},"description":"Este ser\u00e1 el primero de una serie de art\u00edculos donde desgranaremos el lenguaje Sass y estudiaremos las ventajas que nos da.","breadcrumb":{"@id":"https:\/\/www.espai.es\/blog\/2018\/02\/preprocesadores-de-css-descubriendo-sass-1\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.espai.es\/blog\/2018\/02\/preprocesadores-de-css-descubriendo-sass-1\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/2018\/02\/preprocesadores-de-css-descubriendo-sass-1\/#primaryimage","url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2018\/04\/descubriendo-sass.jpg","contentUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2018\/04\/descubriendo-sass.jpg","width":1024,"height":508,"caption":"descubriendo-sass"},{"@type":"BreadcrumbList","@id":"https:\/\/www.espai.es\/blog\/2018\/02\/preprocesadores-de-css-descubriendo-sass-1\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.espai.es\/blog\/"},{"@type":"ListItem","position":2,"name":"Preprocesadores de css. Descubriendo Sass (Parte 1)"}]},{"@type":"WebSite","@id":"https:\/\/www.espai.es\/blog\/#website","url":"https:\/\/www.espai.es\/blog\/","name":"Blog Escola Espai","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.espai.es\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/2147604b486e1347f6e764b0d3964725","name":"Paco Luque","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1f139c1b28c03e6963f4e701f000714729510b27ec31d7ff3fd8019fde1330fd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1f139c1b28c03e6963f4e701f000714729510b27ec31d7ff3fd8019fde1330fd?s=96&d=mm&r=g","caption":"Paco Luque"},"url":"https:\/\/www.espai.es\/blog\/author\/paco\/"}]}},"jetpack_featured_media_url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2018\/04\/descubriendo-sass.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/7219","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/users\/26"}],"replies":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/comments?post=7219"}],"version-history":[{"count":9,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/7219\/revisions"}],"predecessor-version":[{"id":12299,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/7219\/revisions\/12299"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media\/7513"}],"wp:attachment":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media?parent=7219"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/categories?post=7219"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/tags?post=7219"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}