Good content takes time and effort to come up with.

Please consider supporting us by just disabling your AD BLOCKER and reloading this page again.







Sass or SCSS In-Depth Tutorial | StackCoder


Sass or SCSS Tutorial


13th October 2020 8 mins read
Share On     Share On WhatsApp     Share On LinkedIn


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.







Author Image
AUTHOR

Channaveer Hakari

I am a full-stack developer working at WifiDabba India Pvt Ltd. I started this blog so that I can share my knowledge and enhance my skills with constant learning.

Never stop learning. If you stop learning, you stop growing