info

Schss is a CCS pre-processor similar to SASS with some small differences in syntax. It includes stuff like nesting and variables but also maxins, control structures to make/add to the QOL of the developer whilst also reducing the need for repetition which is a common 'issue' in standard CSS. It is fully developed and maintained by Matthias Schoofs.

installation

Given you have the schss-compiler project and a demo-application project in the same directory, you can link the schss-compiler to the demo-application by following these steps:

1. right-click on the schss-compiler project and select 'open in terminal'

2. type 'npm i' and press enter

3. type 'npm build' and press enter

4. type 'npm pack' and press enter

5. right-click on the demo-application project and select 'open in terminal'

6. type 'npm link ../schss-compiler/schss-compiler-1.0.0.tgz' and press enter (make sure you have the correct version)

7. now the file should be in the 'dependencies' in the package.json, check if this is the case before continuing

8. type 'npm i' and press enter

9. write your .schss code and import it into the main.ts file

10. type 'npm run dev' and press enter

11. the .schss file should now be compiled into css and applied to the demo-application.

12. to run tests, type 'npm run test' and press enter

prior knowledge

Using Schss requires the developer to have a basic understanding of css. Being familiar with SASS is a bonus.

Insights

In this README we will explain:

• Variables
• Lists
• Selectors
• Classes
• Styling statement
• Maxins
• Control structures
• Pseudo-classes
• Color Declaration

Code

Variables

Rules and conventions

• starts with '--' \
• name is in UPPERCASE, separated by '_' \
• '=>' to declare the value

Calling the value of a variable: =VAR_NAME=

Example

// define variables
--BG_COLOR => Color(green);
--HALF => 50%;

// use of variable
[div] {
width: =HALF=;
}

Compiled

Schss

--BG_COLOR => Color(green);
--HALF => 50%;
[div] {
width: =HALF=;
background-color: =BG_COLOR=;
}

CSS

[div] {
width: 50%;
background-color: green;
}

Lists

Rules and conventions

• starts with '&' followed by the name of the list in lowercase
• '=>' to declare the value(s)
• values can include words, numbers and unit of measurement
• values are separated by ',' and encapsulated in '(' ')'
• usage in each loop like :EACH &listname
• calling the value of current item in the loop: &ITEM

Example

// define list
&colors => (green, blue, yellow, purple, grey); \

// usage of list
:EACH &colors {
   .class-&ITEM {
     background-color: &ITEM;
     color: &ITEM;
   }
}

Compiled

Schss

&colors => (green, blue, yellow);
:EACH &colors {
.class-&ITEM {
background-color: &ITEM;
color: &ITEM;
}
}

CSS

.class-green {
background-color: green;
color: green;
}

.class-blue {
background-color: blue;
color: blue;
}

.class-yellow {
background-color: yellow;
color: yellow;
}

Selectors

Rules and conventions

• standard html class are encapsulated in '[' ']' \
• '#' for class with given id \
• '.' for classnames that are chosen by the developer

Example

// standard html element
[div] { }

// class with id 'circle'
#circle { }

// class with class-name 'square'
.square { }

Compiled

Schss

[div] { }
#circle { }
.square { }

CSS

div { }
#circle { }
.square { }

Classes

Rules and conventions

• class is either standard html class or a class with a given id or classname
• a class can contain (multiple):
  • styling-statement
  • maxins
  • control structures
  • other classes
  • pseudo-classes

Example

// class with styling-statement
.square {
   width: 100%;
   height: 100%;
}

// class with maxin
.circle {
   @style(flex-center);
}

// class with control structure
.triangle {
   :IF 1<2 {
     width: 100%;
   }
}

// class with other classes
.square {
   @style(flex-center);
   .circle {
     width: 50%;
     height: 50%;
   }
}

// class with pseudo-class
.square {
   ~hover{
   background-color: Color(red);
  }
}

Compiled

Schss

.circle {
width: 100%;
height: 100%;
@style(flex-center);
:IF 1<2 {
color: blue;
.inner {
width: 50%;
height: 50%;
}
~active { background-color: red; }
}
}

CSS

.circle {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: blue; \

.inner {
width: 50%;
height: 50%;
}
}

.circle:hover {
background-color: red;
}

Styling statement

Rules and conventions

• property is lowercase, separated by '-'

• value can be:

  • lowercase word
  • number (& unit of measurement)
  • specific color declaration (see Color Declaration)
  • reference to a variable
  • parameter name
  • an item in a loop
  • any css-accepted value
  • a list of the above

• multiple values are separted by '|'

Example

// lowercase word
display: flex;

// number
margin: 0;

// number with unit of measurement
width: 100%;

// specific color declaration
background-color: Color(#FF55A3);

// reference to a variable
color: =VAR_NAME=;

// parameter name
padding: $pad;

// item in a loop
font-size: &ITEM;

// list of the above
border: 2px solid Color(rgb(255,162,3));

Compiled

Schss

display: flex;
margin: 0;
width: 100%;
background-color: Color(#FF55A3);
color: =VAR_NAME=;
padding: $pad;
font-size: &ITEM;
border: 2px solid Color(rgb(255,162,3));

CSS

display: flex;
margin: 0;
width: 100%;
background-color: #FF55A3;
color: whitesmoke;
padding: 0.5rem;
font-size: 20px;
border: 2px solid rgb(255,162,3);

Maxins

Rules and conventions

• maxin is defined with 'def' followed by the name of the maxin
• parameters (optional) are written between '(' and ')' but require a default value
• the set styling of a maxin is written between '{' and '}'
• maxins can include styling-statement, other maxins and if-statements
• maxin is called with '@style' followed by the name of the maxin
• when using a maxin with parameters, giving parameters is optional

Example

// defining the maxin
def flex-center {
   display: flex;
   justify-content: center;
   align-items: center;
}

def color-schema($bg: Color(#3AFF65), $text: Color(white)) {
   background-color: $bg;
   color: $text;
}

// usage of the maxin
.circle {
   @style(flex-center);
}

// usage of the maxin with parameters
.square {
   @style(color-schema($bg: Color(#FF55A3), $text: Color(lightblue));
}

// usage of the maxin with parameters, only giving one
.triangle {
   @style(color-schema($bg: Color(purple));
}

Compiled

Schss

def flex-center {
display: flex;
justify-content: center;
align-items: center;
}

div {
@style(flex-center);
}

CSS

div {
display: flex;
justify-content: center;
align-items: center;
}

Control structures

Rules and conventions

• if-statement is written with ':IF' followed by the condition without any encapsulation followed by '{' and '}'
• else-statement is nested inside the if-statement and written with ':ELSE' followed by '{' and '}'
• a foreach loop is written with ':EACH' followed by the name of the list without any encapsulation followed by '{' and '}'

Example

// if-statement
:IF 1<2 {
}

// else-statement
:IF 1>2 {
  :ELSE {
 }
}

// foreach loop
:EACH &colors {
}

Compiled

Schss

&colors => (green, yellow, purple);
:IF 1<2 {
display: block;
}

:IF 1>2 {
color: red;
:ELSE {
color: blue;
}
}

:EACH &colors {
background-color: &ITEM;
}

CSS

display: block;
color: blue;
background-color: green;
background-color: yellow;
background-color: purple;

Pseudo-classes

Rules and conventions

• pseudo-classes are written with '~' followed by the name of the pseudo-class
• pseudo-classes can include styling-statements or if-statements

Example

// pseudo-class
.square {
   ~hover{
   background-color: Color(red);
  }
}

Compiled

Schss

.square {
~hover{
background-color: Color(red);
}
}

CSS

.square:hover {
background-color: red;
}

Color Declaration

Rules and conventions

• color is written with 'Color' followed by the color in the format of:
  • normal: color-name
  • hex: #XXXXXX (6 digits/letters required)
  • rgb: rgb(X,X,X)

Example

// normal color
background-color: Color(green);

// hex color
background-color: Color(#FF55A3);

// rgb color
background-color: Color(rgb(255,162,3));

Compiled

Schss

background-color: Color(green);
background-color: Color(#FF55A3);
background-color: Color(rgb(255,162,3));

CSS

background-color: green;
background-color: #FF55A3;
background-color: rgb(255,162,3);

EBNF

StylingFileDeclaration ::= { ListDeclaration | VariableDeclaration | Maxin } { ControlStructure | ClassDeclaration }

VariableDeclaration ::= "--" VariableName "=>" Value ";"

ClassDeclaration ::= ( ClassNameDefault | ClassNameExtra | ClassNameId | ClassNameLoop ) "{" { MaxinUsageDeclaration | StyleStatement | ClassDeclaration | PseudoDeclaration | ControlStructure } "}"

MaxinUsageDeclaration ::= "@" "style" "(" MaxinName [ "(" Parameter { "," Parameter } ")" ] ")" ";"

VariableName ::= ( UPPER_LETTER | UNDERSCORE )+

ClassNameDefault ::= "[" LOWER_LETTER+ [ NUMBER ] "]" ClassNameExtra ::= "." ( LOWER_LETTER | UPPER_LETTER )+ ClassNameId ::= "#" ( LOWER_LETTER | UPPER_LETTER )+ ClassNameLoop ::= ClassNameExtra "-" LoopReference

Property ::= ( LOWER_LETTER | "-" )+ Value ::= ( LowerWordDeclaration | ColorDeclaration | NumberDeclaration | VariableRef | ParamName | LoopReference | TransformValue ) [ UnitOfMeasurementDeclaration ]

TransformValue ::= LowerWordDeclaration [ UPPER_LETTER ] "(" NumberDeclaration UOM { "," NumberDeclaration UOM } ")"

ValueList ::= Value { "|" Value }

ColorDeclaration ::= "Color" "(" ColorValue ")"

ColorValue ::= ColorTextValue | HexColorValue | RgbColorValue | LoopReference

ColorTextValue ::= COLOR_VALUE HexColorValue ::= HEX_COLOR RgbColorValue ::= "rgb" "(" RGB_VALUE ")"

LoopReference ::= "&" "ITEM" VariableRef ::= "=" VariableName "="

LowerWordDeclaration ::= LOWER_LETTER+ NumberDeclaration ::= [ "-" ] NUMBER [ "." NUMBER ]

StyleStatement ::= Property ":" ValueList ";"

UnitOfMeasurementDeclaration ::= UOM

Maxin ::= "def" MaxinName [ "(" Parameter { "," Parameter } ")" ] "{" { StyleStatement | MaxinUsageDeclaration | IfStatementDeclaration } "}"

MaxinName ::= ( LOWER_LETTER | "-" )+

Parameter ::= ParamName ":" Value

ParamName ::= "$" LOWER_LETTER+

PseudoDeclaration ::= "~" LowerWordDeclaration "{" { StyleStatement | IfStatementDeclaration } "}"

EachLoopDeclaration ::= ":" "EACH" ListName "{" { ControlStructure | ClassDeclaration } "}"

IfStatementDeclaration ::= ":" "IF" Condition "{" { ControlStructure | ClassDeclaration | StyleStatement } [ ElseStatementDeclaration ] "}"

ElseStatementDeclaration ::= ":" "ELSE" "{" { ControlStructure | ClassDeclaration } "}"

ControlStructure ::= EachLoopDeclaration | IfStatementDeclaration

Condition ::= ( LOWER_LETTER+ | UPPER_LETTER+ | NumberDeclaration | MATH_OPERATORS | LoopReference | "." | "(" | ")" )+

ListName ::= "&" LowerWordDeclaration

ListDeclaration ::= ListName "=>" "(" ListValueDeclaration { "," ListValueDeclaration } ")" ";"

ListValueDeclaration ::= ( LowerWordDeclaration | NumberDeclaration | UOM | ColorTextValue )+

ROUND_OPEN ::= "("
ROUND_CLOSE ::= ")"
SQUARE_OPEN ::= "["
SQUARE_CLOSE ::= "]"
CURLY_OPEN ::= "{"
CURLY_CLOSE ::= "}" \

HEX_COLOR ::= "#" HEX HEX HEX HEX HEX HEX
fragment HEX ::= [0-9a-fA-F]
RGB_VALUE ::= RGB_NUM "," RGB_NUM "," RGB_NUM
fragment RGB_NUM ::= "25" [0-5] | "2" [0-4] [0-9] | "1" [0-9] [0-9] | [1-9] [0-9]? | "0" \

NUMBER ::= DIGIT+
DIGIT ::= [0-9] \

AND ::= "&"
OR ::= "|"
PLUS ::= "+"
COMMA ::= ","
DOLLAR ::= "$"
HASH ::= "#"
DOT ::= "."
AT ::= "@"
UNDERSCORE ::= "_"
MIN ::= "-"
ARROW ::= "=>"
SEMICOLON ::= ";"
COLON ::= ":"
EQUALS ::= "="
DEFINE ::= "def"
LOWER_LETTER ::= [a-z]
UPPER_LETTER ::= [A-Z]
LETTER ::= [a-zA-Z]
UOM ::= "px" | "%" | "vh" | "rem" | "deg" | "seconds"
MATH_OPERATORS ::= "=" | "<" | ">" | "<=" | ">=" | "==" | "!="
TILDE ::= "~"
WS ::= [ \t\r\n]+ -> skip
COMMENT ::= ">>>" ~[\r\n]* -> skip \

COLOR ::= "Color"
COLOR_VALUE ::= "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen"

Conclusion

We wish you happy coding with Schss!
If you have any questions related to bugs or other issues, please email me at [email protected].