PUG->HTML & SCSS->CSS examples snippets, for Roll20 character sheets

sheet.css

/*-------------------------------------------*/
/*-----Main Settings and hide classes--------*/
.charsheet .main-settings {
  display: none;
  position: relative;
  margin-left: 0;
}
.charsheet .main-settings .container {
  width: 850px;
}
.charsheet .main-settings .input-row label {
  display: inline-block;
  width: auto;
}
.charsheet .main-settings .input-row input {
  margin-right: 30px;
}
.charsheet .main-settings .input-row select {
  width: 45%;
  margin-right: 15px;
}
.charsheet input.main-options.options-flag + span,
.charsheet input[type=radio]:checked ~ .master-container input.options-flag + span {
  font-family: pictos;
  font-style: normal;
}

sheet.html

<datalist id="dexskills">
    <option value="Acrobatics">Acrobatics</option>
    <option value="Archaic Guns">Archaic Guns</option>
    <option value="Blaster">Blaster</option>
    <option value="Blaster Artillery">Blaster Artillery</option>
    <option value="Bowcaster">Bowcaster</option>
    <option value="Bows">Bows</option>
    <option value="Brawling Parry">Brawling Parry</option>
    <option value="Contortions">Contortions</option>
    <option value="Dancing">Dancing</option>
    <option value="Dodge">Dodge</option>
    <option value="Firearms">Firearms</option>
    <option value="Grenade">Grenade</option>
    <option value="Lightsaber">Lightsaber</option>
    <option value="Melee Combat">Melee Combat</option>
    <option value="Melee Parry">Melee Parry</option>
    <option value="Missile Weapon">Missile Weapon</option>
    <option value="Pick Pocket">Pick Pocket</option>
    <option value="Running">Running</option>
    <option value="Shockball Fling">Shockball Fling</option>
    <option value="Shockball Scoop">Shockball Scoop</option>
    <option value="Slingshot">Slingshot</option>
    <option value="Thrown Weapons">Thrown Weapons</option>
    <option value="Vehicle Blasters">Vehicle Blasters</option>
    <option value="Wedsphere">Wedsphere</option>
</datalist>

sheet.pug

//- PUG variables, this comment doesn't show up in the HTML
-var dex = ["Acrobatics", "Archaic Guns", "Blaster", "Blaster Artillery", "Bowcaster", "Bows", "Brawling Parry", "Contortions", "Dancing", "Dodge", "Firearms", "Grenade", "Lightsaber", "Melee Combat", "Melee Parry", "Missile Weapon", "Pick Pocket", "Running", "Shockball Fling", "Shockball Scoop", "Slingshot", "Thrown Weapons", "Vehicle Blasters", "Wedsphere"];
//- example of using loops in PUG to create multiple elements more easily
datalist#dexskills
    each skill in dex
        option(value=`${skill}`)=skill

sheet.scss

/*-------------------------------------------*/
/*-----Main Settings and hide classes--------*/
// comments with two slashes won't appear in the reulting .css,  which is handy for writing extra comments thaat aren't relevant to the css.
// SCSS enables nesting of classes, saving time in writing, and making it easier to read/organize the CSS. There are also tother features,but this is the main one I've started to use, as it helps with reading the scss/css. One can start from pure css, and then bit by bit simplifiy/refactor it to use more scss features
.charsheet {
	.main-settings {
	    display: none;
		position: relative;
		margin-left: 0;
		
		.container {
			width: 850px;
		}
		.input-row {
			label {
				display: inline-block;
				width: auto;
			}
			input {
				margin-right: 30px;
			}
			select {
				width: 45%;
				margin-right: 15px;
			}
		}
	}
  input.main-options.options-flag + span,/*displays the cog icon*/
  input[type=radio]:checked ~ .master-container input.options-flag + span {
      font-family: pictos;
      font-style: normal;
  }
}