jeffkamo/SassMeister-input.scss

## SassMeister-input.scss
// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----


// file: `/styles/templates/_plp.scss`
// ---

.t-plp {

  // Note!
  //
  // This example code assume that the `.t-plp` class is
  // on body. That means the html is `<body class="t-plp">`

  .product,
  .new-product,
  .featured-product {
    color: red;
  }

  article {
    color: green;

    // Notice how all of ol, ul, li and div are nested here.
    // This is probably the minimum select size you need
    // with such generic tag selectors, otherwise you would
    // be styling literally all lists (i.e. size nav) when
    // you probably just want what are probably the product
    // lists to be styled.

    ol,
    ul {
      color: blue;
    }

    li {
      color: block;
    }

    // We also leave this div nested in here because there
    // would be no other way to target these divs unless
    // we use a different selector, such as a class

    > div {
      color: black;
    }
  }
}

## SassMeister-output.css
.t-plp .product,
.t-plp .new-product,
.t-plp .featured-product {
  color: red;
}
.t-plp article {
  color: green;
}
.t-plp article ol,
.t-plp article ul {
  color: blue;
}
.t-plp article li {
  color: block;
}
.t-plp article > div {
  color: black;
}
	// ----
	// Sass (v3.4.7)
	// Compass (v1.0.1)
	// ----


	// file: `/styles/templates/_plp.scss`
	// ---

	.t-plp {

	// Note!
	//
	// This example code assume that the `.t-plp` class is
	// on body. That means the html is `<body class="t-plp">`

	.product,
	.new-product,
	.featured-product {
	color: red;
	}

	article {
	color: green;

	// Notice how all of ol, ul, li and div are nested here.
	// This is probably the minimum select size you need
	// with such generic tag selectors, otherwise you would
	// be styling literally all lists (i.e. size nav) when
	// you probably just want what are probably the product
	// lists to be styled.

	ol,
	ul {
	color: blue;
	}

	li {
	color: block;
	}

	// We also leave this div nested in here because there
	// would be no other way to target these divs unless
	// we use a different selector, such as a class

	> div {
	color: black;
	}
	}
	}
	.t-plp .product,
	.t-plp .new-product,
	.t-plp .featured-product {
	color: red;
	}
	.t-plp article {
	color: green;
	}
	.t-plp article ol,
	.t-plp article ul {
	color: blue;
	}
	.t-plp article li {
	color: block;
	}
	.t-plp article > div {
	color: black;
	}