{"id":1569,"date":"2022-05-18T05:42:03","date_gmt":"2022-05-17T20:42:03","guid":{"rendered":"https:\/\/www.weschkalnies.de\/blog\/?p=1569"},"modified":"2022-05-18T05:43:24","modified_gmt":"2022-05-17T20:43:24","slug":"sass-mixing-marginpadding","status":"publish","type":"post","link":"https:\/\/www.weschkalnies.de\/blog\/sass-mixing-marginpadding\/","title":{"rendered":"SASS | Mixing | Margin&#038;Padding"},"content":{"rendered":"<p>Ich habe es schon so oft ben\u00f6tigt, dass ich Margins bzw. Paddings f\u00fcr einzelne Elemente selbst definieren m\u00f6chte. Wenn man SaSS einsetzt kann man dazu bspw. folgendes Mixing standardm\u00e4\u00dfig verwenden:<br \/>\n<!--more--><\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n$currentOffset: 0;\r\n$maxOffset: 20;\r\n\r\n@while $currentOffset &lt;= $maxOffset {\r\n    .m-top-#{$currentOffset} {\r\n        margin-top: $currentOffset*0.25 + 'em;'\r\n    }\r\n    .m-bot-#{$currentOffset} {\r\n        margin-bottom: $currentOffset*0.25 + 'em;'\r\n    }\r\n    .p-top-#{$currentOffset} {\r\n        padding-top: $currentOffset*0.25 + 'em;'\r\n    }\r\n    .p-bot-#{$currentOffset} {\r\n        padding-bottom: $currentOffset*0.25 + 'em;'\r\n    }\r\n    $currentOffset: $currentOffset + 0.25; \r\n}<\/pre>\n<p>So kann man dann jedem Element bspw. die Klasse m-top-1 (margin-top: 0.25em), etc. oder m-top-20 (margin-top: 5em) bzw. p-top-1 (padding-top: 0.25em), etc. oder p-top-20 (padding-top: 5em) geben.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ich habe es schon so oft ben\u00f6tigt, dass ich Margins bzw. Paddings f\u00fcr einzelne Elemente selbst definieren m\u00f6chte. Wenn man SaSS einsetzt kann man dazu bspw. folgendes Mixing&#8230;<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34,14],"tags":[],"class_list":["post-1569","post","type-post","status-publish","format-standard","hentry","category-contao","category-htmlcss"],"_links":{"self":[{"href":"https:\/\/www.weschkalnies.de\/blog\/wp-json\/wp\/v2\/posts\/1569","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.weschkalnies.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.weschkalnies.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.weschkalnies.de\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.weschkalnies.de\/blog\/wp-json\/wp\/v2\/comments?post=1569"}],"version-history":[{"count":2,"href":"https:\/\/www.weschkalnies.de\/blog\/wp-json\/wp\/v2\/posts\/1569\/revisions"}],"predecessor-version":[{"id":1571,"href":"https:\/\/www.weschkalnies.de\/blog\/wp-json\/wp\/v2\/posts\/1569\/revisions\/1571"}],"wp:attachment":[{"href":"https:\/\/www.weschkalnies.de\/blog\/wp-json\/wp\/v2\/media?parent=1569"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.weschkalnies.de\/blog\/wp-json\/wp\/v2\/categories?post=1569"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.weschkalnies.de\/blog\/wp-json\/wp\/v2\/tags?post=1569"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}