Paste your Google Webmaster Tools verification code here
Go to Top

Structuring SCSS and @media queries

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;
			}

		}
	}
0 comments
Follow

Get every new post on this blog delivered to your Inbox.

Join other followers: