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>
<head>
<style>
h1 {
color: darkblue;
text-align: center;
}
</style>
</head>
<body>
<h1>Welcome to CSS</h1>
</body>
</html>
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.
<!DOCTYPE html>
<html>
<head>
<title>SCSS Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="box">This is styled using SCSS</div>
</body>
</html>
SCSS File (styles.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):
.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
CSS | SCSS | |
|---|---|---|
Definition | Cascading Style Sheet is a stylesheet language used to define the presentation and layout of a webpage written in HTML or XML. | Syntactically Awesome Style Sheet SCSS (Sassy CSS) is a preprocessor scripting language that is a superset of CSS. |
Syntax | CSS follows a plain-text syntax | SCSS follows a structured syntax with additional features such as variables, nesting, and mixins. |
Variables | CSS uses plain text and keywords for styling | SCSS allows you to define variables to store commonly used values such as colors, font sizes, and spacing |
Nesting | CSS requires you to write each selector separately. | SCSS allows you to nest selectors within other selectors, making it easier to write and read complex stylesheets, |
Mixins | CSS does not provide functionality to use Mixins | SCSS allows you to create reusable code snippets using mixins, which are like functions in programming languages. |
File Extension | CSS files use the .css file extension | SCSS files use the .scss file extension. |
Compilation | CSS files are interpreted by web browsers directly | SCSS files must be preprocessed into standard CSS files using a preprocessor such as Sass |
Features | CSS Does not use additional features | SCSS contains all the features of CSS and contains more features that are not present in CSS |