jeffkamo · August 29, 2015 14:10
diff --git a/SassMeister-input.scss b/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;
    }
  }
 }
diff --git a/SassMeister-output.css b/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;
	}
	}
	}