{"id":7353,"date":"2018-04-05T10:55:41","date_gmt":"2018-04-05T08:55:41","guid":{"rendered":"https:\/\/www.espai.es\/blog\/?p=7353"},"modified":"2021-09-14T16:49:12","modified_gmt":"2021-09-14T14:49:12","slug":"sass-mixins-extend","status":"publish","type":"post","link":"https:\/\/www.espai.es\/blog\/2018\/04\/sass-mixins-extend\/","title":{"rendered":"Descubriendo Sass (Parte 2). Mixins y Extend"},"content":{"rendered":"<p>Seguimos desgranando Sass. En esta ocasi\u00f3n vamos a ver otra de sus incre\u00edbles ventajas y c\u00f3mo podemos aprovecharla. Vamos a hablar de Mixins y de la funci\u00f3n Extend.<\/p>\n<p>Para ello, ten\u00e9is la gu\u00eda en la web oficial de sass:\u00a0<a href=\"https:\/\/sass-lang.com\/guide\">https:\/\/sass-lang.com\/guide<\/a>.<\/p>\n<p>Tanto los Mixins como el Extend son algo as\u00ed como \u00abfunciones\u00bb para el c\u00f3digo css. \u00bfQu\u00e9 queremos decir con esto? B\u00e1sicamente, nos permiten guardar fragmentos de c\u00f3digo que luego podremos reutilizar dentro del documento, usando una sola l\u00ednea.<\/p>\n<h2>Extend<\/h2>\n<p>La funci\u00f3n Extend es muy sencilla. Podremos crear una especia de \u00abclase\u00bb, como si fuese un objeto en programaci\u00f3n, y un selector podr\u00e1 heredar las caracter\u00edsticas de dicha clase.<\/p>\n<p>Por ejemplo, podremos que hacer que nuestros t\u00edtulos tengan el siguiente formato, independientemente de si es un h2, h3, h4&#8230;<\/p>\n<pre>\r\n%titulos {\r\n\ttext-transform: uppercase;\r\n\tdisplay: inline-block;\r\n\tcolor: #333;\r\n\tborder: 1px solid #333;\r\n}\r\n<\/pre>\n<p>Luego bastar\u00eda con llamar a esta clase dentro de nuestro selector de la siguiente manera.<\/p>\n<pre>\r\nh2.titulo {\r\n\tfont-size: 1.5em;\r\n\t@extend %titulos;\r\n}\r\n<\/pre>\n<p>As\u00ed, podremos crear un estilo predefinido que vayamos a usar varias veces en nuestro dise\u00f1o.<\/p>\n<p>Por ejemplo, podr\u00edamos crear <em>Extends\u00a0<\/em>para elementos en posici\u00f3n absoluta que vayan a estar totalmente centrados, o para hacer capas que cubran totalmente su contenedor.<\/p>\n<pre>\r\n%centrado {\r\n\tposition: absolute;\r\n\ttop: 50%;\r\n\tleft: 50%;\r\n\ttransform: translate(-50%,-50%);\r\n}\r\n\r\n%overlay {\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n\tright: 0;\r\n}\r\n<\/pre>\n<h2>Mixins<\/h2>\n<p>Los Mixins de Sass, hacen algo parecido a lo que hemos visto con Extend. Encapsulan varias l\u00edneas de c\u00f3digo que posteriormente podemos llamar dentro de un selector.<\/p>\n<p>Sin embargo, los Mixins incorporan una novedad. Permiten pasarles un argumento que podr\u00e1 tener un valor distinto cada vez que lo usemos.<\/p>\n<p>Me explico. Los Mixins se crean de la siguiente manera:<\/p>\n<pre>\r\n@mixin border-radius($radius) {\r\n  -webkit-border-radius: $radius;\r\n     -moz-border-radius: $radius;\r\n      -ms-border-radius: $radius;\r\n          border-radius: $radius;\r\n}\r\n\r\n.box { @include border-radius(10px); }\r\n<\/pre>\n<p>Como veis en el ejemplo, al crear el <em>mixin<\/em> utilizamos \u00ab@mixin nombreDelMixin($argumento)\u00bb.<\/p>\n<p>Esto se parece mucho a crear una funci\u00f3n de javascript: creamos la funci\u00f3n y le pasamos un m\u00e9todo, una variable que servir\u00e1 dentro de la funci\u00f3n. Con los Mixins sucede algo similar. Le pasamos una variable interna, de tal manera que el valor de dicha variable lo escogeremos al llamar al\u00a0<em>mixin<\/em> con @include.<\/p>\n<p>\u00bfPara qu\u00e9 pueder servir esto? Tiene much\u00edsimas aplicaciones, pero entre ellas esta el ahorrarnos c\u00f3digo cuando tengamos que usar prefijos. El c\u00f3digo de arriba es una muestra de ello. Como veis el valor del <em>border-radius<\/em> lo declaramos una vez. No obstante, siempre que utilicemos \u00ab@include border-radius\u00bb estaremos usando el prefijo para todos los navegadores, de tal manera podremos hacer\u00a0<em>cross browsing<\/em> de una forma sencilla y c\u00f3moda.<\/p>\n<p>\u00bfNo es genial?<\/p>\n<p>En el siguiente art\u00edculo, veremos\u00a0algunas funciones que nos trae Sass y daremos m\u00e1s ejemplos de c\u00f3mo utilizar este lenguaje con lo que hemos aprendido hasta ahora.<\/p>\n<p>\u00a1Hasta la pr\u00f3xima!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Seguimos desgranando Sass. En esta ocasi\u00f3n vamos a ver otra de sus incre\u00edbles ventajas y c\u00f3mo podemos aprovecharla. Vamos a hablar de Mixins y de la funci\u00f3n Extend. Para ello, ten\u00e9is la gu\u00eda en la web oficial de sass:\u00a0https:\/\/sass-lang.com\/guide. Tanto los Mixins como el Extend&#8230;<\/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":[],"class_list":["post-7353","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","category-internet"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Descubriendo Sass (Parte 2). Mixins y Extend - Blog Escola Espai<\/title>\n<meta name=\"description\" content=\"En esta ocasi\u00f3n vamos a ver otra de sus incre\u00edbles ventajas y c\u00f3mo podemos aprovecharla. Vamos a hablar de Mixins y de la funci\u00f3n Extend.\" \/>\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\/04\/sass-mixins-extend\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Descubriendo Sass (Parte 2). Mixins y Extend - Blog Escola Espai\" \/>\n<meta property=\"og:description\" content=\"En esta ocasi\u00f3n vamos a ver otra de sus incre\u00edbles ventajas y c\u00f3mo podemos aprovecharla. Vamos a hablar de Mixins y de la funci\u00f3n Extend.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.espai.es\/blog\/2018\/04\/sass-mixins-extend\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Escola Espai\" \/>\n<meta property=\"article:published_time\" content=\"2018-04-05T08:55:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-09-14T14:49:12+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=\"2 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\/04\/sass-mixins-extend\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2018\/04\/sass-mixins-extend\/\"},\"author\":{\"name\":\"Paco Luque\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/2147604b486e1347f6e764b0d3964725\"},\"headline\":\"Descubriendo Sass (Parte 2). Mixins y Extend\",\"datePublished\":\"2018-04-05T08:55:41+00:00\",\"dateModified\":\"2021-09-14T14:49:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2018\/04\/sass-mixins-extend\/\"},\"wordCount\":451,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2018\/04\/sass-mixins-extend\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2018\/04\/descubriendo-sass.jpg\",\"articleSection\":[\"Dise\u00f1o Web\",\"Internet\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.espai.es\/blog\/2018\/04\/sass-mixins-extend\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.espai.es\/blog\/2018\/04\/sass-mixins-extend\/\",\"url\":\"https:\/\/www.espai.es\/blog\/2018\/04\/sass-mixins-extend\/\",\"name\":\"Descubriendo Sass (Parte 2). Mixins y Extend - Blog Escola Espai\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2018\/04\/sass-mixins-extend\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2018\/04\/sass-mixins-extend\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2018\/04\/descubriendo-sass.jpg\",\"datePublished\":\"2018-04-05T08:55:41+00:00\",\"dateModified\":\"2021-09-14T14:49:12+00:00\",\"author\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/2147604b486e1347f6e764b0d3964725\"},\"description\":\"En esta ocasi\u00f3n vamos a ver otra de sus incre\u00edbles ventajas y c\u00f3mo podemos aprovecharla. Vamos a hablar de Mixins y de la funci\u00f3n Extend.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2018\/04\/sass-mixins-extend\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.espai.es\/blog\/2018\/04\/sass-mixins-extend\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/2018\/04\/sass-mixins-extend\/#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\/04\/sass-mixins-extend\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.espai.es\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Descubriendo Sass (Parte 2). Mixins y Extend\"}]},{\"@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":"Descubriendo Sass (Parte 2). Mixins y Extend - Blog Escola Espai","description":"En esta ocasi\u00f3n vamos a ver otra de sus incre\u00edbles ventajas y c\u00f3mo podemos aprovecharla. Vamos a hablar de Mixins y de la funci\u00f3n Extend.","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\/04\/sass-mixins-extend\/","og_locale":"es_ES","og_type":"article","og_title":"Descubriendo Sass (Parte 2). Mixins y Extend - Blog Escola Espai","og_description":"En esta ocasi\u00f3n vamos a ver otra de sus incre\u00edbles ventajas y c\u00f3mo podemos aprovecharla. Vamos a hablar de Mixins y de la funci\u00f3n Extend.","og_url":"https:\/\/www.espai.es\/blog\/2018\/04\/sass-mixins-extend\/","og_site_name":"Blog Escola Espai","article_published_time":"2018-04-05T08:55:41+00:00","article_modified_time":"2021-09-14T14:49:12+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":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.espai.es\/blog\/2018\/04\/sass-mixins-extend\/#article","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/2018\/04\/sass-mixins-extend\/"},"author":{"name":"Paco Luque","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/2147604b486e1347f6e764b0d3964725"},"headline":"Descubriendo Sass (Parte 2). Mixins y Extend","datePublished":"2018-04-05T08:55:41+00:00","dateModified":"2021-09-14T14:49:12+00:00","mainEntityOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2018\/04\/sass-mixins-extend\/"},"wordCount":451,"commentCount":0,"image":{"@id":"https:\/\/www.espai.es\/blog\/2018\/04\/sass-mixins-extend\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2018\/04\/descubriendo-sass.jpg","articleSection":["Dise\u00f1o Web","Internet"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.espai.es\/blog\/2018\/04\/sass-mixins-extend\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.espai.es\/blog\/2018\/04\/sass-mixins-extend\/","url":"https:\/\/www.espai.es\/blog\/2018\/04\/sass-mixins-extend\/","name":"Descubriendo Sass (Parte 2). Mixins y Extend - Blog Escola Espai","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2018\/04\/sass-mixins-extend\/#primaryimage"},"image":{"@id":"https:\/\/www.espai.es\/blog\/2018\/04\/sass-mixins-extend\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2018\/04\/descubriendo-sass.jpg","datePublished":"2018-04-05T08:55:41+00:00","dateModified":"2021-09-14T14:49:12+00:00","author":{"@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/2147604b486e1347f6e764b0d3964725"},"description":"En esta ocasi\u00f3n vamos a ver otra de sus incre\u00edbles ventajas y c\u00f3mo podemos aprovecharla. Vamos a hablar de Mixins y de la funci\u00f3n Extend.","breadcrumb":{"@id":"https:\/\/www.espai.es\/blog\/2018\/04\/sass-mixins-extend\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.espai.es\/blog\/2018\/04\/sass-mixins-extend\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/2018\/04\/sass-mixins-extend\/#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\/04\/sass-mixins-extend\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.espai.es\/blog\/"},{"@type":"ListItem","position":2,"name":"Descubriendo Sass (Parte 2). Mixins y Extend"}]},{"@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\/7353","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=7353"}],"version-history":[{"count":10,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/7353\/revisions"}],"predecessor-version":[{"id":12300,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/7353\/revisions\/12300"}],"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=7353"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/categories?post=7353"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/tags?post=7353"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}