CSS To SCSS Converter

Converting CSS to SCSS is relatively straightforward because SCSS is a superset of CSS. This means any valid CSS code is also valid SCSS. The main difference between CSS and SCSS is that SCSS allows for more advanced features, such as variables, mixins, nesting, and functions.

Steps to Convert CSS to SCSS
Basic Conversion (CSS to SCSS):

CSS and SCSS syntax are mostly the same. You don't need to change much, except that you might choose to take advantage of SCSS features such as variables, nesting, and mixins.
CSS:

css

body {
background-color: #fff;
color: #333;
font-family: Arial, sans-serif;
}
SCSS: SCSS allows you to write the same CSS code, and you can optionally start using SCSS features such as variables or nesting if you need them.

scss

body {
background-color: #fff;
color: #333;
font-family: Arial, sans-serif;
}
As you can see, CSS code is valid SCSS code without needing to change anything.

Use Variables in SCSS: SCSS allows you to define variables, which can be very useful to store values such as colors, font sizes, margins, etc.

CSS:

css

.header {
background-color: #4CAF50;
color: white;
}

.footer {
background-color: #4CAF50;
color: white;
}
SCSS (with variables):

scss

$primary-color: #4CAF50;
$text-color: white;

.header {
background-color: $primary-color;
color: $text-color;
}

.footer {
background-color: $primary-color;
color: $text-color;
}
Use Nesting in SCSS: SCSS allows you to nest CSS selectors inside one another, which helps in organizing your styles based on HTML structure. This is not possible in regular CSS.

CSS:

css

nav ul {
list-style-type: none;
}

nav ul li {
display: inline-block;
}

nav ul li a {
text-decoration: none;
}
SCSS (with nesting):

scss

nav {
ul {
list-style-type: none;
}

ul li {
display: inline-block;
}

ul li a {
text-decoration: none;
}
}
Use Mixins in SCSS: SCSS allows you to define mixins, which are reusable chunks of CSS code that you can include in other rules. This can be helpful for repetitive code like border-radius or media queries.

CSS:

css

.button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border-radius: 5px;
}

.card {
background-color: #fff;
padding: 20px;
border-radius: 5px;
}
SCSS (with a mixin):

scss

@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}

.button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
@include border-radius(5px);
}

.card {
background-color: #fff;
padding: 20px;
@include border-radius(5px);
}
Use Functions in SCSS: SCSS also allows you to create functions to perform calculations or manipulate values, such as adjusting colors or calculating dimensions.

CSS:

css

.button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
}
SCSS (with a function):

scss

@function darken-color($color, $amount) {
@return darken($color, $amount);
}

.button {
background-color: darken-color(#4CAF50, 10%);
color: white;
padding: 10px 20px;
}
Use SCSS Operators: SCSS allows the use of operators like +, -, *, /, and % to perform calculations, making it easier to dynamically calculate values like widths, margins, padding, etc.

CSS:

css

.container {
width: 500px;
}

.item {
width: 50%;
}
SCSS (with operations):

scss

$container-width: 500px;
$item-width: 50%;

.container {
width: $container-width;
}

.item {
width: $container-width * $item-width;
}
Example of Converting Full CSS to SCSS
CSS:
css

body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
}

.header {
background-color: #333;
color: white;
padding: 20px;
}

.header .logo {
font-size: 24px;
}

.footer {
background-color: #f1f1f1;
text-align: center;
padding: 10px;
}

.button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border-radius: 5px;
}
SCSS (after refactoring to SCSS features):
scss

$primary-color: #4CAF50;
$text-color: white;
$background-color: #f5f5f5;
$footer-bg: #f1f1f1;
$header-bg: #333;

body {
background-color: $background-color;
font-family: Arial, sans-serif;
}

.header {
background-color: $header-bg;
color: $text-color;
padding: 20px;

.logo {
font-size: 24px;
}
}

.footer {
background-color: $footer-bg;
text-align: center;
padding: 10px;
}

.button {
background-color: $primary-color;
color: $text-color;
padding: 10px 20px;
border-radius: 5px;
}
Conclusion
SCSS is a powerful extension of CSS, and since SCSS is fully compatible with CSS, you don't need to change much when converting your CSS to SCSS. However, SCSS provides additional features like variables, mixins, nesting, functions, and operations, which can help make your styles more efficient, modular, and easier to maintain.