{"id":1906,"date":"2017-01-04T16:51:13","date_gmt":"2017-01-04T15:51:13","guid":{"rendered":"http:\/\/hesmid.nl\/test\/?p=1906"},"modified":"2017-01-04T16:53:15","modified_gmt":"2017-01-04T15:53:15","slug":"sass-tips-and-tricks","status":"publish","type":"post","link":"https:\/\/hesmid.nl\/test\/sass-tips-and-tricks\/","title":{"rendered":"SASS tips and tricks"},"content":{"rendered":"<p><strong>watch and build:<\/strong><\/p>\n<p><code>sass --watch scss:styles<\/code><\/p>\n<p><strong>@if<\/strong><\/p>\n<pre class=\"code ruby\"><code class=\"ruby\">p {\r\n  @if 1 + 1 == 2 { border: 1px solid;  }\r\n  @if 5 &lt; 3      { border: 2px dotted; }\r\n  @if null       { border: 3px double; }\r\n}<\/code><\/pre>\n<p><strong>@for<\/strong><\/p>\n<pre class=\"code ruby\"><code class=\"ruby\">@for $i from 1 through 3 {\r\n  .item-#{$i} { width: 2em * $i; }\r\n}\r\n<\/code><\/pre>\n<p><strong>@each<\/strong><\/p>\n<pre class=\"code ruby\"><code class=\"ruby\">@each $animal in puma, sea-slug, egret, salamander {\r\n  .#{$animal}-icon {\r\n    background-image: url('\/images\/#{$animal}.png');\r\n  }\r\n}<\/code><\/pre>\n<pre class=\"code ruby\"><code class=\"ruby\">@each $animal, $color, $cursor in (puma, black, default),\r\n                                  (sea-slug, blue, pointer),\r\n                                  (egret, white, move) {\r\n  .#{$animal}-icon {\r\n    background-image: url('\/images\/#{$animal}.png');\r\n    border: 2px solid $color;\r\n    cursor: $cursor;\r\n  }\r\n}\r\n\r\n<\/code><\/pre>\n<pre class=\"code ruby\"><code class=\"ruby\">@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {\r\n  #{$header} {\r\n    font-size: $size;\r\n  }\r\n}\r\n<\/code><\/pre>\n<p><strong>@while<\/strong><\/p>\n<pre class=\"code ruby\"><code class=\"ruby\">$i: 6;\r\n@while $i &gt; 0 {\r\n  .item-#{$i} { width: 2em * $i; }\r\n  $i: $i - 2;\r\n}<\/code><\/pre>\n<h3><strong>Mixins<\/strong><\/h3>\n<p><strong>Variable Arguments<\/strong><\/p>\n<pre class=\"code ruby\"><code class=\"ruby\">@mixin box-shadow($shadows...) {\r\n  -moz-box-shadow: $shadows;\r\n  -webkit-box-shadow: $shadows;\r\n  box-shadow: $shadows;\r\n}\r\n\r\n.shadows {\r\n  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);\r\n}<\/code><\/pre>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>watch and build: sass &#8211;watch scss:styles @if p { @if 1 + 1 == 2 { border: 1px solid; } @if 5 &lt; 3 { border: 2px dotted; } @if null { border: 3px double; } } @for @for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } } @each @each [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[7],"tags":[37,99],"acf":[],"_links":{"self":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/1906"}],"collection":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/comments?post=1906"}],"version-history":[{"count":5,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/1906\/revisions"}],"predecessor-version":[{"id":1911,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/1906\/revisions\/1911"}],"wp:attachment":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/media?parent=1906"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/categories?post=1906"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/tags?post=1906"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}