Matthew-Oduamafu/Project-1-Restaurant-Georgia

Application Of SASS (Restaurant-Georgia)

Click here to view site

To view site click here

Table of content

1. SASS Variables
2. SASS Mixins

This project uses the power of SASS to Transpile SASS code into css

SASS Variables

I made use of sass variables for define some commonly used font-family, colors, etc that a repeated many places in the project.

example code snippet below

$color-primary: #d3ad55;
$color-secondary: #bbb;

// fonts
$font-dancingScript: "Dancing Script", "cursive";
$font-nunito: "Nunito", "sans-serif";

SASS Mixins

I used sass Mixin to group some css properties that can be apply to different elements. This way, the properties get declared ones and then applied wherever it is needed.

How to mixins:

@mixin flexLayouts() {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin textStyles($transform: uppercase) {
  font-weight: 300;
  letter-spacing: 2px;
  text-transform: $transform;
}

How to apply mixin:

&-right {
  @include flexLayouts();
}
.nav-list {
  &-link {
    @include textStyles(capitalize);
  }
}

SASS Placeholders & Nesting

Sass placeholder is a way of implementing normal css multiple selectors

How to declare sass placeholder

%fullSpace {
  width: 100%;
  height: 100%;
}

Applying scss placeholder

.menu {
  @extend %fullSpace;
}

Sass Nesting can be used to apply style to a parent css selector and its child elements

.card {
  position: relative;

  &:hover .card-overlay {
    left: 0;
  }
  &-overlay {
    position: absolute;

    &-heading {
      @include textStyles(capitalize);
    }
    &-paragraph {
      @include textStyles(capitalize);
    }
    &-btn {
      width: 150px;
      height: 40px;
      color: $color-primary;
    }
  }
  &-img {
    @extend %fullSpace;
  }
}