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

Difference between revisions of "SASS"

From Roll20 Wiki

Jump to: navigation, search
(transclude)
 
m
 
(One intermediate revision by one user not shown)
Line 5: Line 5:
 
One of the things you can do it to nest your code, saving you from repeating yourself with things like needing to add <code>.charsheet</code> in from of every class.
 
One of the things you can do it to nest your code, saving you from repeating yourself with things like needing to add <code>.charsheet</code> in from of every class.
  
<pre data-language="scss" style="overflow:auto;white-space:pre-wrap;">
+
<pre data-language="scss">
 
/*-------------------------------------------*/
 
/*-------------------------------------------*/
 
/*-----Main Settings and hide classes--------*/
 
/*-----Main Settings and hide classes--------*/
Line 41: Line 41:
 
</pre>
 
</pre>
 
resulting CSS:
 
resulting CSS:
<pre data-language="css" style="overflow:auto;white-space:pre-wrap;">
+
<pre data-language="css">
 
/*-------------------------------------------*/
 
/*-------------------------------------------*/
 
/*-----Main Settings and hide classes--------*/
 
/*-----Main Settings and hide classes--------*/
Line 80: Line 80:
  
 
Examples, Sheets, & Sheet template made with SASS:
 
Examples, Sheets, & Sheet template made with SASS:
* [https://github.com/Kurohyou/Roll20-Snippets/tree/main/K_Scaffold The K-Scaffold] - by [[Scott C.]]
 
* [https://github.com/Roll20/roll20-character-sheets/tree/master/Warhammer%20Fantasy%20Roleplay%204e%20Official Warhammer Fantasy Roleplay 4e Official] - well structured & modular scss
 
 
* {{gist|Anduh/968bdae0c8dda4f7171fab2561acbea2 Example snippets of SCSS & PUG}}, by [[Andreas J.]]
 
* {{gist|Anduh/968bdae0c8dda4f7171fab2561acbea2 Example snippets of SCSS & PUG}}, by [[Andreas J.]]
 +
* {{K-scaffold}} - by [[Scott C.]]
 +
* [https://github.com/Roll20/roll20-character-sheets/tree/master/Warhammer%20Fantasy%20Roleplay%204e%20Official Warhammer Fantasy Roleplay 4e Official] - well structured & modular scss
 
* {{repo|clevett/SheetTemplate SheetTemplate}} by [[Cassie]]
 
* {{repo|clevett/SheetTemplate SheetTemplate}} by [[Cassie]]
 
* {{repo|Roll20/roll20-character-sheets/tree/master/Barbaric Barbaric!}} sheet using only a bit of scss, by [[Andreas J.]]
 
* {{repo|Roll20/roll20-character-sheets/tree/master/Barbaric Barbaric!}} sheet using only a bit of scss, by [[Andreas J.]]
Line 91: Line 91:
 
* [[Sheet Author Tips#PUG]]
 
* [[Sheet Author Tips#PUG]]
 
* [[Sheet Author's Journey]]
 
* [[Sheet Author's Journey]]
 +
* Sheet Development: [[Character_Sheet_Development/Complete_Examples|Examples]], [[Character_Sheet_Development/Sheet_Templates|Templates]] & [[Character Sheet Development/Pattern Libraries|Pattern Libraries]]
 
[[Category:Character Sheet Creation]] </noinclude>
 
[[Category:Character Sheet Creation]] </noinclude>

Latest revision as of 09:29, 21 February 2022

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:

[edit] See Also