Sass or SCSS Tutorial

SASS (Syntactically Awesome Stylesheet) is a CSS pre-processor, which helps to reduce repetition with CSS and saves time.

We will be covering the following topics

1. What is Sass/SCSS?
2. Syntax
3. Installation
4. Sass/SCSS Output Styles
5. Caching
6. Encodings
7. Comments
8. Data Types
9. Variables ($)
10. Global Variables (!global)
11. Variable Default (!default)
12. Referencing Parent Selectors (&)
13. Nested Properties (:)
14. Placeholder Selectors (%)
15. Rules and Directives (@)
16. Difference between @function and @mixin
17. Difference between @mixin, @extends and Placeholder (%)
18. Compiling Sass file to CSS
19. Sass/SCSS File Conversions

---

What is Sass/SCSS?

Sass stands for Syntactically Awesome Style Sheet

Sass is an extension of CSS that adds power and elegance and allows you to use variables, nested rules, mixins, inline imports and more CSS-compatible syntax

---

Syntax

Sass/SCSS usually supports 2 types of syntax

1. Sass - which is indented syntax similar to ruby or python

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

2. SCSS (Sassy CSS) - similar CSS styling format

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

---

Installation

RUBY For Command Line

Windows

If your using windows then first go download and install RUBY.

Once you have installed the RUBY to check whether its installed properly or not go to the command line and type the following command

ruby -v

Then install the Sass from the command line

gem install sass

MAC

Run the following command to install RUBY

brew install ruby

Then install the Sass from the command line

gem install sass

Ubuntu/Linux

Run the following command to install RUBY

sudo apt-get install ruby

Then install the Sass from the command line

sudo gem install sass

NOTE: You can even use the Sass with Dart / NPM

---

Sass/SCSS Output Styles

Sass outputs the css file in 4 different styles

1 - nested - default

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

body {
  background-color: #000;
  color: #fff; }


/*# sourceMappingURL=style.css.map */

2 - expanded - code will be well formatted and indented

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #000;
    color: #fff;
}

/*# sourceMappingURL=style.css.map */

3 - compact - code will be organized in a single line

* { margin: 0; padding: 0; box-sizing: border-box; }

body { background-color: #000; color: #fff; }

/*# sourceMappingURL=style.css.map */

4 - compressed - will strip off all the white spaces and minifies your css

*{margin:0;padding:0;box-sizing:border-box}body{background-color:#000;color:#fff}

Following is the example from command line

scss --watch styles.scss:styles.css --style expanded

---

Caching

By default, Sass caches compiled templates and partials. This dramatically speeds up re-compilation of large collections of Sass files, and works best if the Sass templates are split up into separate files that are all @imported into one large file.

---

Encodings

By default it will be compiled to utf-8

You can specify explicitly as follows

@charset "utf-8"

---

Comments

Sass supports single line comment ie. // and multi-line comment ie. /**/

If a single line comment is added then it will be removed in the css file

/* This comment is

* several lines long.

* since it uses the CSS comment syntax,

* it will appear in the CSS output. */

body { color: black; }

// These comments are only one line long each.

// They won't appear in the CSS output,

// since they use the single‐line comment syntax.

a { color: green; }

is compiled to:

/* This comment is

* several lines long.

* since it uses the CSS comment syntax,

* it will appear in the CSS output. */

body {

color: black; }

a {

color: green; }

Interpolation is overcome with the following

Interpolation - the process of including and processing the externally fetch data into the document or program

$version: "1.2.3";
/* This CSS is generated by My Sassy Framework version #{$version}. */

is compiled to 

/* This CSS is generated by My Sassy Framework version 1.2.3. */

---

Data Types

SassScript supports seven main data types:

1. numbers (e.g. 1.2, 13, 10px)

2. strings of text, with and without quotes (e.g. "foo", 'bar', baz)

3. colors (e.g. blue, #04a3f9, rgba(255, 0, 0, 0.5))

4. booleans (e.g. true, false)

5. nulls (e.g. null)

6. lists of values, separated by spaces or commas (e.g. 1.5em 1em 0 2em, Helvetica, Arial, sans‐serif)

7. maps from one value to another (e.g. (key1: value1, key2: value2))

SassScript also supports all other types of CSS property value, such as Unicode ranges and !important declarations.

Strings

CSS specifies two kinds of strings: those with quotes, such as "Lucida Grande" or 'http://sass‐lang.com', and those without quotes, such as sansserif or bold. SassScript recognizes both kinds, and in general if one kind of string is used in the Sass document, that kind of string will be used in the resulting CSS.

There is one exception to this, though: when using #{} interpolation, quoted strings are unquoted. This makes it easier to use e.g. selector names in mixins.

For example:

@mixin firefox-message($selector) {
    body.firefox #{$selector}:before {
        content: "Hi, Firefox users!";
    }
}
@include firefox-message(".header");

is compiled to

body.firefox .header:before {
content: "Hi, Firefox users!"; }

NOTE - @charset "UTF-8"; -> wont appear in the css file unless and until you wont use the utf-8 character.

---

Variables ($)

The most straightforward way to use SassScript is to use variables. Variables begin with dollar signs, and are set like CSS properties:

$width: 5em;

You can then refer to them in properties:

#main {
    width: $width;
}

---

Global Variables (!global)

Variables are only available within the level of nested selectors where they're defined. If they're defined outside of any nested selectors, they're available everywhere. They can also be defined with the !global flag, in which case they're also available everywhere.

For example:

#main {
    $width: 5em !global;
    width: $width;
}

#sidebar {
    width: $width;
}

is compiled to:

#main {
    width: 5em;
}

#sidebar {
    width: 5em;
}

For historical reasons, variable names (and all other Sass identifiers) can use hyphens and underscores interchangeably. For example, if you define a variable called $main-width, you can access it as $main_width, and vice versa.

---

Variable Default (!default)

You can assign to variables if they aren't already assigned by adding the !default flag to the end of the value. This means that if the variable has already been assigned to, it won't be re-assigned, but if it doesn't have a value yet, it will be given one.

For example:

$content: "First content";

$content: "Second content?" !default;

$new_content: "First time reference" !default;

#main {
    content: $content;
    new-content: $new_content;
}

is compiled to

#main {
 content: "First content";
 new-content: "First time reference"; }

NOTE: Variables with null values are treated as unassigned by !default

$content: null;
$content: "Non-null content" !default;
#main {
    content: $content;
}

is compiled to:

#main {
    content: "Non-null content"; }

---

Referencing Parent Selectors (&)

You might want to have special styles for when that selector is hovered over or for when the body element has a certain class. In these cases, you can explicitly specify where the parent selector should be inserted using the & character.

For example:

a {
    font-weight: bold;
    text-decoration: none;
    &:hover { text-decoration: underline; }
    body.firefox & { font-weight: normal; }
}

is Compiled to

a {
font-weight: bold;
text-decoration: none; }
a:hover {
text-decoration: underline; }
body.firefox a {
font-weight: normal; }

---

Nested Properties (:)

CSS has quite a few properties that are in “namespaces;” for instance, font-family, font-size, and font-weight are all in the font namespace. In CSS, if you want to set a bunch of properties in the same namespace, you have to type it out each time.

Sass provides a shortcut for this (:) just write the namespace once, then nest each of the sub-properties within it.

For example:

.funky {
    font: {
        family: fantasy;
        size: 30em;
        weight: bold;
    }
}

is compiled to 

.funky {

    font-family: fantasy;

    font-size: 30em;

    font-weight: bold; }

The property namespace itself can also have a value.

For example:

.funky {
    font: 20px/24px fantasy {
        weight: bold;
    }
}

is compiled to 

.funky {
    font: 20px/24px fantasy;
    font-weight: bold;
}

---

Placeholder Selectors (%)

Concept can be used with @extend. 

Advantage : avoid the code redundancy with was happening with @mixins

Something similar to inheritance concept.

For example:

%container{
    margin: px auto;
}
#main_container{
    @extend %container;
}

will be compiled to

#main_container {
    margin: px auto; }

---

Rules and Directives (@)

Sass supports @ for css which are called Rules and there are some @ which are Sass specific ones.

@import

Sass extends the CSS @import rule to allow it to import SCSS and Sass files. All imported SCSS and Sass files will be merged together into a single CSS output file. In addition, any variables or mixin defined in imported files can be used in the main file.

@import takes a filename to import. By default, it looks for a Sass file to import directly, but there are a few circumstances under which it will compile to a CSS @import rule:

- If the file's extension is .css.

- If the filename begins with http://.

- If the filename is a url().

- If the @import has any media queries.

If none of the above conditions are met and the extension is .scss or .sass, then the named Sass or SCSS file will be imported. If there is no extension, Sass will try to find a file with that name and the .scss or .sass extension and import it.

For example,

@import "foo.scss";

OR

@import "foo";

would both import the file foo.scss, whereas

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

would all compile to

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

It's also possible to import multiple files in one @import.

For example:

@import "rounded-corners", "text-shadow";

It's also possible to import multiple files in one @import.

For example:

@import "rounded-corners", "text-shadow";

Partials ( _ )

If you have a SCSS or Sass file that you want to import but don't want to compile to a CSS file, you can add an underscore to the beginning of the filename. This will tell Sass not to compile it to a normal CSS file. You can then import these files without using the underscore.

For example, you might have _colors.scss. Then no _colors.css file would be created, and you can do

@import "colors";

and _colors.scss would be imported.

Note that you may not include a partial and a non-partial with the same name in the same directory. For example, _colors.scss may not exist alongside colors.scss.

---

Difference between @function and @mixin

@function - returns the value

@function makelongshadow($color) {
  $val: 0px 0px $color;
  @for $i from 1 through 200 {
    $val: #{$val}, #{$i}px #{$i}px #{$color};
  }
  @return $val;
}

@mixin - doesn't return any values

@mixin longshadow($color) {
  text-shadow: makelongshadow($color);
}

---

Difference between @mixin, @extends and Placeholder (%)

@mixin

When you use the @mixin in the code it will replicate the code in all the using blocks

Example - 

@mixin wrapper{
  margin:0px auto;
  padding: 0px;
}

.w1{
  @include wrapper;
}

.w2{
  @include wrapper;
}

will be compiled to the following

.w1 {
  margin: 0px auto;
  padding: 0px;
}

.w2 {
  margin: 0px auto;
  padding: 0px;
}

The styles in the .w1 and .w2 styles is redundant

To overcome this problem we will use the @extend

@extend

Example

wrapper{
  margin:0px auto;
  padding: 0px;
}

.w1{
  @extend wrapper;
}

.w2{
  @extend wrapper;
}

will be compiled to the following

wrapper, .w1, .w2 {
  margin: 0px auto;
  padding: 0px;
}

Here the styles are not redundant, @extend is intelligent enough and adds wrapper,.w1,.w2

But there is one problem with this, if I don't use wrapper in my project then we are simply adding the redundant code in our style.

So to overcome this we will use Placeholder (%)

Placeholder (%)

Example -

%wrapper{
  margin:0px auto;
  padding: 0px;
}
.w1{
  @extend %wrapper;
}
.w2{
  @extend %wrapper;
}

will be compiled to the following

.w1, .w2 {
  margin: 0px auto;
  padding: 0px;
}

---

Compiling Sass file to CSS

From command line

Doing manually 

sass styles.scss styles.css // scss styles.scss styles.css

OR 

Watching For Changes

Sass to watch the file and update the CSS every time the Sass file changes

sass --watch styles.scss:styles.css // scss --watch styles.scss:styles.css

If you have a directory with many Sass files, you can also tell Sass to watch the entire directory

sass --watch app/sass:public/stylesheets

---

Sass/SCSS File Conversions

Files can be converted interchangeable as follows

# Convert Sass to SCSS

sass-convert style.sass style.scss

# Convert SCSS to Sass

sass-convert style.scss style.sass

---

Conclusion

Hope you guys enjoyed the read.

Articles For You

SummerNote WYSIWYG Text Editor

Facebook Login With PHP Laravel Socialite

Select2 Dropdown

Detect AdBlocker With Javascript And Increase Website Ads Revenue

Composer Install v/s Composer Update

Google reCAPTCHA Integration In PHP Laravel Forms

Install Apache Web Server On Ubuntu 20.04 / Linux & Manage It

Laravel Named Routes

Multiple File Uploads In Laravel PHP

Supervisor For Laravel Queue Scheduling

Generate RSS Feeds in PHP Laravel

Create A Composer Package? Test It Locally And Add To Packagist Repository

Upload Image In PHP?

Install Linux, Apache, MYSQL, PHP (LAMP Stack) on Ubuntu

Search Engine Optimization Concepts