CSS To Sass Converter

Converting CSS to Sass is relatively easy because Sass (Syntactically Awesome Stylesheets) is a CSS preprocessor that provides additional features like variables, nesting, mixins, and functions. Sass has two syntaxes: Sass (indented syntax) and SCSS (Sassy CSS), with Sass being the older version that uses indentation instead of braces and semicolons.

To convert CSS to Sass, you'll generally need to:

Remove curly braces {} and semicolons ;.
Indent your rules instead of using braces.
Here's how to convert CSS to Sass (indented syntax) step by step:

Basic Conversion (CSS to Sass)
Example:
CSS:

css

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

h1 {
font-size: 36px;
color: #000;
}
Sass:

sass

body
background-color: #f5f5f5
color: #333
font-family: Arial, sans-serif

h1
font-size: 36px
color: #000
Key Differences Between CSS and Sass (Indented Syntax)
Curly Braces: In Sass, you don't need curly braces {} to define rule blocks. Indentation is used instead.
Semicolons: In Sass, semicolons ; are not necessary to terminate each line, although they are optional (though they are commonly used for clarity in some styles).
Converting More Complex CSS to Sass
If you have more complex CSS, the conversion process remains the same. You just need to remove the braces, semicolons, and rely on indentation.

Example 1: CSS with Nested Selectors
CSS:

css

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

nav ul li {
display: inline-block;
}

nav ul li a {
text-decoration: none;
}
Sass:

sass

nav
ul
list-style-type: none

ul li
display: inline-block

ul li a
text-decoration: none
Converting CSS to Sass Features (Variables, Mixins, Functions)
Sass offers additional features that can improve your stylesheets, such as variables, mixins, and functions. Here's how you might convert some CSS code to take advantage of these features:

Example 2: Using Variables in Sass
CSS:

css

button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
}
Sass (with Variables):

sass

$primary-color: #4CAF50
$text-color: white
$padding: 10px 20px

button
background-color: $primary-color
color: $text-color
padding: $padding
Example 3: Using Mixins in Sass
CSS:

css

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

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

sass

@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)
Example 4: Using Functions in Sass
Sass also allows you to define functions to perform calculations or manipulate values.

CSS:

css

.button {
background-color: #4CAF50;
padding: 10px 20px;
}
Sass (with Function):

sass

@function darken-color($color, $amount)
@return darken($color, $amount)

.button
background-color: darken-color(#4CAF50, 10%)
padding: 10px 20px
Final Example: Full Conversion from CSS to Sass (Indented Syntax)
CSS:
css

$primary-color: #4CAF50;
$text-color: white;
$font-family: Arial, sans-serif;

body {
background-color: #f5f5f5;
color: #333;
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;
}
Sass (Indented Syntax):
sass

$primary-color: #4CAF50
$text-color: white
$font-family: Arial, sans-serif

body
background-color: #f5f5f5
color: #333
font-family: $font-family

.header
background-color: #333
color: $text-color
padding: 20px

.logo
font-size: 24px

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

.button
background-color: $primary-color
color: $text-color
padding: 10px 20px
border-radius: 5px
Conclusion
Sass (Indented Syntax) is a cleaner and more readable way to write CSS by removing curly braces and semicolons, relying on indentation to define structure. To convert CSS to Sass, you mainly:

Remove curly braces {} and semicolons ;.
Use proper indentation.
Optionally, use Sass-specific features like variables, mixins, and functions to make your stylesheets more powerful and maintainable.