{"id":191206,"date":"2014-12-19T02:01:25","date_gmt":"2014-12-19T09:01:25","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=191206"},"modified":"2021-08-04T08:41:10","modified_gmt":"2021-08-04T15:41:10","slug":"mixin-prefix-properties","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/snippets\/sass\/mixin-prefix-properties\/","title":{"rendered":"Mixin to Prefix Properties"},"content":{"rendered":"\n

In case you’re interested in handling your own CSS vendor prefixing (rather than, say, Autoprefixer<\/a> or Compass<\/a>), here is a mixin to help with that. Rather than just appending every known prefix to everything, you pass it the prefixes you want to use, so you have more fine grained control over the output.<\/p>\n\n\n

Simple version<\/h3>\n\n\n
\/\/\/ Mixin to prefix a property\n\/\/\/ @author Kitty Giraudel\n\/\/\/ @param {String} $property - Property name\n\/\/\/ @param {*} $value - Property value\n\/\/\/ @param {List} $prefixes (()) - List of prefixes to print\n@mixin prefix($property, $value, $prefixes: ()) {\n  @each $prefix in $prefixes {\n    #{'-' + $prefix + '-' + $property}: $value;\n  }\n \n  \/\/ Output standard non-prefixed declaration\n  #{$property}: $value;\n}<\/code><\/pre>\n\n\n\n
Usage:<\/p>\n\n\n\n
.selector {\n  @include prefix(transform, rotate(45deg), webkit ms);\n}<\/code><\/pre>\n\n\n\n
Output:<\/p>\n\n\n\n
.selector {\n  -webkit-transform: rotate(45deg);\n  -ms-transform: rotate(45deg);\n  transform: rotate(45deg);\n}<\/code><\/pre>\n\n\n
Advanced version<\/h3>\n\n\n
Note that this version uses Sass maps, hence requires version 3.3 or higher.<\/p>\n\n\n\n
\/\/\/ Mixin to prefix several properties at once\n\/\/\/ @author Kitty Giraudel\n\/\/\/ @param {Map} $declarations - Declarations to prefix\n\/\/\/ @param {List} $prefixes (()) - List of prefixes to print\n@mixin prefix($declarations, $prefixes: ()) {\n  @each $property, $value in $declarations {\n    @each $prefix in $prefixes {\n      #{'-' + $prefix + '-' + $property}: $value;\n    }\n\n    \/\/ Output standard non-prefixed declaration\n    #{$property}: $value;\n  }\n}<\/code><\/pre>\n\n\n\n
Usage:<\/p>\n\n\n\n
.selector {\n  @include prefix((\n    column-count: 3,\n    column-gap: 1.5em,\n    column-rule: 2px solid hotpink\n  ), webkit moz);\n}<\/code><\/pre>\n\n\n\n
Output:<\/p>\n\n\n\n
.selector {\n  -webkit-column-count: 3;\n  -moz-column-count: 3;\n  column-count: 3;\n  -webkit-column-gap: 1.5em;\n  -moz-column-gap: 1.5em;\n  column-gap: 1.5em;\n  -webkit-column-rule: 2px solid hotpink;\n  -moz-column-rule: 2px solid hotpink;\n  column-rule: 2px solid hotpink;\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
In case you’re interested in handling your own CSS vendor prefixing (rather than, say, Autoprefixer or Compass), here is a mixin to help with that. Rather than just appending every known prefix to everything, you pass it the prefixes you want to use, so you have more fine grained control over the output. Simple version […]<\/p>\n","protected":false},"author":40123,"featured_media":0,"parent":191187,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-snippet.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":194425,"url":"https:\/\/css-tricks.com\/snippets\/sass\/placing-items-circle\/","url_meta":{"origin":191206,"position":0},"title":"Placing Items on a Circle","date":"January 28, 2015","format":false,"excerpt":"It can be quite challenging to place items on a circle with CSS. Usually, we end up relying on JavaScript because some plugins do it all right away. However more often than not there is no good reason to do it in JavaScript rather than CSS. This is presentational purpose,\u2026","rel":"","context":"With 25 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":194408,"url":"https:\/\/css-tricks.com\/snippets\/sass\/extend-wrapper-aka-mixtend\/","url_meta":{"origin":191206,"position":1},"title":"@extend Wrapper aka Mixtend","date":"January 28, 2015","format":false,"excerpt":"When extending a selector with the @extend directive, Sass doesn\u2019t take the CSS content from the extended selector to put it in the extending one. It works the other way around. It takes the extending selector and append it to the extended one. Because of how it works, it makes\u2026","rel":"","context":"With 2 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":192863,"url":"https:\/\/css-tricks.com\/snippets\/sass\/mixin-offset-positioning\/","url_meta":{"origin":191206,"position":2},"title":"Mixin for Offset Positioning","date":"January 11, 2015","format":false,"excerpt":"If there is one shorthand CSS dramatically misses, it is the one making it possible to define the position property, as well as the four offset properties (top, right, bottom, left). Fortunately, this is typically something that can be solved with a CSS preprocessor such as Sass. We only have\u2026","rel":"","context":"With 4 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":192753,"url":"https:\/\/css-tricks.com\/snippets\/sass\/covering-mixin\/","url_meta":{"origin":191206,"position":3},"title":"Covering Mixin","date":"January 9, 2015","format":false,"excerpt":"I find myself using these properties together all the time, which is typically a good opportunity for an abstraction like a mixin: @mixin coverer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } For example, a full-page overlay: .overlay { @include coverer; background: rgba(black, 0.5); z-index: 1000;\u2026","rel":"","context":"With 1 comment","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":191213,"url":"https:\/\/css-tricks.com\/snippets\/sass\/mixin-manage-breakpoints\/","url_meta":{"origin":191206,"position":4},"title":"Mixin to Manage Breakpoints","date":"December 19, 2014","format":false,"excerpt":"Responsive Web Design creations often exist over several different breakpoints. Managing those breakpoints is not always easy. Using them and updating them can sometimes be tedious. Hence the need for a mixin to handle breakpoint configuration and usage. Simple version First you need a map of breakpoints, associated to names.\u2026","rel":"","context":"With 3 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":195512,"url":"https:\/\/css-tricks.com\/snippets\/sass\/maintain-aspect-ratio-mixin\/","url_meta":{"origin":191206,"position":5},"title":"Maintain Aspect Ratio Mixin","date":"February 10, 2015","format":false,"excerpt":"This article from July 2013 describes a method of using psuedo elements to maintain an elements aspect ratio, even as it scales. Here's a Sass mixin that simplifies the math a bit. @mixin aspect-ratio($width, $height) { position: relative; &:before { display: block; content: \"\"; width: 100%; padding-top: ($height \/ $width)\u2026","rel":"","context":"With 23 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/191206"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/40123"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=191206"}],"version-history":[{"count":8,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/191206\/revisions"}],"predecessor-version":[{"id":346087,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/191206\/revisions\/346087"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/191187"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=191206"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=191206"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}