Skip to content

Instantly share code, notes, and snippets.

@josephan

josephan/SassMeister-input-HTML.html

Created November 27, 2015 15:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save josephan/94962fd57a3722bf7a35 to your computer and use it in GitHub Desktop.
Save josephan/94962fd57a3722bf7a35 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div class="row">
<select>
<option value="hydrogen" class=>hydrogen</option>
<option value="lithium" class=>lithium</option>
<option value="helium" class=>helium</option>
<option value="nitrogen" class=>nitrogen</option>
<option value="carbon" class=>carbon</option>
<option value="oxygen" class=>oxygen</option>
<option value="nitrogen" class=>nitrogen</option>
</select>
<select class="o-select">
<option value="hydrogen" class=>hydrogen</option>
<option value="lithium" class=>lithium</option>
<option value="helium" class=>helium</option>
<option value="nitrogen" class=>nitrogen</option>
<option value="carbon" class=>carbon</option>
<option value="oxygen" class=>oxygen</option>
<option value="nitrogen" class=>nitrogen</option>
</select>
<select class="o-select o-select--medium">
<option value="hydrogen" class=>hydrogen</option>
<option value="lithium" class=>lithium</option>
<option value="helium" class=>helium</option>
<option value="nitrogen" class=>nitrogen</option>
<option value="carbon" class=>carbon</option>
<option value="oxygen" class=>oxygen</option>
<option value="nitrogen" class=>nitrogen</option>
</select>
<select class="o-select o-select--large">
<option value="hydrogen" class=>hydrogen</option>
<option value="lithium" class=>lithium</option>
<option value="helium" class=>helium</option>
<option value="nitrogen" class=>nitrogen</option>
<option value="carbon" class=>carbon</option>
<option value="oxygen" class=>oxygen</option>
<option value="nitrogen" class=>nitrogen</option>
</select>
</div>
<div class="row">
<select>
<option value="hydrogen" class=>hydrogen</option>
<option value="lithium" class=>lithium</option>
<option value="helium" class=>helium</option>
<option value="nitrogen" class=>nitrogen</option>
<option value="carbon" class=>carbon</option>
<option value="oxygen" class=>oxygen</option>
<option value="nitrogen" class=>nitrogen</option>
</select>
<select class="o-select">
<option value="hydrogen" class=>hydrogen</option>
<option value="lithium" class=>lithium</option>
<option value="helium" class=>helium</option>
<option value="nitrogen" class=>nitrogen</option>
<option value="carbon" class=>carbon</option>
<option value="oxygen" class=>oxygen</option>
<option value="nitrogen" class=>nitrogen</option>
</select>
<select class="o-select o-select--medium">
<option value="hydrogen" class=>hydrogen</option>
<option value="lithium" class=>lithium</option>
<option value="helium" class=>helium</option>
<option value="nitrogen" class=>nitrogen</option>
<option value="carbon" class=>carbon</option>
<option value="oxygen" class=>oxygen</option>
<option value="nitrogen" class=>nitrogen</option>
</select>
<select class="o-select o-select--large">
<option value="hydrogen" class=>hydrogen</option>
<option value="lithium" class=>lithium</option>
<option value="helium" class=>helium</option>
<option value="nitrogen" class=>nitrogen</option>
<option value="carbon" class=>carbon</option>
<option value="oxygen" class=>oxygen</option>
<option value="nitrogen" class=>nitrogen</option>
</select>
</div>
Raw
SassMeister-input.scss
// ----
// libsass (v3.2.5)
// ----
.row { padding: 30px; }
select { margin-right: 30px }
.o-select {
-webkit-appearance: none;
border: 1px solid black;
border-radius: 0;
padding: 5px 15px;
width: 90px;
&--small {
}
&--medium {
padding: 8px 23px;
width: 150px;
font-size: 20px;
}
&--large {
width: 230px;
padding: 11px 31px;
font-size: 30px;
}
}
Raw
SassMeister-output.css
.row {
padding: 30px;
}
select {
margin-right: 30px;
}
.o-select {
-webkit-appearance: none;
border: 1px solid black;
border-radius: 0;
padding: 5px 15px;
width: 90px;
}
.o-select--medium {
padding: 8px 23px;
width: 150px;
font-size: 20px;
}
.o-select--large {
width: 230px;
padding: 11px 31px;
font-size: 30px;
}
Raw
SassMeister-rendered.html
<div class="row">
<select>
<option value="hydrogen" class=>hydrogen</option>
<option value="lithium" class=>lithium</option>
<option value="helium" class=>helium</option>
<option value="nitrogen" class=>nitrogen</option>
<option value="carbon" class=>carbon</option>
<option value="oxygen" class=>oxygen</option>
<option value="nitrogen" class=>nitrogen</option>
</select>
<select class="o-select">
<option value="hydrogen" class=>hydrogen</option>
<option value="lithium" class=>lithium</option>
<option value="helium" class=>helium</option>
<option value="nitrogen" class=>nitrogen</option>
<option value="carbon" class=>carbon</option>
<option value="oxygen" class=>oxygen</option>
<option value="nitrogen" class=>nitrogen</option>
</select>
<select class="o-select o-select--medium">
<option value="hydrogen" class=>hydrogen</option>
<option value="lithium" class=>lithium</option>
<option value="helium" class=>helium</option>
<option value="nitrogen" class=>nitrogen</option>
<option value="carbon" class=>carbon</option>
<option value="oxygen" class=>oxygen</option>
<option value="nitrogen" class=>nitrogen</option>
</select>
<select class="o-select o-select--large">
<option value="hydrogen" class=>hydrogen</option>
<option value="lithium" class=>lithium</option>
<option value="helium" class=>helium</option>
<option value="nitrogen" class=>nitrogen</option>
<option value="carbon" class=>carbon</option>
<option value="oxygen" class=>oxygen</option>
<option value="nitrogen" class=>nitrogen</option>
</select>
</div>
<div class="row">
<select>
<option value="hydrogen" class=>hydrogen</option>
<option value="lithium" class=>lithium</option>
<option value="helium" class=>helium</option>
<option value="nitrogen" class=>nitrogen</option>
<option value="carbon" class=>carbon</option>
<option value="oxygen" class=>oxygen</option>
<option value="nitrogen" class=>nitrogen</option>
</select>
<select class="o-select">
<option value="hydrogen" class=>hydrogen</option>
<option value="lithium" class=>lithium</option>
<option value="helium" class=>helium</option>
<option value="nitrogen" class=>nitrogen</option>
<option value="carbon" class=>carbon</option>
<option value="oxygen" class=>oxygen</option>
<option value="nitrogen" class=>nitrogen</option>
</select>
<select class="o-select o-select--medium">
<option value="hydrogen" class=>hydrogen</option>
<option value="lithium" class=>lithium</option>
<option value="helium" class=>helium</option>
<option value="nitrogen" class=>nitrogen</option>
<option value="carbon" class=>carbon</option>
<option value="oxygen" class=>oxygen</option>
<option value="nitrogen" class=>nitrogen</option>
</select>
<select class="o-select o-select--large">
<option value="hydrogen" class=>hydrogen</option>
<option value="lithium" class=>lithium</option>
<option value="helium" class=>helium</option>
<option value="nitrogen" class=>nitrogen</option>
<option value="carbon" class=>carbon</option>
<option value="oxygen" class=>oxygen</option>
<option value="nitrogen" class=>nitrogen</option>
</select>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment