Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// ----

$black: #000;
$white: #fff;

.greyLightBg {
  background:red;
}

.greyDarkBg {
  background:red;
}

#service-list-view {

	h2 {
		text-align : center;
		width : 100%;
		height: 80px;
		line-height: 80px;

		section.social-media & {
			color : $black;
		}

		section.digital & {
			color : $white;
		}

		section.identity & {
			color : $white;
			background-color: $black;
		}
	}

	.item {
		padding-top : 1px;
		height : 240px;
		margin-top  :30px;

		.social-media & {
			@extend .greyLightBg;
		}

		.digital & {
			@extend .greyDarkBg;
		}

		.identity & {
			background-color: $black;
		}

		img {
			display : block;
			margin: {

				top : 40px;
				right : auto;
				bottom : 0;
				left : auto;
			}
		}

		.content {
			text-align : justify;
		}
	}
}@import "compass";

SassMeister-output.css

.greyLightBg, .social-media #service-list-view .item {
  background: red;
}

.greyDarkBg, .digital #service-list-view .item {
  background: red;
}

#service-list-view h2 {
  text-align: center;
  width: 100%;
  height: 80px;
  line-height: 80px;
}
section.social-media #service-list-view h2 {
  color: black;
}
section.digital #service-list-view h2 {
  color: white;
}
section.identity #service-list-view h2 {
  color: white;
  background-color: black;
}
#service-list-view .item {
  padding-top: 1px;
  height: 240px;
  margin-top: 30px;
}
.identity #service-list-view .item {
  background-color: black;
}
#service-list-view .item img {
  display: block;
  margin-top: 40px;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
}
#service-list-view .item .content {
  text-align: justify;
}