Program With Jayanth

Introduction to SCSS

 1420  7 mins

Introduction

SCSS stands for Sassy CSS. It is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). SCSS is a syntax of Sass (Syntactically Awesome Style Sheets) and is used to make CSS more maintainable, themeable, and extendable. It introduces features like variables, nesting, mixins, inheritance, and more, which are not available in CSS.

Browser Compatibility

It’s important to note that browsers cannot compile SCSS directly. SCSS must be compiled into CSS before it can be used in a web page. This is because browsers only understand CSS. The compilation process can be done manually or automated using tools like the Live Sass Compiler in VS Code.

Setting Up SCSS in VS Code Using Live Sass Compiler

To set up SCSS in VS Code using Live Sass Compiler, follow these steps:

  1. Install Node.js: Ensure that Node.js is installed on your system. You can download it from https://nodejs.org/.
  2. Install Live Sass Compiler: Open VS Code, go to the Extensions view by clicking on the square icon on the sidebar or pressing Ctrl+Shift+X. Search for “Live Sass Compiler” and install it.
  3. Configure Live Sass Compiler: After installation, you might need to configure the Live Sass Compiler. Go to the settings by clicking on the gear icon in the lower left corner and selecting “Settings”. Search for “Live Sass Compiler” and adjust the settings according to your needs.
  4. Compile SCSS: To compile your SCSS file, right-click on the SCSS file in the Explorer and select “Compile Sass”. Alternatively, you can use the shortcut Ctrl+Shift+C.

Features of SCSS

SCSS, or Sassy CSS, is a powerful preprocessor that extends the capabilities of CSS, making it more maintainable, scalable, and efficient. It introduces several features that are not available in standard CSS, enhancing the developer’s workflow and the quality of the final output. Here’s an enhanced look at some of the key features of SCSS, accompanied by detailed code snippets to illustrate their use.

Variables

Variables in SCSS allow you to store information that you want to reuse throughout your stylesheet. They make your stylesheets more maintainable and easier to update.

1
2
3
4
5
6
7

$primary-color: #333;
$secondary-color: #666;

body {
  background-color: $primary-color;
  color: $secondary-color;
}

In this example, the $primary-color variable is used to set the background color of the body element. The $secondary-color variable is also used to set the text color.

Nesting

Nesting in SCSS allows you to nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. This makes your stylesheets more readable and easier to maintain.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

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

  li {
    display: inline-block;
  }

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

Mixins

Mixins in SCSS are a powerful feature that allows you to define styles that can be reused throughout your stylesheet. They can also accept arguments, making them incredibly flexible. Here’s a simple yet effective example of a mixin that demonstrates how to use mixins to create reusable styles.

Example: Creating a Button Style Mixin

Imagine you have a website with multiple buttons that share a common style but have slight variations in size, color, and border radius. Instead of writing the same CSS for each button, you can create a mixin that encapsulates the common styles and then use it with different arguments to create the variations.

Step 1: Define the Mixin

First, you define a mixin that accepts parameters for the size, color, and border radius.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

@mixin button-style($size, $color, $border-radius) {
  display: inline-block;
  padding: $size;
  background-color: $color;
  border-radius: $border-radius;
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  transition: background-color 0.3s ease;

  &:hover {
    background-color: darken($color, 10%);
  }
}

Step 2: Use the Mixin

Next, you use the mixin to create specific button styles by passing different arguments.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

.btn-primary {
  @include button-style(12px, #007bff, 5px);
}

.btn-secondary {
  @include button-style(10px, #6c757d, 3px);
}

.btn-success {
  @include button-style(14px, #28a745, 7px);
}

Explanation

  • The button-style mixin is defined with three parameters: $size, $color, and $border-radius. These parameters allow you to customize the button’s appearance.
  • The &:hover selector within the mixin applies a hover effect to the button, changing its background color to a darker shade.
  • When using the mixin, you pass specific values for each parameter to create different button styles. For example, .btn-primary uses a larger size, a blue color, and a larger border radius compared to .btn-secondary and .btn-success.

Output CSS

The SCSS compiler will generate the following CSS from the above SCSS code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

.btn-primary {
  display: inline-block;
  padding: 12px;
  background-color: #007bff;
  border-radius: 5px;
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  transition: background-color 0.3s ease;
}
.btn-primary:hover {
  background-color: #0056b3;
}

.btn-secondary {
  display: inline-block;
  padding: 10px;
  background-color: #6c757d;
  border-radius: 3px;
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  transition: background-color 0.3s ease;
}
.btn-secondary:hover {
  background-color: #5a6268;
}

.btn-success {
  display: inline-block;
  padding: 14px;
  background-color: #28a745;
  border-radius: 7px;
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  transition: background-color 0.3s ease;
}
.btn-success:hover {
  background-color: #218838;
}

This example demonstrates how mixins can significantly reduce repetition in your stylesheets and make them more maintainable and scalable.

Inheritance

Inheritance in SCSS is a powerful feature that allows one selector to inherit the styles of another selector. This is particularly useful for theming and creating a consistent look and feel across your application. Unlike traditional CSS inheritance, SCSS inheritance allows you to explicitly inherit styles from one selector to another, making your stylesheets more modular and easier to manage.

Step 1: Define a Base Style

First, you define a base style that you want other selectors to inherit. This base style can include any CSS properties that you want to be shared across multiple selectors.

1
2
3
4
5
6
7
8
9

.btn {
  display: inline-block;
  border: 1px solid black;
  background-color: white;
  color: black;
  padding: 10px 20px;
  font-size: 16px;
  text-decoration: none;
}

Step 2: Use Inheritance

Next, you use the @extend directive to make another selector inherit the styles from the base style.

1
2
3
4
5

.btn-primary {
  @extend .btn;
  background-color: blue;
  color: white;
}

Explanation

  • The .btn class is defined with a set of common styles that you want to share across different types of buttons.
  • The .btn-primary class uses the @extend directive to inherit all the styles from the .btn class. It then overrides the background-color and color properties to create a primary button style.

Output CSS

The SCSS compiler will generate the following CSS from the above SCSS code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

.btn, .btn-primary {
 display: inline-block;
 border: 1px solid black;
 background-color: white;
 color: black;
 padding: 10px 20px;
 font-size: 16px;
 text-decoration: none;
}

.btn-primary {
 background-color: blue;
 color: white;
}

Inheritance in SCSS is a powerful feature that allows for more modular and maintainable stylesheets. By understanding and utilizing inheritance, you can create a consistent look and feel across your application with less code and effort.

Difference Between SCSS and SASS

Sass and SCSS are two syntaxes of the same preprocessor, Sass (Syntactically Awesome Style Sheets). The primary difference between them lies in their syntax style, which affects how they are written and read.

1
2
3
4
5
6

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

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

In this example, the indentation is used to denote the hierarchy of the CSS rules. There are no braces {} or semicolons ; needed.

SCSS, on the other hand, uses a syntax similar to CSS. It uses braces {} to denote code blocks and semicolons ; to end lines. This makes it easier for those who are already familiar with CSS. Here’s the equivalent SCSS code:

1
2
3
4
5
6
7

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

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

In SCSS, the structure is more familiar to those who have worked with CSS, making it easier to read and write.

updatedupdated2024-04-082024-04-08
comments powered by Disqus