Difference Between CSS and SCSS (original) (raw)

Last Updated : 15 Jan, 2025

CSS is a stylesheet language whereas SCSS is a preprocessor scripting language that is a superset of CSS. This article will cover the detailed differences between CSS and SCSS.

**CSS

• **CSS (Cascading Style Sheets) is a stylesheet language for designing the layout of web pages.
• It is simple to use and follows a cascading hierarchy to apply styles to HTML elements. HTML `

Welcome to CSS

`

**SCSS

• SCSS (Sassy CSS) is a preprocessor scripting language that extends CSS with features like variables, nesting, and mixins.
• It makes stylesheets more maintainable and efficient to write. HTML `

`

**SCSS File (styles.scss):

SCSS `

$box-color: lightcoral; $text-color: white;

.box { width: 200px; height: 100px; background-color: $box-color; color: $text-color; text-align: center; line-height: 100px;

&:hover {
    background-color: darkred;
}

}

`

Compiled CSS (styles.css):

CSS `

.box { width: 200px; height: 100px; background-color: lightcoral; color: white; text-align: center; line-height: 100px; }

.box:hover { background-color: darkred; }

`

Differences between CSS and SCSS