css - How do I use Susy to produce different layouts on different pages? -


I am using Crop 2.1.3 as a grid system. I have an element in which there is a different drain on different templates. I have declared two different layouts and feel that I am implementing them correctly. However, the layout that is defined as the one that is applicable everywhere is applied in the code below, $ onepx-gutters layout also on the .home page.

I like my SCSS code:

  $ small-rocks: (column: 12, gutter: 0.137254902, output: float, no-position: split, global- Box-size: border-box,); $ One px-gutter: (column: 12, gutter: 1 px / 80px, output: float, gutter-position: first, global box-sizing: cement box,); .home .item-container {@ layout (includes $ small-gutter); Include @ container (); }. Products include .item-container {@ layouts ($ onepx-gutters); Include @ container (); } .item-container .item-width-2 {@ Add Term (8 out of the first 12); & Amp ;: nth-child (2n + 3) {Clear: Both; }} .item-container .item-width-1 {@include span (4 of 12); }  

The generated CSS code is like this:

  .item-width-2 {width: 65.66092%; Swim left; Margin-left: 0.50287%; Margin-right: 0.50287%; } .item-width-2: nth-child (2n + 3) {clear: both; } .item-width-1 {width: 32.3275 9%; Swim left; Margin-left: 0.50287%; Margin-right: 0.50287%; }  

As you can see, this does not generate a different example of .home .item-width-2 and .products .item-width Does -2 - with each different margin on each.

Your solution works because you have changed the code order, not because of the name-spacing You are also using @include layout . You are changing the global variable for all the codes (unless you can not change it again). Some other options are:

  // with-layout // - Change settings for nested code only @ layout ($ onepx-gutters) {@include span (3); // it will use $ onepx-gutters} @ included period (3); // This // will not be the local reference // - Change your settings for any one mix! @spain (3 $ onepx-gutters); // This will use $ onepx-gutters @ period (3 $ small-nallow); // This will use a small gutter  

Comments

Popular posts from this blog

sqlite3 - UPDATE a table from the SELECT of another one -

c# - Showing a SelectedItem's Property -

javascript - Render HTML after each iteration in loop -