Converting CSS to SASS in Rails Project

As an exercise to flex and practice my SASS skills, I recently converted the CSS in one of my projects to SASS. Did this project need the conversion? Ehh, probably not. I'm only using one stylesheet and it's less than 300 lines, but converting a smaller stylsheet is great practice for a larger project.

Getting Started

My YellowBitRoad application is running Rails 6, so the sass-rails gem was shipped with Rails.

I had dumped all of my CSS into application.css. To start the conversion to SASS, I created a new stylesheet /app/assets/stylesheets/style.scss. All stylesheets included in app/assets/stylesheets will be compiled and used in your application.

In your Rails application, you'll see comments at the top of application.css explaining how stylesheets are incorporated. You'll also see a suggestion to split up your CSS, and see .scss files created for each model generated with the rails g model command. For my purposes, it doesn't make sense to split up such a small file, so I'm going to put everything into one stylesheet.

Color Palette

One of the most convenient things about SASS, to me, is not having to remember, look up, copy and/or paste HEX codes. Also, do you know what color #01BAEF is? Maybe you do, but I have no clue. I love picking out a color palette for my application, I don't like having to remember HEX or RGB codes or what colors they represent.

My first step in the conversion was saving all my theme colors as variables, and them implementing those variables throughout my stylesheet.

CSS: Before

nav, footer{
  background: #04724D; 
  height: 70px;
  width: 100%;
}
a {
  color: #04724D; 
  font-weight:bold;
}

SASS: After

$dark_green: #04724D; 
$light_green:  #16DB65;
$yellow: #FFD23F;
$red: #B80c09;
$light_blue:  #01BAEF;

 body {margin: 0;}
 nav, footer{
   background: $dark_green; 
   height: 70px;
   width: 100%;
 }
 a {
  color: $dark_green; 
  font-weight:bold;
}

Hooray! That was exceedingly easy, and now I can decide to change my entire color palette if I would like. I can also remember color names a lot easier than HEX codes, so I don't have to keep referencing previous style rules when writing more CSS.

If there is a good chance you'll change your theme colors entirely, you may want to choose more generic variables names ($main_color, $secondary_color, etc.) so you can change the HEX values and still have variables that make sense for your fellow devs and your future self.

Nesting

Next I tackled nesting my separate style rules where I could. For my project, this made a lot of sense for my nav and footer elements.

Anywhere I had a rule for a child element of nav or footer (really apparent in my CSS as I referenced those parent elements), I converted the separate rules into my two new nested rules. I also used the opportunity to nest some rules where I didn't reference the parent element, but used an ID for their children.

Before: CSS

nav, footer{
  background: #04724D; 
  height: 70px;
  width: 100%;
}
nav { 
  position:fixed; 
  top: 0; }
nav ul {
  text-align:right; 
  margin: 0 auto; 
  width:85%;
}
nav ul li {
  display:inline-block; 
  margin-right:25px; 
  line-height:70px;
}
nav a, footer input {
  color:white; 
  text-decoration: none; 
  font-family: 'Roboto Slab', arial, sans-serif;  
  font-size:20px; margin-bottom: 10px;
}
nav a:hover{
  border-bottom: 1px solid white;
}
footer {
    padding-top: 20px;
    padding-left: 20px
  }
footer input {
    color: white;
    border: none;
    background: none;
}
#branding{
  color: #fff;
  display: inline-block;
  float:left;
  line-height: 70px;
}
#nav-items {
  width:85%;
  margin: 0 auto;;
}

After: SASS

nav { 
    position:fixed; 
    top: 0; 
    background: $dark_green; 
    height: 70px;
    width: 100%;
    ul {
        text-align:right; 
        margin: 0 auto; 
        width:85%;
        li {
            display:inline-block; 
            margin-right:25px; 
            line-height:70px;
        }

    }
    a {
        color:white; 
        text-decoration: none; 
        font-family: 'Roboto Slab', arial, sans-serif;  
        font-size:20px; 
        margin-bottom: 10px;
    }
    a:hover{
        border-bottom: 1px solid white;
    }
    #nav-items {
        width:85%;
        margin: 0 auto;
    }
    #branding{
        color: #fff;
        float:left;
        line-height: 70px;
    } 
}
 footer {
     padding-top: 20px;
     padding-left: 20px;
     background: $dark_green; 
     height: 70px;
     width: 100%;
     input {
        color: white;
        border: none;
        background: none;
        text-decoration: none; 
        font-family: 'Roboto Slab', arial, sans-serif;  
        font-size:20px; 
        margin-bottom: 10px;
    }
   }

Now, we've had to repeat some styles here, in the outer footer and nav nested rules, but I'm okay with that. It's minor, and now I can visually see all the style rules that affect these two parent elements and their children.

Converting the a smaller CSS file to SASS is great practice. Do you use SASS, CSS or both? Have you ever converted a large project from one CSS to SASS? Let me know!