Menu icon Foundation
multiple classes with sass

I have a multiple class under an ul object which i want to specify different attributes for. but with this way, it seems "menulinks-l" keeps overwriting "menulinks-m". Is there any way to re-write this?

See inspection picture.

<!-- HTML -->
<!-- topbar -->
      <div class="row">
		  <div class="panel">
			  <div class="small-12 medium-4 large-4 columns">logo</div>
			  <div class="medium-8 large-8 columns">
				  <ul class="menulinks-s menulinks-m menulinks-l"> <!-- multiple class here -->
					  <li><a href="./about.html">About</a></li>
					  <li><a href="./portfolio.html">Portfolio</a></li>
					  <li><a href="./news_event.html">News & Events</a></li>
					  <li><a href="./contact.html">Contact Us</a></li>
				  </ul>
			  </div>
		  </div>
	  </div>
         

<!-- SASS -->
//variables

$background-color:#999;
$link-color:#fff;

ul {
    &.menulinks-m {
		list-style:none;
		font-family: "Century Gothic", Verdana, Arial, Sans-Serif;
		margin:0;
		padding:0;
		font-size: 0.9em;
	}
	
	&.menulinks-l {
		list-style:none;
		font-family: "Century Gothic", Verdana, Arial, Sans-Serif;
		margin:0;
		padding:0;
		font-size: 1.2em;
	
		li {
			clear:both;
			height:2em;
			display:inline;
		
			a {
				float: left;
				display: block;
				padding: 4px;
				text-decoration: none;
				color: #666;
				text-transform: uppercase;
				margin-bottom: 5px;
				margin-right: 10px;
			}
		}
	
		li:hover a, li a:hover {
			background: #999;
			color: #fff;
		}
	}
}

Screen shot 2014 02 20 at 7.37.50 pm

SassDRYmutiple classes

I have a multiple class under an ul object which i want to specify different attributes for. but with this way, it seems "menulinks-l" keeps overwriting "menulinks-m". Is there any way to re-write this?

See inspection picture.

<!-- HTML -->
<!-- topbar -->
      <div class="row">
		  <div class="panel">
			  <div class="small-12 medium-4 large-4 columns">logo</div>
			  <div class="medium-8 large-8 columns">
				  <ul class="menulinks-s menulinks-m menulinks-l"> <!-- multiple class here -->
					  <li><a href="./about.html">About</a></li>
					  <li><a href="./portfolio.html">Portfolio</a></li>
					  <li><a href="./news_event.html">News & Events</a></li>
					  <li><a href="./contact.html">Contact Us</a></li>
				  </ul>
			  </div>
		  </div>
	  </div>
         

<!-- SASS -->
//variables

$background-color:#999;
$link-color:#fff;

ul {
    &.menulinks-m {
		list-style:none;
		font-family: "Century Gothic", Verdana, Arial, Sans-Serif;
		margin:0;
		padding:0;
		font-size: 0.9em;
	}
	
	&.menulinks-l {
		list-style:none;
		font-family: "Century Gothic", Verdana, Arial, Sans-Serif;
		margin:0;
		padding:0;
		font-size: 1.2em;
	
		li {
			clear:both;
			height:2em;
			display:inline;
		
			a {
				float: left;
				display: block;
				padding: 4px;
				text-decoration: none;
				color: #666;
				text-transform: uppercase;
				margin-bottom: 5px;
				margin-right: 10px;
			}
		}
	
		li:hover a, li a:hover {
			background: #999;
			color: #fff;
		}
	}
}

Screen shot 2014 02 20 at 7.37.50 pm
Rafi Benkual almost 5 years ago

It looks like you are applying different styles to the same element.

I think you are saying you want to style the <li>?

If so just move the custom class to <li class="menulinks-m"><a href="./about.html">About</a></li>

SASS
ul li {
&.menulinks-m {
list-style:none;
font-family: "Century Gothic", Verdana, Arial, Sans-Serif;
margin:0;
padding:0;
font-size: 0.9em;
}

Avery L almost 5 years ago

I think he wants different styling for different sizes (i may be wrong), because he has menulinks-s menulinks-m and menulinks-l (i'm guessing small/medium/large).

If so, you should just separate them with media queries and have one menulinks class instead of 3.:

$background-color:#999;
$link-color:#fff;
ul li {
  &.menulinks {
  list-style:none;
  font-family: "Century Gothic", Verdana, Arial, Sans-Serif;
  margin:0;
  padding:0;
  //etc (other styles that's for all sizes)
  }
}
@media #{$medium-only} {
  ul li {
    &.menulinks {
    //medium only attributes
    }
  }
}
@media #{$large-up} {
  ul li {
    &.menulinks {
    //large and up attributes
    }
  }
}