SCSS to SASS Converter

Background

While porting Minimal Mistakes and Beautiful Hugo’s Staticman support to Introduction, I searched for “SCSS to SASS” on DuckDuckGo. The search engine returned results on “CSS to SASS/SCSS” or vice versa. The first theme has Staticman code in SCSS. That would fit into the third theme’s directory structure, which puts SASS files under assets/sass. However, SASS doesn’t have curly braces {}. I feared that after hours of tedious manual replacement, the code would fail to run. As a consequence, I conducted such Internet search.

Solution

Scared by the error message in the recent failed GitLab CI build of a clone of Beautiful Jekyll, I don’t want to install Jekyll SASS Converter as a Ruby gem.

I clicked on the link to an online CSS to SASS converter. I guessed there’s an analogue for SCSS to SCSS, so I replaced css2sass with scss2sass in the previous link, and this worked!

I’ve finally obtained a desired converted SASS file. However, I don’t know why this file only works locally.

SASS  SCSS 

2 comments

Agustin's gravatar

Agustin

Wow man! thanks for posting this, even now in 2020 I needed to convert some old project .sass files to .scss and the scss2sass.herokuapp.com/converter was the solution that worked.
Joseph's gravatar

Joseph

.return-btn { // background: #FFFFFF 0% 0% no-repeat padding-box; box-shadow: 0px 3px 6px #00000029; border: 1px solid #428BCA; opacity: 1; text-align: center; width: 136px; height: 24px; }

.return-text { text-align: center; font: Regular 12px/16px Roboto; letter-spacing: 0px; color: #428BCA; text-shadow: 0px 3px 6px #00000029; opacity: 1; }

.subsc-text { text-align: left; font: Bold 18px/14px Roboto; letter-spacing: -0.72px; color: #023764; opacity: 1; font-style: italic; }

.h-90 { height: 90px; }

.sub-box-holder { background: #F5F5F5 0% 0% no-repeat padding-box; border: 1px solid #DDDDDD; opacity: 1; padding: 5px 15px 5px 15px; border-left: 3px solid #77BAB1; }

.sub-title { letter-spacing: 0px; color: #0D0D0D; text-align: left; border-bottom: 1px solid black; padding-bottom: 5px; .prd-title { font: bold 10px/14px Roboto; } .lvl-name { font: 10px/14px Roboto; } .edit-entry { font: 300 9px/14px Roboto; text-decoration: underline; color: #256CAB; } }

.sub-detail { letter-spacing: 0px; color: #0D0D0D; opacity: 1; text-align: left; .text { font: 300 10px/14px Roboto; }

.text-details { font: Bold 10px/14px Roboto; }

.visa-width { width: 25px; } .text-link { color: #256CAB; font: 300 10px/14px Roboto; text-decoration: underline; } }

.cancel-title { text-align: center; font: bold 24px/32px Roboto; letter-spacing: 0px; color: #003764; text-transform: uppercase; opacity: 1; font-style: italic; }

.cancel-text { text-align: left; font: normal 16px/21px Roboto; letter-spacing: 0px; color: #000000; opacity: 1 }

.no-cancel { text-align: left; text-decoration: underline; font: 14px/19px Roboto; letter-spacing: 0px; color: #000000; opacity: 1; }

.accpet-tos { height: 24px; width: 24px; margin-right: 5px; }

.tos-link { text-decoration: underline; }

Your email address will not be published. Required fields are marked *.