Sass
Tags: saas, frontend, styling, css
Published: 2020-10-30 18:16:46

**SASS (Syntactically Awesome Stylesheet)** is a CSS pre-processor, which helps to reduce repetition with CSS and saves time. It is more stable and powerful CSS extension language that describes the style of document structurally.

**Why..??**

* It is a pre-processing language which provides indented syntax (its own syntax) for CSS.
* It provides some features, which are used for creating stylesheets that allows writing code more efficiently and is easy to maintain.
* It is a super set of CSS, which means it contains all the features of CSS and is an open source pre-processor, coded in Ruby.
* It provides the document style in a good, structured format than flat CSS.

**Architecture:**

[Link] https://hackernoon.com/saas-software-as-a-service-platform-architecture-757a432270f5

The SaaS provider hosts the application and data centrally — deploying patches .

**Features:**

* It is more stable, powerful, and compatible with versions of CSS.
* It is an open source pre-processor, which is interpreted into CSS.
* It uses its own syntax and compiles to readable CSS.
* It is a super set of CSS and is based on JavaScript.

**SASS supports two syntaxes namely _SCSS_ and _Indented syntax_.**

1. The SCSS (Sassy CSS) is an extension of CSS syntax.
2. Indented-Using this form of syntax, CSS can be written concisely. SASS files use the extension .sass

**Deprecated Syntax:**
1. **=** - It was used instead of : when setting variables and properties to values of Sass Script.
2. **||=** - It was used instead of : whenever you are assigning default value of a variable.
3. **!** - Instead of $, ! was used as variable prefix. Functionality will not be changed when it is used instead of $.

SASS is more powerful and stable that provides power to the basic language by using extension of CSS.

**You can use SASS in three different ways-**
1. As a command line tool
2. As a Ruby module
3. As a plugin for Rack enable framework

**The following lists are some of the CSS extensions used in SASS −**
1. _Nested Rules:_ It is a way of combining multiple CSS rules within one another.
2. _Referencing Parent Selectors:_  It is the process of selecting parent selector by using the & character.
3. _Nested Properties:_ It allows nesting of properties into other properties which leads to grouping of another related code.
4. _Placeholder Selectors:_  Sass supports placeholder selector using class or id selector by making use of @extend directive.

SaaS is defined as the software distribution model deployed on the internet in which a cloud service provider provides applications. It is also known as "on-demand software" or "pay-as-you-go application". 

**Sass Variable:**
The basic syntax for defining a variable is simple: Just use a $ before the variable name and treat its definition like a CSS rule:
      _$<variable name>:<value>;_

Once it's been declared, you can use the variable just as though you were typing the variable:
      $large-font: 50px;
       p {
          font-size: $large-font;
         }
**Sass - Data Types Eg:**
SaaS Script includes seven different data types: numbers, strings, colors, Booleans, null, lists & maps.

_Number:_
test: 10 + 3;    //"plain" numbers added together
test: 10px + 3;  //"plain" number added to a pixel value
test: 10em + 3em; //two "em" values added together

_String:_
$default-font: 'Lucida';
p {
    font-family: $default-font, "Ariel", sans-serif;
}

_Color:_
SaaS Script supports the same color expressions that are supported by CSS: hex values such as #0000, named values such as red, rgb expressions like rgb(100, 39, 153), rgba expressions such as rgba(100, 39, 153, 75), hsl expressions such as hsl(0, 30%, 100%), and hsla expressions such as hsla(0, 30%, 100%, 0.3)

_List:_
A SaaS Script list is a series of values separated by either spaces or commas. 
$body-font: Helvetica, Arial, sans-serif;
$body-margin: 0 0 10px 15px;

_Map:_
In SaaS Script, maps are key-value pairs. Their syntax is slightly different from a list: They must be comma-separated, and the entire map must be wrapped in parentheses:
$red-map: (light: #e57373, medium: #f44336, dark: #b71c1c);

_Booleans & Nulls:_
SaaS Script supports two Boolean values, true and false, as well as the null value, null. These have no direct meaning in CSS, but they're useful in combination with the control directives.


**Sass - Control Directives**
SaaS is a declarative scripting language, an extension to CSS, not a procedural programming language like JavaScript. Despite that, it does have some limited procedural capabilities via its control directives. 

_Conditional Execution - @if_
As you'd expect, the Sass @if directive and its companions @else if and @else, allow you to include Sass code in the CSS output only if certain conditions are met. The basic syntax is simple:

@if <Boolean expression> { 
    <statements> 
}

_sccs: if Conditions_

$test: 3;
p {
   @if $test < 5 { 
       color: blue;  
    }
}

_sccs: Nested if Conditions_

$test: 3;
p {
   @if $test < 5 { 
       color: blue;
       @if $test == 3 {
          text-color: white;
        }
    }
}

_Conditional Looping - @while_
The syntax of the @while directive is very similar to that of @if; just replace the keyword:

 @while <boolean expression> { 
    <statements>
}


_Unconditional Looping - @for_

@for <var> from <start> through <end> {
    <statements>
}

_@each_
Finally, the @each directive will execute a set of items in either a list or a map. For such a powerful structure, the syntax is quite straightforward:

@each <vars> in <list or map> {
   <statements>
}

**4 reasons leading you to React.js for SaaS applications**
1. Reusability of code
    * React.js creates components on single-page applications that 
      eventually function independently. 
    * The components can be further reused for other projects by 
      allowing the SaaS developers to create the base that can be 
      used to build instead of building from the beginning.
2. Fast Rendering
    * The virtual DOM model enables faster rendering. The virtual 
      DOM is an updated version of the original DOM which leads to 
      superior performance, great SEO and easy maintainability.
3. SEO-friendly
    * SaaS applications also need effective Search Engine 
      optimization apart from the other set of features. Google 
      rankings and user experiences should be on the top to let 
      people stay ahead of the competition.
4. Effortless transfer from web page to mobile app
    * This also can be done smoothly as React.js can enable the 
      easy transfer of a single-page application to a mobile app.

**Conclusion**
The full potential of React.js is being realized with companies and their SaaS applications continuously preferring React.js to either build it from scratch or modify the existing version. React.js goes down as a lightweight and simple library that is tailored to meet the modern needs of the developers.

**The SaaS provides various applications such as:**

1. CRM applications
2. Solution to Human Resource (HR)
3. Pre-existing Billing & Invoicing systems
4. Other daily usable application suites

**Open SaaS:**

Open SaaS uses those SaaS applications, which are developed using open source programming language. These SaaS applications can run on any open source operating system and database. 

**Open SaaS has several benefits listed below:**

1. No License Required
2. Low Deployment Cost
3. Less Vendor Lock-in
4. More portable applications
5. More Robust Solution
 
_--------Thanks for the read.---------_