#100DaysOfCode - Day 22: Let's Get Sassy

It’s Friday! And man, do I have some work to do this weekend. I’m excited, but also a bit nervous. If there’s an image that could summarize how I feel right now, this would be it:

Extending beyond work today, I haven’t really been able to work much, but Ann-Marie has been great about encouraging me to do this post, so I decided to quickly set up some css to improve the links you see up there ^^^ to go back/forth between posts. From having the time to be able to do so, I was able to figure out how to center them left/right, as well as compile scss into css again, so I can start writing in a bit more dynamic of a styling language.

For the menu above, I used the following code (in CSS):

.PageNavigation {
    font-size: 14px;
    display: block;
    width: auto;
    overflow: hidden;
  }
  
  .PageNavigation a {
    display: block;
    width: 50%;
    float: left;
    margin: 1em 0;
  }
  
  .PageNavigation .next {
    text-align: right;
  }

This same thing, can very easily be written in .scss as well, with a much clearer inheritance structure.

.PageNavigation {
    font-size: 14px;
    display: block;
    width: auto;
    overflow: hidden;
    a {
        display: block;
        width: 50%;
        float: left;
        margin: 1em 0;
    }
    .next {
        text-align: right;
    }
}

To compile this locally, I just run the following from my blog when making a post, and it’ll automatically compile on save:

sass --watch css/

That’s all I have for today! Happy Coding.

@Moxnr