phillipbentonkelly
5/13/2014 - 9:41 PM

Learning Sass - Generated by SassMeister.com

Learning Sass - Generated by SassMeister.com

SassMeister-rendered.html
content_copyfile_download
<html>
  <head>
    <title>Test Page</title>
  </head>
  <body>
    <p>First P</p>
    <div id="main">
      <p>Hi, Phill</p>
      <p class="purple">Hi, Phill</p>
    </div>
  </body>
</html>
SassMeister-output.css
content_copyfile_download
* {
  margin: 0px;
  padding: 0px;
  outline: none;
}

p {
  color: red;
}

#main {
  width: 90%;
}
#main p {
  color: blue;
}
#main p .purple {
  color: purple;
}
#main p.purple {
  color: purple;
}
SassMeister-input.scss
content_copyfile_download
// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// ----

*{
  margin: 0px;
  padding: 0px;
  outline: none;
}
  p{
    color: red;
  }
  #main{
    width: 90%;
    p{
      color: blue;
      .purple{
        color: purple;
      }
    }
    p.purple{
      color: purple;
    }
  }
SassMeister-input-HTML.html
content_copyfile_download
<html>
  <head>
    <title>Test Page</title>
  </head>
  <body>
    <p>First P</p>
    <div id="main">
      <p>Hi, Phill</p>
      <p class="purple">Hi, Phill</p>
    </div>
  </body>
</html>