Character Vault
Any Concept / Any System
Compendium
Your System Come To Life
Roll20 for Android
Streamlined for your Tablet
Roll20 for iPad
Streamlined for your Tablet

Personal tools

SASS

From Roll20 Wiki

Revision as of 09:29, 21 February 2022 by Andreas J. (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Main Page: Sheet Author Tips#Frameworks

SASS/SCSS is a widely used CSS extension language. It's CSS Compatible, so you can start using it by writing plain CSS first, and slowly including more SASS features, while keeping it familiar & looking mostly like CSS.

One of the things you can do it to nest your code, saving you from repeating yourself with things like needing to add .charsheet in from of every class.

/*-------------------------------------------*/
/*-----Main Settings and hide classes--------*/
// comments with two slashes won't appear in the resulting .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 simplify/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;
  }
}

resulting 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;
}

Examples, Sheets, & Sheet template made with SASS:

See Also