i have run across a question on structure… and have not yet found the answer in this SaSS Reference. below i have footer[role=”contentinfo”] and nested in the container is a ul, li, h1, and small styles. then there are two @media queries – i have nested the footer[role=”contentinfo”] rules for each query
is this correct?
it compiles, but i’m not sure if the media queries should nested and treated like a module, or if it should be broken down to each rule (which would leave me with a lot of media queries!). i know this will change with @extends and @mixins but I am currently doing a reformat of exisitng application code. One step at a time.
/* 17.Contentinfo footer[role="contentinfo"]
----------------------------------------------------------*/
footer[role="contentinfo"] {
position: relative;
background-color: rgb(40,64,96);
padding-top: 1em;
padding-bottom: 1em;
margin-top: -100px; /* negative value of footer height */
height: 100px;
border-top:1px solid #183052;
-webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.2);
-moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.2);
box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.2);
background-color: #183052;
background-image: -webkit-gradient(linear, left top, left bottom, from(#183052), to(#183052));
background-image: -webkit-linear-gradient(top, #183052, #183052);
background-image: -moz-linear-gradient(top, #183052, #183052);
background-image: -o-linear-gradient(top, #183052, #183052);
background-image: -ms-linear-gradient(top, #183052, #183052);
background-image: linear-gradient(top, #183052, #183052);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#183052', EndColorStr='#183052');
ul {
list-style-type: none;
overflow: hidden;
margin:0 0 0 -.5em;
padding:0;
/*width:150px;*/
}
li {
float:left;
clear: none;
/*width:16.66%; *//* 41.66 / 250 = .1666 */
padding: 0;
text-align: center;
white-space: nowrap;
a {
display: block;
padding: 0 .5em;
color: rgb(239, 245, 255);
}
a, a:visited {
outline: none;
color: rgb(213, 229, 255);
text-decoration: none;
}
a:hover, a:focus {
color: rgb(255,255,255);
}
}
h1 {
margin-top: .125em;
margin-bottom: .125em;
padding-left: 0px;
min-height: 22px;
width:38%;
min-width: 148px;
background:transparent url('../img/logos/ss-logo-143x24.png') no-repeat 0 0;
a {
display: block;
}
}
small {
color: rgb(239, 245, 255);
padding-top:.5em;
text-align:center;
}
@media screen and (min-width: 66.133em) {
// 992
padding-top: 1em;
background-color: rgb(41, 56, 82);
ul {
float:right;
width: 48%;
margin:0;
padding:0;
width: auto;
}
li {
float: left;
margin-bottom: 1em;
}
h1 {
float: left;
width: 24%;
max-width:215px;
}
}
@media screen and (min-width: 92.133em) {
// min 1382
width: 100%;
padding-left: 0;
vertical-align: top;
ul {
float:right;
width: 48%;
margin:0;
padding:0;
width: auto;
}
li {
float: left;
margin-bottom: 1em;
}
h1 {
float: left;
width: 28%;
max-width:215px;
}
}
}