{"id":379,"date":"2015-05-27T15:40:43","date_gmt":"2015-05-27T15:40:43","guid":{"rendered":"http:\/\/aurelio.audero.it\/blog\/?p=379"},"modified":"2016-06-04T00:20:30","modified_gmt":"2016-06-04T00:20:30","slug":"trick-of-the-day-sass-mixin-or-placeholder","status":"publish","type":"post","link":"https:\/\/www.audero.it\/blog\/2015\/05\/27\/trick-of-the-day-sass-mixin-or-placeholder\/","title":{"rendered":"Trick of the day: Sass, Mixin or Placeholder?"},"content":{"rendered":"<p>Without any doubt, two of the best and most useful features of Sass are mixins and placeholders. A mixin is a directive similar to a function in programming languages in that you can pass arguments. However, a mixin outputs CSS code instead of returning a value as the result of its execution. A placeholder is similar to an abstract class of an object oriented language. When your Sass code is compiled, the body of a placeholder isn&#8217;t included in the CSS code unless there&#8217;s a CSS class extending the placeholder.<br \/>\n<!--more--><br \/>\nSometimes, it&#8217;s hard to choose if you have to use a mixin or a placeholder in your Sass code. This article gives some good advises to help in this decision:<\/p>\n<p><a href=\"http:\/\/www.sitepoint.com\/sass-mixin-placeholder\/\">http:\/\/www.sitepoint.com\/sass-mixin-placeholder\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Without any doubt, two of the best and most useful features of Sass are mixins and placeholders. A mixin is a directive similar to a function in programming languages in that you can pass arguments. However, a mixin outputs CSS code instead of returning a value as the result of its execution. A placeholder is similar to an abstract class of an object oriented language. When your Sass code is compiled, the body of a placeholder isn&#8217;t included in the CSS code unless there&#8217;s a CSS class extending the placeholder.<\/p>\n","protected":false},"author":1,"featured_media":380,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[33],"tags":[36,37,38],"class_list":["post-379","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-trick-of-the-day","tag-sass","tag-sass-mixins","tag-sass-placeholders"],"jetpack_featured_media_url":"https:\/\/www.audero.it\/blog\/wp-content\/uploads\/2015\/06\/sass-logo.png","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p9Or4e-67","jetpack-related-posts":[{"id":148,"url":"https:\/\/www.audero.it\/blog\/2013\/09\/05\/how-to-create-custom-filters-in-jquery\/","url_meta":{"origin":379,"position":0},"title":"How to Create Custom Filters in jQuery","author":"Aurelio De Rosa","date":"September 5, 2013","format":false,"excerpt":"In some cases you may need a shortcut to collect elements for which jQuery doesn't provide a specific filter. This is exactly where custom filters come into play. In this article, extracted from my book Instant jQuery Selectors, you'll learn how to build a custom filter in jQuery. Please note\u2026","rel":"","context":"In &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/www.audero.it\/blog\/category\/javascript\/"},"img":{"alt_text":"jquery logo","src":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2013\/09\/jquery-logo.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2013\/09\/jquery-logo.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2013\/09\/jquery-logo.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2013\/09\/jquery-logo.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2013\/09\/jquery-logo.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2013\/09\/jquery-logo.png?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":170,"url":"https:\/\/www.audero.it\/blog\/2013\/09\/16\/15-tips-to-improve-your-jquery-selectors\/","url_meta":{"origin":379,"position":1},"title":"15 Tips to Improve Your jQuery Selectors","author":"Aurelio De Rosa","date":"September 16, 2013","format":false,"excerpt":"Who don't know what jQuery is and how it can help in developing a web project. Based on the latest statistics, jQuery is used on ~60% of the Quantcast Top 100k websites. We use it constantly and sometimes we tend to think it's almost magic, that jQuery is capable to\u2026","rel":"","context":"In &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/www.audero.it\/blog\/category\/javascript\/"},"img":{"alt_text":"jquery logo","src":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2013\/09\/jquery-logo.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2013\/09\/jquery-logo.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2013\/09\/jquery-logo.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2013\/09\/jquery-logo.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2013\/09\/jquery-logo.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2013\/09\/jquery-logo.png?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":404,"url":"https:\/\/www.audero.it\/blog\/2015\/07\/14\/trick-of-the-day-css-scroll-snap-points\/","url_meta":{"origin":379,"position":2},"title":"Trick of the day: CSS Scroll Snap Points","author":"Aurelio De Rosa","date":"July 14, 2015","format":false,"excerpt":"When you create a gallery, you usually want to implement a feature where every time the user clicks (or press the ENTER key) on an arrow, you move straight to the next (or previous) image. This effect can also be used to create a website that has several sections, each\u2026","rel":"","context":"In &quot;Trick of the day&quot;","block_context":{"text":"Trick of the day","link":"https:\/\/www.audero.it\/blog\/category\/trick-of-the-day\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2015\/07\/css-scroll-snap-points.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2015\/07\/css-scroll-snap-points.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2015\/07\/css-scroll-snap-points.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2015\/07\/css-scroll-snap-points.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2015\/07\/css-scroll-snap-points.png?resize=1050%2C600&ssl=1 3x"},"classes":[]},{"id":392,"url":"https:\/\/www.audero.it\/blog\/2015\/06\/01\/trick-of-the-day-css-counters\/","url_meta":{"origin":379,"position":3},"title":"Trick of the day: CSS counters","author":"Aurelio De Rosa","date":"June 1, 2015","format":false,"excerpt":"Have you ever heard of CSS counters? It's a feature of CSS for numbering non-consecutive items, wherever they might be in the DOM. It doesn't have a lot of uses cases but it's important to understand this kind of new features to understand how powerful is CSS today.","rel":"","context":"In &quot;Trick of the day&quot;","block_context":{"text":"Trick of the day","link":"https:\/\/www.audero.it\/blog\/category\/trick-of-the-day\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":197,"url":"https:\/\/www.audero.it\/blog\/2013\/12\/23\/enhancing-the-abbr-element-on-mobile\/","url_meta":{"origin":379,"position":4},"title":"Enhancing the abbr Element on Mobile","author":"Aurelio De Rosa","date":"December 23, 2013","format":false,"excerpt":"Today's world runs fast, really fast. When writing, a lot of people use abbreviations and acronyms to save time that we can find spread all over the web. They are so used that an HTML tag, <abbr>, was created to identify them and help the semantic of web pages. In\u2026","rel":"","context":"In &quot;CSS&quot;","block_context":{"text":"CSS","link":"https:\/\/www.audero.it\/blog\/category\/css\/"},"img":{"alt_text":"The abbr tag unstyled","src":"https:\/\/i0.wp.com\/aurelio.audero.it\/blog\/wp-content\/uploads\/2013\/12\/abbr-unstyled.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":56,"url":"https:\/\/www.audero.it\/blog\/2013\/07\/02\/how-to-solve-the-problem-of-font-face-inside-media-queries\/","url_meta":{"origin":379,"position":5},"title":"How to Solve the Problem of @font-face Inside Media Queries","author":"Aurelio De Rosa","date":"July 2, 2013","format":false,"excerpt":"Mobile connections aren't as good as the usual desktop ones, therefore the download time of custom fonts can take up to several seconds. A good approach is to use the @font-face rule only for certain range of media and screens using @media queries. Unfortunately this approach doesn't work for some\u2026","rel":"","context":"In &quot;CSS&quot;","block_context":{"text":"CSS","link":"https:\/\/www.audero.it\/blog\/category\/css\/"},"img":{"alt_text":"A page with custom font not completely downloaded","src":"https:\/\/i0.wp.com\/aurelio.audero.it\/blog\/wp-content\/uploads\/2013\/06\/aeon-megazine-mobile-168x300.png?resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/posts\/379","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/comments?post=379"}],"version-history":[{"count":5,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/posts\/379\/revisions"}],"predecessor-version":[{"id":464,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/posts\/379\/revisions\/464"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/media\/380"}],"wp:attachment":[{"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/media?parent=379"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/categories?post=379"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/tags?post=379"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}