CODEWITHSUNDEEP
sass
Wasteland
Wasteland

Reputation: 5379

SASS - make the code more concise

The following rules only apply to #navmenu.someclass, so just #navmenu should not be affected here.

I have 2 specific navmenus with classes 'events' and 'events-categories'. The common part is 'ul' and 'li' then the 'li a' differs. Is there a way of merging the two blocks of sass code below so I don't have to duplicate rules for 'ul' and 'li'. Again #navmenu should not be affected as the rules do not apply to the main navmenu.

#navmenu.events {
    ul {
        list-style-type: none;
        list-style-image: none;
        li {
            display: inline;
        }
        li a {
            background: $p-dark;
            margin: 4px;
            padding: 5px 20px 5px 20px;
            color: white;
        }
    }
}

#navmenu.events-categories {
    ul {
        list-style-type: none;
        list-style-image: none;
        li {
            display: inline;
        }
        li a {
            margin: 1px;
            padding: 2px 5px 2px 5px;
        }
    }
}

Upvotes: 0

Views: 14

Answers (1)

pentzzsolt
pentzzsolt

Reputation: 1131

You can always move the common code to a placeholder selector and use the @extend directive.

%common {
  ul {
    list-style-type: none;
    list-style-image: none;
    li {
      display: inline;
    }
  }
}

#navmenu.events-categories, #navmenu.events {
  @extend %common;
}

#navmenu.events {
  ul {
    li a {
      background: $p-dark;
      margin: 4px;
      padding: 5px 20px 5px 20px;
      color: white;
    }
  }
}

#navmenu.events-categories {
  ul {
    li a {
      margin: 1px;
      padding: 2px 5px 2px 5px;
    }
  }
}

This will result in the following CSS:

#navmenu.events-categories ul, #navmenu.events ul {
  list-style-type: none;
  list-style-image: none;
}
#navmenu.events-categories ul li, #navmenu.events ul li {
  display: inline;
}

#navmenu.events ul li a {
  background: red;
  margin: 4px;
  padding: 5px 20px 5px 20px;
  color: white;
}

#navmenu.events-categories ul li a {
  margin: 1px;
  padding: 2px 5px 2px 5px;
}

Upvotes: 2

Related Questions