{"id":2709,"date":"2014-10-29T20:42:54","date_gmt":"2014-10-29T19:42:54","guid":{"rendered":"http:\/\/www.maratz.com\/blog\/?p=2709"},"modified":"2014-10-29T20:42:54","modified_gmt":"2014-10-29T19:42:54","slug":"sibling-selectors-with-sass","status":"publish","type":"post","link":"https:\/\/www.maratz.com\/blog\/archives\/2014\/10\/29\/sibling-selectors-with-sass\/","title":{"rendered":"Sibling selectors with Sass"},"content":{"rendered":"

Have you ever wanted to just automatically generate sibling selectors automatically increasing the CSS property value. Instead of writing multiple selectors by hand, to get something like the following CSS:<\/p>\n

\r\n.graph-bar-vertical li { \r\n  left: 0; }\r\n\r\n.graph-bar-vertical li + li {\r\n  left: 10%; }\r\n\r\n.graph-bar-vertical li + li + li {\r\n  left: 20%; }\r\n\r\n.graph-bar-vertical li + li + li + li {\r\n  left: 30%; }\r\n\r\n.graph-bar-vertical li + li + li + li + li {\r\n  left: 40%; }\r\n\r\n.graph-bar-vertical li + li + li + li + li + li {\r\n  left: 50%; }\r\n\r\n.graph-bar-vertical li + li + li + li + li + li + li {\r\n  left: 60%; }\r\n\r\n.graph-bar-vertical li + li + li + li + li + li + li + li {\r\n  left: 70%; }\r\n\r\n.graph-bar-vertical li + li + li + li + li + li + li + li + li {\r\n  left: 80%; }\r\n\r\n.graph-bar-vertical li + li + li + li + li + li + li + li + li + li {\r\n  left: 90%; }\r\n<\/code><\/pre>\n
Use Sass snippet, like the one below. Obviously, for just a couple of values it\u2019s not a big deal, but if you wanted to generate hundreds of values (not that<\/em> improbable \u2014 especially if you plot graphs), I believe you\u2019ll find it pretty useful.<\/p>\n
\r\n.graph-bar-vertical li { left: 0; }\r\n\r\n$increment: 10;\r\n@for $i from 0 through 8 {\r\n\t$li: li;\r\n\t@for $j from 0 through $i { \r\n\t\t$li: #{$li} + li;\r\n\t}\r\n\t$k: $i+1;\r\n\t.graph-bar-vertical #{$li} { \r\n\t\tleft: #{$k*$increment*1%}; \r\n\t}\r\n}\r\n<\/code><\/pre>\n
Let me know if it works!<\/p>\n","protected":false},"excerpt":{"rendered":"
Have you ever wanted to just automatically generate sibling selectors automatically increasing the CSS property value. Instead of writing multiple selectors by hand, to get something like the following CSS: .graph-bar-vertical li { left: 0; } .graph-bar-vertical li + li { left: 10%; } .graph-bar-vertical li + li + li { left: 20%; } .graph-bar-vertical […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[],"_links":{"self":[{"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/2709"}],"collection":[{"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/comments?post=2709"}],"version-history":[{"count":9,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/2709\/revisions"}],"predecessor-version":[{"id":2718,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/2709\/revisions\/2718"}],"wp:attachment":[{"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/media?parent=2709"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/categories?post=2709"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/tags?post=2709"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}