Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS SASS

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #148924
    basement31
    Participant

    I’m working on a grid system built using sass, currently (on a basic level) it goes something like this:

    @mixin named-breakpoint-cols {
    
      %column {
        margin: 0 0 $gutter 0;
        padding: 0 $gutter 0 0;
        float: left;
        display: block; // Acount for things like LI's to be grid columns
      }
    
      // 100%
      .#{$breakpoint-name}-full,
      /* lots more stuff here */
      .#{$breakpoint-name}-ten-tenths {
        width: 100%;
        @extend %column;
      }
    

    So as you can see, each named breakpoint is defined within a media query (mixin) so that I can use different classes to define different widths at different screen resolutions…

    @include breakpoint(medium) {
    
        $breakpoint-name: m;
    
        @include named-breakpoint-cols;
        // Column sizes prefixed with the $breakpoint-name above will be generated here
    
    }
    

    The problem I have is that @extending out of a media query doesn’t exactly the give the results I want… What I really want is all of my @extended %column’s in one place. what I get is more like this

    .l-full,
    /* Loads more here */
    .l-two-tenths, .l-one-tenth {
      margin: 0 0 30px 0;
      padding: 0 30px 0 0;
      float: left;
      display: block; }
    
    
    @media (max-width: 750px) { /* line 68, ../sass/_mixins.scss */ .l-full, .l-one-tenth, /* loads more here */ .m-full, .m-one-tenth { margin: 0 0 30px 0; padding: 0 30px 0 0; float: left; display: block; }
    

    So for every named breakpoint I get a load of repeated classes, I understand why its happening I just don’t know of a good way to fix it – Would be grateful for any assistance!

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.