1. SASS Structure
The SASS programming has some basic structure, which has basis upon some rules and regulations, just like every other programming language, and act as a guideline for the programmers. Similarly, SCSS provides some principles to structure its code properly. Extending CSS stylesheets, SCSS has many more features in its structure that make it prominent. There are two divisions in the SCSS structure which include SASS Statements and Expressions.
2. Statements in SASS Structure
2.1. What are SASS Statements?
Similar to CSS, SASS stylesheets comprise statements in their declarations. These statements are processed to generate the CSS code. Further, some of the statements are in the form of blocks containing others as a child also known as SCSS nesting. Also, we separate the SCSS statements by semi-colons ; or indents as there are two types of SCSS programming. Following are the SCSS statements with examples of each type.
2.2. Universal Statements
These universal SCSS statements are accepted globally throughout SASS stylesheets. Below are some universal statements.
- Variable declarations e.g. $var: value
- Flow control at-rules e.g. @if and @each rules
- The @error, @warn, and @debug rules
2.3. CSS Statements
The CSS statements are helpful to write CSS code and produce stylesheets. In addition, these CSS declarations are accepted anywhere except within the @function directive.
- Style rules like body { /* ... */ }
- The at-rules like @media and @font-face
- Mixin employing via @include
- The CSS @at-root rule
2.4. Top-Level Statements
In a SASS stylesheet, we write the top-level statements only at a higher level. Or maybe nested in CSS statement but at the top level.
- Module loads, using the @use rule
- Imports, using the @import directive
- Mixin definitions using the @mixin rule
- Function definitions using the @function rule
2.5. Other Statements
The other SCSS structure statements may include the below as well.
- CSS style declarations have certain limitations or you may say rules to follow
- For a CSS property height: 100% is allowed within style rules and some CSS at-rules
- Similarly, we always include the @extend rule only within the style rules
3. Expressions in SASS Structure
3.1. What are SASS Expressions?
Since a CSS style declaration comprises two parts within stylesheets. These include a property on the left side and a value on the right side which we call as an expression. Further, we consider any value in CSS styles as a SASS expression. However, the SCSS expressions have more powers and have fewer limitations, unlike CSS values. In addition, while writing the SCSS style rules, we assign the expressions to the SCSS mixins and functions as arguments. We also term these SCSS expressions as SassScript.
3.2. Literals Expressions
In the SCSS programming language, literals are expressions with static values.
- Numbers: These may have respective units or sometimes without units, e.g. 15 or 85%
- Strings: The string values can have quotes or without quotes, e.g. italic or "Times New Roman"
- Colors: Colors can have representation as name or #124432, etc
- Booleans: These can be true or false
- Singleton: It has only value i.e. null
- List of Values: These values are separated by spaces or sometimes by commas and written in brackets () or [] or without brackets, e.g. 1.5em 1em 0 2em, Helvetica, Arial, sans-serif, or [col1-start]
- Maps: These assign values using keys e.g. ('background': red, 'foreground': brown)
3.3. Operations Expressions
SCSS structure comprises syntax to undergo certain operations like the ones listed below.
- == and != These checks if two values are the same or different
- +, -, *, /, and % Arithematic operator to perform mathematical operations
- <, <=, >, and >= These operators make a comparison between two values
- and, or, and not Boolean Operators tell that a value is true, false, or null
- +, -, / Also used for strings concatenation
- ( and ) It explicitly controls the precedence order of operations
3.4. Other Expressions
Some other SCSS expressions are as follows.
- Variables: like $fontcolor
- Function Calls: SCSS core library functions or user defined functions, e.g. nth($list, 2) or var(--main-bg-color)
- Special Functios: Which have their own parsing rules, e.g. calc(1px + 70%) or url(https://example.com/logo.png)
- Parent Selector: e.g. &amp;
- !important: Its value is parsed as unquoted string