Converting Stylus to Sass (specifically indented syntax of Sass, not SCSS) requires rewriting the code from Stylus syntax to Sass syntax. Both Stylus and Sass are CSS preprocessors, but Sass (indented syntax) uses indentation instead of braces and semicolons, which is more similar to Stylus in terms of minimal syntax.
Key Differences Between Stylus and Sass (Indented Syntax):
Variables:
Stylus: Variables are declared using $ with no semicolons.
Sass (Indented Syntax): Variables are declared using $ with no semicolons (same as Stylus in this case).
Nesting:
Both Stylus and Sass (Indented Syntax) support nesting, but Sass uses indentation instead of curly braces.
Stylus doesn't require curly braces or semicolons.
Sass (Indented Syntax) doesn't use curly braces either, and it uses indentation to denote the scope.
Mixins:
Stylus allows you to define mixins without any keyword and call them simply by mentioning the mixin's name.
Sass (Indented Syntax) requires =mixin_name to define a mixin and @include mixin_name to use it.
Semicolons:
Stylus does not require semicolons at the end of each property.
Sass (Indented Syntax) does not use semicolons at all.
Stylus to Sass (Indented Syntax) 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 Sass (Indented Syntax) Code:
sass
$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
Conversion Process:
Variables:
Stylus and Sass (Indented Syntax) both use the $ symbol for variables, so no change is needed.
Example:
stylus
$primary-color = #3498db
becomes:
sass
$primary-color: #3498db
Nesting:
In Stylus, there's no need for curly braces {} or semicolons. The same is true for Sass (Indented Syntax).
Example:
stylus
.container
.content
color: red
becomes:
sass
.container
.content
color: red
Mixins:
In Stylus, mixins can be used without needing a special keyword.
In Sass (Indented Syntax), mixins must be defined with =mixin_name and used with @include.
Example:
stylus
mixin()
color: red
.box
mixin
becomes:
sass
=mixin
color: red
.box
@include mixin
Parent References:
Stylus and Sass both support the parent selector &, but Sass (Indented Syntax) requires explicit use of the & operator for referencing the parent selector.
Example:
stylus
.container
.button
&:hover
color: red
becomes:
sass
.container
.button
& :hover
color: red
Semicolons:
Stylus doesn't require semicolons after properties or at the end of blocks.
Sass (Indented Syntax) doesn't require semicolons either, making the conversion simple in this aspect.
Conclusion:
Stylus to Sass (Indented Syntax) involves minor syntax changes since both are very similar in structure and both avoid the use of curly braces and semicolons.
Variables and nesting don't change much, but mixins and parent references will require adjustments.