Difference between CSS and SCSS – detailed guide

CSS has been the choice of the developers when it comes to web development from the last few years. However, ever since the development of SASS, its use has reduced drastically. With SCSS being an improved version of SASS, it is more commonly used these days.

But what does it have that makes it different from CSS? If CSS was fulfilling the requirement of developers, why did we need SCSS? Read more to find out the reason behind this.

But before doing the comparison, let us have an overview of CSS and SCSS.

Cascading Style Sheets(CSS)

CSS is a styling language that is used by developers for web page development. It is used to style web pages and make them attractive. It is one of the three fundamental parts of Web development, the other two being JavaScript and HTML.

CSS is designed to enable the separation of presentation and content including layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility, and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file and reduce complexity and repetition in the structural context.

Every item or element on a web page is part of a document written in a markup language. In most cases, HTML(Hypertext Markup Language) is used, but there are other languages in use such as XML and XHTML.

The syntax of CSS is pretty simple and contains a lot of English keywords for various style properties. It includes selectors, properties, values, declarations, declaration blocks, rulesets, at-rules, and statements.

To explain its syntax, let us take the help of an example given below:

h2 { 
color: blue; 
font-size: 3em;
text-decoration: underline;
}

In this example, h2 is the selector. The selector is followed by a declaration block that includes three declarations. Each declaration is separated from the next by a semicolon. The tabs and line breaks are optional but used by most developers to make the CSS code more human-readable.

By using the h2 element, we are telling that every level 2 heading on the web page should follow the same declarations contained in the ruleset.

For the color property, we can either use a color keyword or a color formula in Hex, RGB, or HSL format. In this case, we used the color keyword blue. There are a few dozen color keywords available in CSS3, but millions of colors can be accessed with the other color models.

We applied the value of 3em to the property font-size. There is a wide range of size units we could have used including pixels, percentages, and more.

At last, we added the value underline to the property text-decoration. We could have also used overline or line-through as values for text-decoration.

Advantages of CSS

1. Consistency – CSS helps in constructing a consistent framework that the designers can use to build other sites. Due to this, the efficiency of the web designer increases as well.
2. Ease of Use – CSS is very easy to learn and simplifies website development. All the codes are placed on one page, meaning that the improvement or editing of the lines wouldn’t involve going through several pages.
3. Website speed – Usually, the code used for a site can go up to 2 pages or more. But with CSS, that is not the issue. It requires only 2-3 lines of code and hence, the website database remains uncluttered, removing any website loading issues.
4. Device Compatibility – CSS changes are device friendly. Since people use different types of smart devices to access the internet, there is a need or responsive web design. CSS serves the purpose here by making the web pages more responsive so that they end up showing in the same way in all the devices.
5. Multiple Browser Support – CSS enjoys the support of multiple browsers. It is compatible with all the major internet browsers.
6. Re-Position – CSS lets you define changes in the position of web elements present on a page. With its implementation, developers can position HTML elements at the place they like in order to align with the aesthetic appeal of the page or other considerations.
7. Web-Page crawl – CSS helps in enabling SEO for your site. By incorporating CSS into your web pages, it makes it easier for the search engine to locate your page in the search result.
8. Transfer Size – It reduces the file transfer size. This results in faster transmission of files.

Disadvantages of CSS

1. Too many versions – When compared with other parameters like HTML or Javascript, CSS has a lot of versions- CSS1, CSS2, CSS2.1, CSS3. Because of this, CSS becomes very confusing to use, especially for beginners.
2. Lack of security – Since CSS is an open-text based system, it doesn’t have the built-in security system that will prevent it from being overridden. With access to its read/write operations, anyone can alter the CSS file and change the links.
3. Fragmentation – With CSS, there is a possibility that what works with one browser doesn’t work with another browser. Due to this, the web developers have to test the compatibility by running the program across multiple browsers before a website is set live.
4. Complications – CSS can get complicated with the use of third-party software like Microsoft FrontPage.
5. Cross-Browser Issues – Implementing initial CSS changes on a website is easy on the developer’s end. However, after the changes have been made, you will have to confirm the compatibility if the CSS is displaying similar change effects on all the browsers. This is simply due to the fact that CSS works differently on different browsers.

Sassy Cascading Style Sheets(SCSS)

SCSS is a preprocessor language that is interrupted or compiled into CSS. It is a special type of SASS(Syntactically Awesome Style Sheets). Scripting of SCSS is done in Saasscript. SCSS contains all the features of CSS with a few extra added on speciality features as well.

Using SCSS, we can add many additional functionalities to CSS such as variables, nesting and more. All these additional functionalities can make writing CSS much easier and faster as compared to writing the traditional CSS.

SCSS produces a traditional CSS that the browser can understand by running the SCSS files on the server running your web app. Reading the code in SASS or SCSS is faster than reading in CSS.

For a better understanding of SCSS, let us take an example to understand its syntax.

@mixin button-base() {
  @include typography(button);
  @include ripple-surface;
  @include ripple-radius-bounded;

  display: inline-flex;
  position: relative;
  height: $button-height;
  border: none;
  vertical-align: middle;

  &:hover { cursor: pointer; }

  &:disabled {
    color: $mdc-button-disabled-ink-color;
    cursor: default;
    pointer-events: none;
  }
}

The only difference between SASS and SCSS with respect to their syntax is the use of indentation { }. In other words, SCSS is nothing but SASS with the indentations in it.

Advantages of SCSS

1. It facilitates you to write clean, easy and less CSS in a program construct.
2. It contains fewer codes so you can write CSS quicker.
3. It has very good documentation, meaning that you can get all the required information online.
4. It provides nesting so you can use nested syntax and useful functions like color manipulation, math functions, and other values.
5. It is compatible with all versions of CSS. So, you can use any available CSS libraries.
6. It consists of variables that help in reusing the values throughout the CSS as many times you want.
7. Syntax highlighting is a widely used CSS tool and is supported in SCSS. SCSS allows you to use the existing code, and help improve its internal structure without altering the external behaviour of the code.

Disadvantages of SCSS

1. Debugging – Preprocessors have a compilation step which makes the code lines in CSS irrelevant when trying to debug the code. But debugging is twice as hard as programming, making it a huge drawback.
2. Large CSS Files – Source files may be small but the generated CSS could be huge.
3. Understanding – There is a knowledge gap in CSS even though the preprocessors have become widespread. There is a big difference between understanding a tool and using it effectively.
4. Development – Compilation can make the development slow, even after using the best tools available.
5. Loss of Benefits – Using SASS may cause losing benefits of the browser’s built-in element inspector.

Comparison between CSS and SCSS

1. SCSS is more expressive – SCSS uses less amount of lines in its code than CSS, which make the code load faster.
2. It encourages proper nesting of rules – Standard CSS doesn’t support nesting. We can’t write a class inside another class. As the project gets bigger, this brings a readability problem and the structure doesn’t look nice.
3. Syntax – The syntax of SCSS contains indentations that are missing in CSS.
4. SCSS allows the user to write better inline documentation – SASS is flexible with comments, but any good developer will prefer inline documentation which is available in SCSS. Inline documentation makes the lines of code self-explanatory.
5. Better Functionality – With the help of SCSS, we can add more functionality to the code in the form of variable, selectors, and nesting which is not present in CSS.
6. Customizing Bootstrap – Having knowledge of SCSS helps in customizing Bootstrap 4.
7. Mathematical Operations – SCSS allows us to do math using operators. We can perform simple calculations inside our code for better output.