CSS/SCSS tips and tricks

My first time working on a large project as a front end developer I learned a lot. How to follow a design template, how to keep a website style consistent. How to use SCSS effectively. It's this last thing that proved most important to me. Knowing how to use SCSS effectively in a big project can save you a lot of time and a lot of frustration. This article will delve into the SCSS features, which I found the most interesting.

1) have a template file
The first thing I did after taking a look at the design mockups was creating a template file. In this file I stored all reocurring styling elements, such as our brand colors, margins, paddings etc. later on I added mixins to this file for reocurring divs and buttons. This makes it easier to style new pages as you get deeper and deeper into the site as you can just reuse mixins and variables the whole time. It also helps to have your site have a consistent layout.

2) nesting elements
Nesting elements might not seem like a big deal at first, But it really does a lot to have your scss file look a little cleaner and helps you find the right class just a lot easier. I also found nesting very useful when needing to style several elements inside another element.

.wrapper {
    a {
    color: red;
    }
}

3) nesting media queries
In SCSS media queries don't need to be assigned at the root level. specifying a media query inside a nested element, makes it a lot easier to keep your CSS organized, espescially in SCSS where most elements are often nested.

4) placeholder elements
You can use % to create placeholder selectors that don't generate any CSS output unless they are extended. This can be useful for defining common styles that are shared across multiple selectors.

%button-base {
  padding: 10px;
  border: 1px solid #000;
}

.button {
  @extend %button-base;
  background-color: blue;
}

.secondary-button {
  @extend %button-base;
  background-color: gray;
}

5) mixins with arguments
passing arguments to your mixins makes your code look just that little bit cleaner, no need to overwrite your code after including the mixin.

@mixin button($bg-color, $text-color) {
  background-color: $bg-color;
  color: $text-color;
  padding: 10px;
}

.button {
  @include button(blue, white);
}

obviously there are some more fancy tricks you can do using scss like loops, if else statements, interpolation, maps, etc...but these are the ones that I actually ended up using.