{"id":192863,"date":"2015-01-11T05:09:01","date_gmt":"2015-01-11T12:09:01","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=192863"},"modified":"2021-08-04T08:43:31","modified_gmt":"2021-08-04T15:43:31","slug":"mixin-offset-positioning","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/snippets\/sass\/mixin-offset-positioning\/","title":{"rendered":"Mixin for Offset Positioning"},"content":{"rendered":"\n

If there is one shorthand CSS dramatically misses, it is the one making it possible to define the position<\/code> property, as well as the four offset properties (top<\/code>, right<\/code>, bottom<\/code>, left<\/code>).<\/p>\n\n\n\n

Fortunately, this is typically something that can be solved with a CSS preprocessor such as Sass. We only have to build a simple mixin to save us from declaring the 5 properties manually.<\/p>\n\n\n\n

\/\/\/ Shorthand mixin for offset positioning\n\/\/\/ @param {String} $position - Either `relative`, `absolute` or `fixed`\n\/\/\/ @param {Length} $top [null] - Top offset\n\/\/\/ @param {Length} $right [null] - Right offset\n\/\/\/ @param {Length} $bottom [null] - Bottom offset\n\/\/\/ @param {Length} $left [null] - Left offset\n@mixin position($position, $top: null, $right: null, $bottom: null, $left: null) {\n  position: $position;\n  top: $top;\n  right: $right;\n  bottom: $bottom;\n  left: $left;\n}<\/code><\/pre>\n\n\n\n
Now the thing is we rely on named arguments when using this mixin to avoid having to set them all when only one or two are desired. Consider the following code:<\/p>\n\n\n\n
.foo {\n  @include position(absolute, $top: 1em, $left: 50%);\n}<\/code><\/pre>\n\n\n\n
… which compiles into:<\/p>\n\n\n\n
.foo {\n  position: absolute;\n  top: 1em;\n  left: 50%;\n}<\/code><\/pre>\n\n\n\n
Indeed, Sass never outputs a property that has a value of null<\/code>.<\/p>\n\n\n
Simplifying the API<\/h3>\n\n\n
We could move the type of position to the mixin name instead of having to define it as first argument. To do so, we need three extra mixins that will serve as aliases to the `position` mixin we just defined.<\/p>\n\n\n\n
\/\/\/ Shorthand mixin for absolute positioning\n\/\/\/ Serves as an alias for `position(absolute, ...)`\n\/\/\/ @param {Arglist} $args - Offsets\n\/\/\/ @require {mixin} position\n@mixin absolute($args...) {\n  @include position(absolute, $args...);\n}\n\n\/\/\/ Shorthand mixin for relative positioning\n\/\/\/ Serves as an alias for `position(relative, ...)`\n\/\/\/ @param {Arglist} $args - Offsets\n\/\/\/ @require {mixin} position\n@mixin relative($args...) {\n  @include position(relative, $args...);\n}\n\n\/\/\/ Shorthand mixin for fixed positioning\n\/\/\/ Serves as an alias for `position(fixed, ...)`\n\/\/\/ @param {Arglist} $args - Offsets\n\/\/\/ @require {mixin} position\n@mixin fixed($args...) {\n  @include position(fixed, $args...);\n}<\/code><\/pre>\n\n\n\n
Rewriting our previous example:<\/p>\n\n\n\n
.foo {\n  @include absolute($top: 1em, $left: 50%);\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
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 to build a simple mixin […]<\/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":191771,"url":"https:\/\/css-tricks.com\/snippets\/sass\/material-shadows-mixin\/","url_meta":{"origin":192863,"position":0},"title":"Material Shadows Mixin","date":"December 29, 2014","format":false,"excerpt":"Material Design has been all over the place lately. One part of it consists on stacking layers on top of each others like real paper sheets. To achieve such an effect in CSS, we need to use the box-shadow property. To avoid having to manually write the shadows every time,\u2026","rel":"","context":"With 9 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":192753,"url":"https:\/\/css-tricks.com\/snippets\/sass\/covering-mixin\/","url_meta":{"origin":192863,"position":1},"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":191206,"url":"https:\/\/css-tricks.com\/snippets\/sass\/mixin-prefix-properties\/","url_meta":{"origin":192863,"position":2},"title":"Mixin to Prefix Properties","date":"December 19, 2014","format":false,"excerpt":"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\u2026","rel":"","context":"With 2 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":192751,"url":"https:\/\/css-tricks.com\/snippets\/sass\/centering-mixin\/","url_meta":{"origin":192863,"position":3},"title":"Centering Mixin","date":"January 9, 2015","format":false,"excerpt":"Assuming the parent element has position: relative;, these four properties will center a child element both horizontally and vertically inside, no matter what the width of height of either are. @mixin centerer { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .parent { position: relative; } .child {\u2026","rel":"","context":"With 12 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":243955,"url":"https:\/\/css-tricks.com\/snippets\/sass\/viewport-sized-typography-minimum-maximum-sizes\/","url_meta":{"origin":192863,"position":4},"title":"Viewport Sized Typography with Minimum and Maximum Sizes","date":"July 28, 2016","format":false,"excerpt":"Declaring font sizes in viewport units can produce really interesting results, but it does come with challenges. There are no min-font-size or max-font-size properties in CSS, so edge cases where text gets too small or too big are difficult to deal with. This Sass mixin makes use of media queries\u2026","rel":"","context":"With 12 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":192863,"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\/192863"}],"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=192863"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/192863\/revisions"}],"predecessor-version":[{"id":346091,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/192863\/revisions\/346091"}],"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=192863"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=192863"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}