CODEWITHSUNDEEP
htmlcsssasszurb-foundation
Summitch
Summitch

Reputation: 389

combine Foundation css grid column definitions for reuse

In Foundation CSS, you can set the size of columns in a layout like this:

<div class="row">
  <div class="bordered small-12 medium-6 large-4 columns">one</div>
  <div class="bordered small-12 medium-6 large-4 columns">two</div>
  <div class="bordered small-12 medium-6 large-4 columns">three</div>
</div>

I want to use that particular combination of small, medium, and large sizes in many different places. Is there a SASS/CSS way to define a class that can be reused throughout my app?

I'd like the above code to look like this:

<div class="row">
  <div class="bordered default-size columns">one</div>
  <div class="bordered default-size columns">two</div>
  <div class="bordered default-size columns">three</div>
</div>

Thanks!

Upvotes: 0

Views: 218

Answers (2)

Brett DeWoody
Brett DeWoody

Reputation: 62881

Using Foundation's SASS mixins this is possible:

HTML

<div class="triple">
  <div>one</div>
  <div>two</div>
  <div>three</div>
</div>

SASS

.triple {
  @include grid-row();

  > div {
    @include grid-column(12);

    @media #{$large-up} { 
      @include grid-column(4); 
    }
  }

}

The above will result in 3 stacked columns at the small breakpoint and 3 columns side-by-side at the large breakpoint. You could refactor the HTML markup to remove the bordered and default-size classes as well in this setup, adding any needed styles to the > div selector instead.

Upvotes: 0

BurningLights
BurningLights

Reputation: 2397

With SASS, you could use the "extend" feature to combine your classes into one. So, you could do something like:

.default-size {
  @extend .small-12;
  @extend .medium-6;
  @extend .large-4;
}

See http://sass-lang.com/guide for the extend feature of SASS.

Upvotes: 1

Related Questions