Converting Stylus to SCSS involves changing the syntax and structure of your Stylus code to match SCSS (Sassy CSS), a CSS preprocessor that's part of the Sass family. SCSS and Stylus have similar functionalities (like variables, nesting, and mixins), but they differ in syntax.
Here's a guide on how to manually convert Stylus to SCSS:
Key Differences Between Stylus and SCSS
Variables:
Stylus: Variables are defined using $ without needing semicolons.
SCSS: SCSS also uses $, but variables are followed by a semicolon.
Nesting:
Stylus: No curly braces {} or semicolons are required in the nesting.
SCSS: Curly braces {} and semicolons are required to define blocks and statements.
Mixins:
Stylus: Mixins can be defined and called with a cleaner, more flexible syntax (e.g., mixin()).
SCSS: Mixins are defined with @mixin and used with @include.
Semicolons:
Stylus: Optional in most cases (e.g., after properties and blocks).
SCSS: Required after every property or rule.
Parent References:
Stylus: The & operator can be used for parent references, but it's less explicit than in SCSS.
SCSS: The & operator is used for parent references and is more explicit.
Stylus to SCSS Conversion Example
Stylus Code Example:
stylus
$primary-color = #3498db
body
font-family: Arial, sans-serif
background-color: $primary-color
.container
width: 100%
padding: 20px
display: flex
justify-content: center
.content
color: #333
font-size: 16px
Converted SCSS Code:
scss
$primary-color: #3498db;
body {
font-family: Arial, sans-serif;
background-color: $primary-color;
}
.container {
width: 100%;
padding: 20px;
display: flex;
justify-content: center;
.content {
color: #333;
font-size: 16px;
}
}
Step-by-Step Conversion Process:
Variables:
In Stylus, you define variables like $primary-color = #3498db.
In SCSS, variables are defined similarly but with a semicolon at the end: $primary-color: #3498db;.
Nesting:
In Stylus, nested selectors don't need curly braces. SCSS requires curly braces {} for nesting.
Example:
stylus
.container
.content
color: red
becomes:
scss
.container {
.content {
color: red;
}
}
Semicolons:
Stylus doesn't require semicolons in most cases, but SCSS requires them after each property or rule.
Ensure that every rule (e.g., color: red) ends with a semicolon in SCSS.
Mixins:
Stylus allows you to call mixins without @mixin or @include.
In SCSS, you need to define mixins using @mixin and call them with @include:
stylus
mixin() {
color: red;
}
.box
mixin
becomes:
scss
@mixin mixin {
color: red;
}
.box {
@include mixin;
}
Parent References:
Stylus uses the & operator for parent references, but it's implicit. In SCSS, the & is used explicitly.
Example:
stylus
.container
.button
&:hover
color: red
becomes:
scss
.container {
.button {
&:hover {
color: red;
}
}
}
Tools to Help Convert Stylus to SCSS
Manual Conversion: Since Stylus and SCSS are similar but have distinct syntax, the best method for conversion is manual adjustment, following the steps outlined above.
Online Tools: Although there isn't a direct Stylus-to-SCSS converter, you can use an online Sass/SCSS compiler to check the output of your SCSS after conversion.
Conclusion:
Stylus to SCSS conversion involves translating the syntax of variables, nesting, semicolons, and mixins from Stylus to SCSS.
Key changes include adding semicolons after properties, using curly braces for blocks, and defining mixins with @mixin and @include.