Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

CSS Pre-Processors: Exploring SASS Processor

This article introduces you to the CSS pre-processor SASS. We will discuss here all the main principles and techniques involved by this great CSS preprocessor tool.

This article introduces you to the CSS pre-processor SASS. Here, we will be covering the following topics with relevant and simple examples (source code of the examples is attached at the end of the article for your reference):

  • Introduction
  • Installation of Ruby
  • Concepts
    • Variables
    • Nesting
    • Partials
    • Import
    • Mixins
    • Inheritance
    • Operators
  • Difference between SASS and less preprocessor

Introduction

What is SASS Preprocessor?

SASS stands for Syntactically Awesome Stylesheet which is a CSS Preprocessor and a style sheets scripting language that is interpreted into Cascading Style Sheet and also known as “CSS with Super Powers”. SASS was developed by Natalie Weizenbaum and Chris Eppstein and designed by Hampton Catlin in 2007. SASS is implemented officially as open source and is built upon Ruby (It is an object oriented programming language). SASS consists of two syntaxes i.e. .scss (sassy css) which is most commonly used syntax and another is an older syntax, called “The indented syntax”. It is influenced by CSS, Haml and Yaml languages. The SASS files are saved with the extension .sass.

Installation of RUBY

To proceed with SASS in windows, we first need to install Ruby. In Mac, Ruby is already pre-installed.

Following are the steps to install Ruby in the windows:

  • Download the Ruby version setup from the following link https://www.ruby-lang.org/en/downloads/ and after downloading, install the Ruby in your system.
  • After successfully installing the Ruby on the system, you need to add the Ruby bin folder to your PATH user variable and add a system variable to make the gem command work.

For user variable section:

  1. Right click on My Computer
  2. Select properties
  3. Select the Advanced tab and click on Environment variables button
  4. Double Click on PATH in the user variable section and add path to your Ruby bin folder, if there is already path set for anything else, then put semicolon after it and add the following line to it C:\ruby\bin and then press OK.
environment_variable

Figure 1. environment_variable.

_

For System variable section:

  • Press New button
  • In variable name field, enter the name RYBUOPT and in the variable value field, enter rubygems and press OK on all the windows.
system_variable

Figure 2. system_variable.

  • Open your command prompt and enter the following line:
gem install sass 
  • If ruby is successfully installed then you will get following notification in your command prompt.
command_prompt

Figure 3. command_prompt.

Features of SASS

  • Variables: Variables are placeholder for a value. It is always defined with a dollar sign ($). For example: $color: #ffffff;
  • Nesting: Nesting is to avoid rewriting the selectors multiple times.
  • Partials: Partials is simple Sass file which is named using underscore. For example: _partials.sass.
  • Import: Import is used to divide your CSS file into smaller sections and is used to maintain it properly.
  • Mixins: Mixins is used to make groups in declaration of CSS which you can reuse through your whole site.
  • Extend/Inheritance: Inheritance is used to extend the property of CSS from one selector to another.
  • Operators: Operators is a symbol that represents a specific action such as basic math operation like addition(+), substraction(-), multiplication(*) and so on.

Example

Listing 1 shows simple example of how to write a sass file.

Listing1. hello_world.html

<html>
<head>
<title> Basic example of sass</title>
<link rel="stylesheet" type="text/css" href="style.css" />

</head>
<body class="container">
<h1>Hello world!!!!!!!!</h1>
<h4>SASS stands for Syntactically Awesome Stylesheet</h4>
</body>
</html>

Save the above file as hello_world.html. Below we have created a simple style.scss file; its code is similar to CSS file but only difference is that we have to save this file with the extension .scss or .sass. Both the files Listing 1 and style.scss files should be created inside the ruby folder.

style.scss

.container{
	background:#cccccc;
}
h1{
	color: blue;
}
h4{
	color: red;
}

After creating these two files, we should write the following line in the command prompt as shown. You should specify the correct path where your style.scss file is saved.

sass --watch C:\ruby\lib\sass\style.scss:style.css

After writing the correct command in the command prompt you’ll get the following line as shown in the Figure 4.

helloworld_example_cmd

Figure 4. helloworld_example_cmd.

After writing these lines in the command prompt, then it will automatically create style.css file in the folder. Whatever changes we do in the style.scss file, then style.css file will get changed automatically. After doing changes or updating the style.scss file, you can go to the command prompt and then you can see the following line as shown in the Figure 5.

helloworld_example_cmd1

Figure 5. helloworld_example_cmd1.

We can continue to write the sass code in the .scss file and sass will automatically keep on detecting the changes and overwriting the CSS file every time we save the original file.

_ helloworld_example_cmd2

Figure 6. helloworld_example_cmd2.

Output

  • Save the file as hello_world.html in your system.
  • Just open the file in the browser and you will see the picture as in Figure 7 in the browser.
_ Output of hello_world.html

Figure 7. Output of hello_world.html.

Concepts

Variables

Variables are placeholders to store a value or information that can be reused in the Stylesheet. It is always defined with a dollar sign ($). The SassScript support four data-type i.e. numbers, strings, colors and Booleans. In variables we can store things like color, font, padding, position etc, which can be reused throughout the Stylesheet. The main advantage of using the variables is that you can make changes easier and quicker. The variables always end with semicolon (;).

Data types

SASS supports four main data types:

  • Numbers: It captures the numeric values. (Example: 1.5, 15, 20px).
  • Strings: It contains multiple characters with quote or without quote. (Example: “manisha”, “nisha”, “isha”)
  • Colors: The CSS colors expression returns SassScript color value. (Example: blue, #F5F5F5, rgba(255, 0, 0, 0.5).
  • Booleans: It have two types of values i.e. true and false.(Example: true, false )

We can declare the variables in the following ways:

$base-color: #333; 
$brand-color: red;
$header-background-color: $color-brand;

Example

Listing 2 shows a simple example of how to use variables in the .scss file

Listing 2. variable_example.html

<html>
<head>
<title> Example using variable </title>
<link rel="stylesheet" type="text/css" href="variable.css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
		<div class="col-md-6">
			<center>
				<h3>First Column</h3>
			</center>
			<div class="col-md-6">
			<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit
						amet, consectetur, adipisci velit..</p>
			</div>
<div class="col-md-6">
			<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit
						amet, consectetur, adipisci velit..</p>
			</div>
		</div>
<div class="container">
			<div class="row">
				<div class="col-md-6">
					<center><h3>Second Column</h3></center>
						<div class="col-md-6">
<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..</p>
				</div>
<div class="col-md-6">
					<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..</p>
				</div>
</div>
</div>
			</div>
		</div>
	</div>
</body>
</html>

Below is the code of the scss file:

variable_style.scss

$primaryColor: #BA55D3;
$font-stack:    Montserrat Alternate, sans-serif;

.container {
 	 $primaryColor: #F5F5F5;
 	 background: $primaryColor;
  font: 100% $font-stack;
}

p {
  	color: $primaryColor;
}
 .col-md-6 h3{
 		font: 100% $font-stack;
		background:#FA8D03;
}

Details of the code

  • In the example, we have used bootstrap library files that show how variables are used and defined in the .scss file.
  • The $primaryColor: #BA55D3; line define the variable in the .scss file. Here we have defined a variable name as $primaryColor and have placed a particular value. The variables are always declared with the dollar sign ($) and have ended by using semicolon (;).

When CSS is generated, it will look like the following:

variable_style.css

.container {
  	background: #F5F5F5;
 	 font: 100% Montserrat Alternate, sans-serif; 
}
p {
  	color: #BA55D3; 
}
.col-md-6 h3 {
  	font: 100% Montserrat Alternate, sans-serif;
  	background: #FA8D03; 
}

Output

  • Save the file as variable_example.html in your system.
  • Just open the file in the browser and you will see the picture as in Figure 8 in the browser.
Output of variable_example.html

Figure 8. Output of variable_example.html.

Nesting

Nesting is to avoid rewriting the selectors multiple times. Selectors are nested inside of one another to create compound selectors. It allows to break the endless long selectors of CSS. The SASS allows you to nest the CSS depending upon the visual hierarchical of your HTML. The tag which is nested in the .scss file automatically gets updated in the .css file.

We can declare the nesting selector which avoids the repetition, in the following ways:

 nav ul{ }
nav li{ }
nav a{ }
 

Problem here is, we are repeating our nav{ } selector again and again and it consumes a lot of time. Nesting selector in SASS allows clustering of rule set inside other rule set by reducing repetitive code. Simply put, these children’s inside the nav { } parent and our code becomes as shown below:

nav{
  ul{ }

  li{ }

  a{ }
  }
 

Example

Listing 3 shows how to use nesting format in the .scss file

Listing 3. nesting.html

<html>
<head>
<title> Nesting Example in SASS</title>
<link rel="stylesheet" type="text/css" href="nesting.css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

</head>
<body>
	<nav class="container">
		<ul class="nav navbar-nav navbar-inverse">
			<li><a href="home.html">Home</a></li>
			<li><a href="about.html">About Us</a></li>
			<li><a href="contactus.html">Contact Us</a></li>
		</ul>
	</nav>
</body>
</html>

Below is the code of the scss file used in nesting format, save it as nesting.scss file.

nesting.scss

nav{
 	 ul{
    		margin: 0;
   		 padding: 1;
   		 list-style: none;
}
 	 li{
    		display: inline-block;
   	 }
 	 a{
    		display: block;
    		padding: 6px 12px;
    		text-decoration: none;
    	}
    }

Details of the code

  • In the above example we have used bootstrap library files. Here we have shown that how nesting format is used in the .scss file.
  • In .scss file we have nested ul, li and a tag inside the nav tag and have defined different styles in it.
As in the nesting.scss code we can see that ul, li and a is nested inside the nav tag. When CSS file is generated automatically then you can see the code as follow: nesting.css
nav ul {
  margin: 0;
 padding: 1;
  list-style: none; }
nav li {
  display: inline-block; }
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none; }

Output

  • Save the file as nesting_example.html in your system.
  • Just open the file in the browser and you will see the picture as in Figure 9 in the browser.
Output of nesting.html

Figure 9. Output of nesting.html.

Partials

Partials are simple Sass files which can be written using underscore as _partials.scss. The sass doesn’t compile the normal css file as underscore only let the sass know that this file is partial and it should not generate the CSS file but it can import these files without using the underscore. For example, refer the import section as given below.

Import

Import is used to divide your CSS file into smaller files and is used to maintain them properly. The @import command is used in the .scss file and not in the command line. The partials file, which is named using underscore (like _style.scss) can be imported in another .scss file. Sass will import a file without using underscore (@import ‘style’) and it combines both files i.e. file without underscore and with underscore and then it displays the styles of both files in the automatically generated CSS file. We can import the file without using .scss extension as SASS will automatically recognize the partial file.

Below code is used to import the partial file of .scss which is declared using underscore.

@import ‘style’;

Example

Listing 4 shows simple example of how to import the partial file in the .scss file

Listing 4. import_example.html

<html>
<head>
<title> Example using import feature</title>
<link rel="stylesheet" type="text/css" href="import.css" />
</head>
<body class="container">
<nav class="container">
		<ul class="nav navbar-nav navbar-inverse">
			<li><a href="home.html">Home</a></li>
			<li><a href="about.html">About Us</a></li>
			<li><a href="contactus.html">Contact Us</a></li>
		</ul>
	</nav>
<h1>Hello world!!!!!!!!</h1>
<h4>SASS stands for Syntactically Awesome Stylesheet</h4>
</body>
</html>

Below is the code of the scss file which we have saved as _partial.scss. And below the _partial.scss file we have created another .scss file named as import.css. In this file we have imported the _partial.scss file by just writing its name without using underscore and .scss. Both files display the styles and this will automatically generated CSS file.

_partial.scss

nav{
  ul{
    margin: 0;
    padding: 1;
    list-style: none;
}

  li{
    display: inline-block;
    }

  a{
    display: block;
    padding: 6px 12px;
    text-decoration: none;
    }
  }

import.scss

@import ''partial'';
.container {
  background: #0F0A14; 
}

h1 {
  color: #77C1EF;
 }

h4 {
  color: #B98D25; 
}  

Details of the code

  • In the above example we have used the import directive which defines styles of another .scss file and which can be re-used throughout the Stylesheet.
  • We have created two .scss files and have imported one .scss file into other.
  • The @import ''partial''; line imports the _partial.scss file into the import.scss file. After importing the partial.scss file in import.scss file then both files styles get displayed in the output.

The CSS will combine both files i.e. _partial.scss and import.scss and displays the styles of both files in the CSS file “ import.css” which will automatically get generated as shown below.

import.css

nav ul {
  	margin: 0;
  	padding: 1;
  	list-style: none; 
 }
nav li {
 	 display: inline-block; 
}
nav a {
  	display: block;
  	padding: 6px 12px;
 	 text-decoration: none; 
}

.container {
  background: #0F0A14; 
}
h1 {
  color: 77C1EF; 
}

h4 {
  	color: B98D25;
 }

Output

  • Save the file as import_example.html in your system.
  • Just open the file in the browser and you will see the picture as in Figure 10 in the browser.
Output of import_example.html

Figure 10. Output of import_example.html.

Mixins

Mixins is another feature of SASS. It is used to make groups in declaration of CSS which can be reused through your style sheet. The Mixins can store multiple values or parameters and call function in the CSS. It can use entire properties from one rule set to another. It provides functionality to mix the values of properties of one class on to another class without any special syntax by including the class name as its properties and behaves as a constant or variables. The mixins can be defined as @mixin directive. It is included in the document by using @include directive. It can also be included at the root of the document or we can directly define any properties or any parent references.

How to use mixins in SASS?

Create one simple class as we do in regular CSS and store some different styles in that class. This class can be reused whenever in the code to achieve required functionality.

Consider the following class with some CSS styles:


@mixin page-styling {

h2 {
 	   color: #61C8E1;
  	  background-color: #973B7D;
    
 	 }
} 

The mixin is now ready to use. If you want to provide mentioned styles to h2 selector, use this mixin to h2 selector as shown below:


@include page-styling;

 

Example

Listing 5 shows a simple example of how to use mixins feature in the .scss file

Listing 5. mixins_example.html

<!doctype html>
<head>
<title>Mixins Parameters Example</title>
<link rel="stylesheet" href="mixin_style.css" type="text/css" />
</head>
<body>
	<h2>Simple Mixins Example</h2>
	<p> This is the simple example of mixins parameters. </p>
</body>
</html>

mixin_style.scss

@mixin page-styling {

body{
	font-size: 25px;
	font-style: normal;
	border: 1px solid #0f3c1c;
	border-radius: 10px;
}
 h2 {
    color: #61C8E1;
    background-color: #973B7D;
    
  }
}
@include page-styling;

Details of the code

In the above example we have used the mixins directive which defines styles that can be re-used throughout the Style sheet.

@mixin page-styling {

body{
	font-size: 25px;
	font-style: normal;
	border: 1px solid #0f3c1c;
	border-radius: 10px;
}

 h2 {
    color: #61C8E1;
    background-color: #973B7D;
    
  }
}

  • The @mixin page-styling line defines the directive by name (page-styling) of the mixin and optionally the arguments. The block contains all contents of the mixins and it also contains all CSS rules.
  • The @include page-styling; line defines the name of the mixin; it defines properties or use of any parent reference.

When CSS is generated then it looks like as below:

mixin_style.css

body {
  		font-size: 25px;
  		font-style: normal;
  		border: 1px solid #0f3c1c;
  		border-radius: 10px;
 	}
h2 {
  		color: #61C8E1;
  		background-color: #973B7D;
 	}

Output

  • Save the file as mixin_example.html in your system.
  • Just open the file in the browser and you will see the picture as in Figure 11 in the browser.
Output of mixin_example.html

Figure 11. Output of mixin_example.html.

Inheritance

Inheritance is used to extend the property of CSS from one selector to another. It avoids the duplication in the CSS. @extend directive manipulates the selector and uses its own cascading inheritance system in CSS. This is very useful in the component based CSS architecture; therefore it easily allows extending the variation from the component. SASS extend can extend a nested selector. The listing selectors are separated by commas and the properties are defined within the curly braces.

We can declare the Extend/Inheritance as shown:

.style{
	font-size: 25px;
	font-style: italic;
	border: 2px dotted #E99F0C;
  	color: #61C8E1;   
  }
.container{
   	@extend .style 	
}

Example

Listing 6 shows a simple example of how to use extend/inheritance in the .scss file.

Listing 6. inheritance_example.html

<!doctype html>
<head>
<title>Extend/Inheritance Example</title>
<link rel="stylesheet" href="inherit_style.css" type="text/css" />
</head>
<body class="container">

	<h2 class="style">Simple Extend/Inheritance Example</h2>
	<p>this is the simple example of Inheritance parameters which is used by using @extend. </p>
</body>
</html>
 

inherit_style.scss

.style{	
	font-size: 25px;
	font-style: italic;
	border: 2px dotted #E99F0C;
	border-radius: 20px;
  	color: #61C8E1;   	
  }
  h2{
  	background-color: #973B7D;
  	border: 2px solid #E99F0C;
  }
  .container{
   	@extend .style
  }

Details of the code

In the above example we have used the extend directive which inherit one selector to another.

.style{
	
	font-size: 25px;
	font-style: italic;
	border: 2px dotted #E99F0C;
	border-radius: 20px;
  	color: #61C8E1;   	
  }

Here we have defined simple CSS properties in the style class.

.container {
   	@extend .style  	
}

Here we have extended the .style class from the Style sheet. We can also extend multiple selectors within the same rule.

When CSS is generated, then it avoids having multiple names of class on HTML element as shown below:

inherit_style .css

.style, .container {
  	font-size: 25px;
  	font-style: italic;
  	border: 2px dotted #E99F0C;
  	border-radius: 20px;
 	 color: #61C8E1; 
}

h2 {
  	background-color: #973B7D;
 	 border: 2px solid #E99F0C; 
}

Output

  • Save the file as inheritance_example.html in your system.
  • Just open the file in the browser and you will see the picture as in Figure 12 in the browser.
Output of inheritance_example.html

Figure 12. Output of inheritance_example.html.

Operators

Operator is a symbol that represents a specific action such as basic mathematics operation like addition (+), subtraction (-), multiplication (*), division (/) and modulus (%). Doing mathematical operation in CSS is very helpful. We can use the operation on numerical values like heights, width, font-sizes, color, margin, padding etc. Operations in SASS convert pixels values to percentage without hassle. Operation is useful when variable is used; it makes us feel that we are working on the simple mathematics. When the division (/) is used, the value is used as part of an arithmetic expression and surrounded by parenthesis.

We can declare the operators as shown here:


.container{
	Width: 100%;
}

.element1 {
	color: # E99F0C + #973B7D;
font: 10px/8px;
width: 300px / 960px * 100%;

}

Example

Listing 7 shows a simple example of how to use different operators in the .scss file.

Listing 7. operation_example.html


<!doctype html>
<head>
<title>Operations Example</title>
<link rel="stylesheet" href="operator_style.css" type="text/css" />
</head>
<body>

	<p class="Style">This is Example of SASS Operation</p>

	<h3>Hello...Welcome to SASS</h3>
	<h2>Hello...Welcome to SASS</h2>
	<h4>Hello...Welcome to SASS</h4>
	<p class="Style1">This is Example of SASS Operation</p>


</body>
</html>

operator_style.scss


$color: #5F05B9;
$size: 30px;
$font-stack:    Montserrat Alternate, sans-serif;

h2{
	font-size: $size + 5;
	color:$color;
	font: $font-stack;
}

h3{
	font-size: $size + 5 * 2;
	color:$color;
	font: $font-stack;
}

h4{
	font-size: $size / 2;
	color:$color;
	font: $font-stack;
}

.Style {
	color: $color;
	font-size: $size * 1.5;
	font: $font-stack;
}

.Style1 {
	color: $color;
	font-size: $size - 15;
	font: $font-stack;
}

Details of the code

In the above example we have used different types of operator in the .scss file.

$color: #5F05B9;
$size: 30px;
$font-stack:    Montserrat Alternate, sans-serif;

h2{
	font-size: $size + 5;
	color:$color;
	font: $font-stack;
}

Here we have defined simple CSS properties by defining a variable $size: 30px. Later in various class or tags we have defined the font size by using various operation. For example, in h2 tag we have declared as font-size: $size + 5; and same size used for remaining tags but using different operations on it.

When CSS is generated, then it avoids the variables and the operation defined in .scss file and it displays in the css file as shown below:

operator_style .css

h2 {
  font-size: 35px;
  color: #5F05B9;
  font: Montserrat Alternate, sans-serif; 
}
h3 {
  font-size: 40px;
  color: #5F05B9;
  font: Montserrat Alternate, sans-serif; 
}
h4 {
  font-size: 15px;
  color: #5F05B9;
  font: Montserrat Alternate, sans-serif; 
}
.Style {
  color: #5F05B9;
  font-size: 45px;
  font: Montserrat Alternate, sans-serif; 
}
.Style1 {
  color: #5F05B9;
  font-size: 15px;
  font: Montserrat Alternate, sans-serif; _}

Output

  • Save the file as operator_example.html in your system.
  • Just open the file in the browser and you will see the picture as in Figure 13 in the browser.
Output of operation_example

Figure 13. Output of operation_example.

Difference between SASS preprocessor and less preprocessor

  • Both SASS and LESS are CSS preprocessor which helps to write CSS in a programming construct.
  • SASS preprocessor needs to have ruby installed, where as LESS preprocessor is built upon JavaScript in which we can link the JavaScript library to the HTML document.
  • SASS was designed to extend and simplify CSS, where as LESS is inspired by SASS.
  • In SASS, the variable names are defined with the dollar symbol ($) and in LESS, the variable names are defined with the at symbol (@).
  • SASS supports nested inheritance rules but LESS does not.
  • In SASS mixins can be defined with @mixin directive and in LESS, mixins can be defined with class selector.
  • Error notification in SASS is generated by using the command prompt. We use command prompt to run the compiler. In LESS the error notification is displayed directly on the browser. We can see the following error notification screenshot for SASS and less preprocessor.

LESS error notification:

Screenshot of less error

Figure 14. Screenshot of less error.

SASS error notification:

Screenshot of sass error

Figure 15. Screenshot of sass error.

Conclusion

In this article, we discussed some of the feature of SASS preprocessor and have seen the uses of SASS for better usage of style sheets with some examples. Source code of the examples is attached with this article. By SASS we will create the complex sheets faster and easier. SASS make less the burden of maintaining and organizing the CSS code. It is a modern way of writing and crafting CSS code.

Links

Official SASS preprocessor website http://sass-lang.com/guide


I''m a full stack developer with around 10+ yrs of experience. I enjoy writing technical articles on upcoming technical trends.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login