Sass and SCSS basics. Code examples

Very similar technologies with the difference that SCSS requires braces as in regular CSS.

Code example in SASS:

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

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

SCSS code example:

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

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

Code comments

In simple css, the following instruction is used to add a comment:

/* Comment */

In SASS and LESS, it is much more convenient to leave comments, for example, we will add same comment:

//Comment

In SCSS and SASS, we can create variables by setting a property in them that will be repeated many times in our code.

It is convenient in the future when editing the change to change it immediately in all places in the code where it is used.

//create an variables
$background: #000;
$color: #cccccc;
$widht: 300px;
$border: 4px solid red;


.block:not(.first) {
//now we use the variable to set the property
  background: $background;
  border: $border;
  width: $widht;
  margin-bottom: 20px;
}

Nested elements

In simple CSS, nested element styles are set as follows:

#block {
	background: green;
}

#block > ul {
	background: red;
}

/* or */

#block ul {
	background: red;
}

In SCSS and SASS, this can be done much easier, for this we add a child element to the block itself. This helps group element styles and makes it easier to navigate the styles of your projects:

#block {
	background: green;

	> ul {
	background: red;
	}
}

We can assign child elements to their children:

#block {
	background: green;

	ul {
	background: red;

	  li {
	  	font-size: 1.2em;
	  }
	}
}

Through the “&” operator, which refers to the element itself, we can create complex constructions:

.link {
	color:red;
	
	//let's turn to the block class, which has a child element link directly from the body of the link element
	
	.block & {
		color:green;
	}
	
	&:hover {
		color:black;
	}
}

Templates

Small ready-made parts of styles that we can create once and call many times in our project.

Let’s create a template for an example:

%tplpadding {
	padding-right:50px;
}

Let’s call our template, for this we will use the @extend keyword:

.div {
	@extend %tplpadding;
}

If we need to change the data that is already in the added template, we just need to rewrite it in the body of the element:”

.div {
	@extend %tplpadding;
	padding-right: 40px;
}

Mixins

Blocks of code with certain properties that we can pass many times in our project. For example, let’s create our first mixin:

@mixin main-text {

	font-size: 1rem;
	font-weight: bold;
	font-family: Arial, sans-serif;
	
}

main-text – the name of the mixin

To connect the mixin to our element, we use the construction – @include mixin name:

#block {
	background: green;

	ul {
	//include our mixine
	@include main-text;
	background: red;

	  li {
	  	font-size: 1.2em;
	  }
	}
}

We can use the mixin many times, in the places we need.

We can add variables to mixins:

@mixin main-text {
	font-size: 1rem;
	font-weight: bold;
	font-family: $front-stack;
}

Passing parameters to mixins

In mixins, we can pass parameters as normal functions, and then use them in the body of the mixin:

@mixin main-text ($color, $font-weight) {
	font-size: 1rem;
	font-weight: bold;
	font-family: $front-stack;
	color: $color;
	font-weight: $font-weight;
}

Now using this mixin we need to pass parameters to it:

@include main-text(red, bold);

For example, elsewhere in the project we can pass other parameters:

@include main-text(#0000, 700);

In this case, the order of the parameters matters, but we can change the order of the parameters by giving them names:

@include main-text($font-weight: bold, $color: red);

If necessary, we can set default parameters to our mixins:

@mixin main-text ($color: red, $font-weight: bold) {
	font-size: 1rem;
	font-weight: bold;
	font-family: $front-stack;
	color: $color;
	font-weight: $font-weight;
}

If we do not pass parameters when using the mixin, then the default parameters will be used.

Passing countless parameters

To do this, we will add “…” to the change of the mixin, this will mean that it can accept many parameters:

@mixin padding($padd...) {
	padding: $padd;
}

let’s use our mixin:

ul {
	@include @padding(10px; 30px);
	background: red;
}

If we want to pass an ordinary parameter as well, it must be added before the uncountable parameter:

@mixin padding($color, $padd...) {
	padding: $padd;
	color: $color;
}


ul {
	@include @padding(red,10px; 30px);
	background: red;
}

Preprocessor

For example, to set the style when hovering in regular CSS, we do the following:

a {
	color:red;
}

a:hover {
	color:green;
}

SCSS and SASS do it a little differently:

a {
	color:red;

	&:hover {
		color: green;
	}
}

Using the “&” operator, we create a pseudo-element of our parent element and already draw styles to it.

Data import

Sometimes it is convenient to move all our variables and mixins into two separate files and link to the main style file.

To do this, we create 2 new files, the first one will be called variables.scss, and the other mixins.scss

We add all the variables to the variables.scss file:

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

We add all our mixins to the mixins.scss file:

@mixin padding($color, $padd...) {
	padding: $padd;
	color: $color;
}

@mixin main-text ($color: red, $font-weight: bold) {
	font-size: 1rem;
	font-weight: bold;
	font-family: $front-stack;
	color: $color;
	font-weight: $font-weight;
}

Now we need to import these files into our main style file:

@import "variables";
@import "mixins";

Mathematical operators and functions

SASS has powerful functionality for working with functions, as well as mathematical operations.

For example, let’s perform a simple mathematical operation:

ul {
	li {
		width: (100% / 4);
	}
}

The ease of performing mathematical operations in SCSS allows us to easily build grids. For example:

Let’s add to our HTML document:

<div id="grid">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>

And to our style table:

//let's create a new mixin
@mixin grid($cols, $margin) {
	float: left;
	margin-right: $margin;
	margin-bottom: $margin;
	height: 150px;
	width: ((100% - (($cols - 1) * $margin)) / $cols);

	&:nth-child(#{$cols}n) {
		margin-right: 0;
	}
}

#grid {
	float: left;
	width:100%

	 >div {
	 	@include grid(4, 2%);
	 }
}

#

$cols – the number of elements in the row of our grid

width: ((100% – (($cols – 1) * $margin)) / $cols);

100% – full widtn;
(($cols – 1) * $margin) – the total number of indents (-1 because the last one has a margin of 0)
&:nth-child(#{$cols}n) – we will get the last element in the line and set its margin-right as 0

Functions

The SASS language has a huge number of built-in functions, these functions can make the selected color lighter, darker, work with time frames, turn selectro on and off, and much more.

Consider an example:

div {
	color: darken(red, 20)
}

The darken function darkens our color.
red – is the initial color
30 – by how many percent do you need to darken

Functions are available on the page –

Conditional operators

As in conventional programming languages, conditional statements are available in SASS, for example, consider the if statement:

@mixin grid($cols, $margin) {
	float: left;
	margin-right: $margin;
	margin-bottom: $margin;
	height: 150px;

//use the conditional statement if (if)
//the following conditions are available – “+”, “-“, “==”, “>”, “”, “>=”, “<<>=" [css] @if($cols >= 5) { width: 100%; margin-right : 0; } @else { width: ((100% - (($cols - 1) * $margin)) / $cols); margin-right: $margin; } &:nth-child(#{$cols}n) { margin-right: 0; } } [/css]

Cycles

The following loops are available in SASS, such as for, while, each.

Consider the example of the @for loop:

$var: classname;

@for $i from 2 to 10 {
	
	.#{$var}-#{$i} {
		width: 100px + i
	}
}

$i – is the initial change that we create
from 2 to 10 – from where and until we will pass our cycle

@content

An operator that allows you to record certain content in the place where it is inserted.
Let’s consider mixins as an example:

@mixin main-text {$color, $size}
	color: $color;
	font-size: $size;
	@content;
}

Now, inserting this mixin, we can supplement it and the code will be added to the place where the content is inserted:

#div {
	@include main-text {
		background: red;
	}
}

Media requests

$sizes: ("xs":320px, "sm":576px, "md":768px, "lg":992px, "xl":1200px);


@mixin media($minmax, $media) {
  @each $size, $resolution in $sizes {
    @if $media == $size {
      @media only screen and (#{$minmax}-width: $resolution) {
        @content;
      }
    }
  }
}

@mixin blocks-width {
  width: 400px;
  @include media("max", "md") {
    width: 100%;
  }
}

.blocks-width {
width: 400px;
  @include media("max", "md") {
    width: 100%;
  }
}

.blocks-width {
width: 400px;
}

@include media("max", "md") {
.blocks-width {
    width: 100%;
}
}

Functions

Here are some built-in SASS functions that can be useful when writing styles:

darken() / lighten() – these functions change the color saturation. Example:

background-color: darken(#ff0000, 10%); /* reduces red saturation by 10% */

rgba() – This function creates a color with the specified transparency. Example:

background-color: rgba(255, 0, 0, 0.5); /* creates a red color with transparency 50% */

unit() – this function converts measurement units. Example:

font-size: unit(16px, em); /* converts 16px to em units */

min() / max() – these functions return the minimum or maximum value from two or more values. Example:

width: min(100%, 500px); /* returns the smaller value between 100% and 500px */

random() – this function returns a random number from 0 to 1. For example:

background-color: rgba(random(255), random(255), random(255), 1); /* creates a random color */

saturate() / desaturate() – these functions change the saturation of a color by increasing or decreasing its value using a percentage value.

background-color: saturate(#3498db, 20%); /* increases color saturation by 20% */

scale-color() – This function changes the saturation, brightness, and/or value of a color. Example:

background-color: scale-color(#3498db, $lightness: -20%, $alpha: -50%); /* changes saturation by -20% and alpha channel by -50% */