Revision as of 08:17, 21 February 2022

Page Updated:   2022-02-21

This is related to Editing(coding) Character Sheets, which require Pro info to be able to use. Main Page: Building Character Sheets

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

• Learn SCSS/SASS
• Online Compilers: sassmeister playground | cssportal.com
• Beginner's Guide to Using SCSS
• Basic SCSS Nesting
• The processor is called SASS,
  • SCSS is the more common syntax used, as it's compatible with pure CSS.
  • the SASS syntax doesn't use brackets(but is otherwise same as SCSS). SASS-syntax seems to be less used.
• Guides to SASS/SCSS should be interchangeable, apart from using or not using CSS's curly bracket syntax

Examples, Sheets, & Sheet template made with SASS:

• Example snippets of SCSS & PUG, by Andreas J.
• The K-Scaffold - by Scott C.
• Warhammer Fantasy Roleplay 4e Official - well structured & modular scss
• SheetTemplate by Cassie
• Barbaric! sheet using only a bit of scss, by Andreas J.
• Stargate RPG active sheet using some PUG & SCSS, by Andreas J.
• there are several sheets in the sheet repository made using either or both, you can search through it to find more examples

See Also

• Sheet Author Tips#PUG
• Sheet Author's Journey
• Sheet Development: Examples, Templates & Pattern Libraries