SCSS -Style better with CSS preprocessors

Objective

Use SASS to style the buttons and navbar links


Description

In this exercise, add styles to the HTML page (Jumbotron section and navbar) using SASS (SCSS) to the following template and create a layout similar to this prototype. Update the font family with Google fonts.


Prototype:

Mockup design for homepage

 


Template:

You can use the following template to fork and get started:

https://codesandbox.io/s/csspreprocessors-question-cbmfj

Bootstrap and JQuery are already imported in this index.html file which makes it responsive.

 

  • Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets. It adds special features such as variables, nested rules, and mixins into regular CSS.
  • Google Fonts is a free library of web fonts that you can use in your CSS by referencing the font’s URL.

 


Tasks

  • Create and use SASS variables
  • Save the variables in a separate file and import them
  • Nest CSS selectors
  • Darken or lighten the property of a button on hover

 

  • Style the two inline buttons as shown in the prototype
  • Add a box shadow property
  • On hover, the respective button should be highlighted.
  • Nest the hover property in this CSS class.

 

  • Add a box shadow to the navbar
  • Change the color of the nav link to #dd0031 and add a font-weight: 600.
  • Import a google font
  • Import the Poppins font to your web page. Then, use an element selector to set Poppins as the font-family for the body

Hints

To import a Google Font, you can copy the font’s URL from the Google Fonts library and then paste it in your HTML.

Copy the following code snippet and paste it into the top of your code editor (before the opening style element):

<link
  href="https://fonts.googleapis.com/css?family=Poppins"
  rel="stylesheet"
  type="text/css"
/>

 


Solution Walkthrough

Introduction

SASS (SCSS) is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets.

It provides a powerful way to create variables for CSS properties and to change/ update values of many CSS style properties at once. This allows you to use variables, nested rules, mixins, functions.

Partials: Partials are smaller SASS files that can be imported (see next section) into other SASS files. Think of partials as code snippets. A partial is designated as such by naming it with a leading underscore: _partial.scss

 

Variables:: SASS allows the use of variables that can store information you can use throughout your style sheet. For example, you can store a colour value in a variable at the top of the file, and then use this variable when setting the colour of your elements. This enables you to quickly change your colours without having to modify each line separately.

Syntax Sass has two syntaxes:

  • SCSS (Sassy CSS): Uses the .scss file extension and is fully compliant with CSS syntax. There is no strict indentation and use of semicolon and brackets is mandatory. Example:
//style.scss

$font-style: Robot, sans-serif;
$primary-color: #222;

body {
  font: $font-style;
  color: $primary-color;
}

 

  • Indented (simply called ‘Sass’): Uses .sass file extension and indentation rather than brackets. Example:
//style.sass

$font-style:  Robot, sans-serif
$primary-color: #222

body
  font: $font-style
  color: $primary-color

We are using SCSS in our solution.

 

Import: the @import directive allows you to import your partial files into the current file, to build one single CSS file

Nesting: SCSS allows us to nest CSS selectors in a similar manner. Nesting is a shortcut to creating CSS rules. So instead of writing so many lines of CSS just to be specific on the style we want to apply to an element, we simply nest it.

In Sass, the ampersand & is a very useful feature in nesting. If you want the selectors to be attached without leaving any space in between, we have to use the ampersand. This is especially useful when we have to nest pseudo-classes and pseudo-elements

Here, the img tag is nested under the selector .menu-type-btn. This makes the code better organized and it is easier to see the hierarchy.

In Sass, the ampersand & is a very useful feature in nesting. If you want the selectors to be attached without leaving any space in between, we have to use the ampersand. This is especially useful when we have to nest pseudo-classes and pseudo-elements.

Project setup

Install SASS globally

npm install -g sass

Create a folder SCSS and add a file style.scss

Also, create another folder CSS

 

Run the following command:

sass --watch scss/style.scss:css/style.css

This will watch any changes made in style.scss file and compile it to CSS and save it into css/style.css.

 

To import a Google Font, you can copy the font’s URL from the Google Fonts library and then paste it in your HTML.

Copy the following code snippet and paste it into the top of your code editor (before the opening style element):

<link
  href="https://fonts.googleapis.com/css?family=Poppins"
  rel="stylesheet"
  type="text/css"
/>

Now, we can use the font family Poppins in our styles.

Create a file (partial_config.scss in the scss folder. This will hold all the variables.

Define variables for the color of link, heading color and font style.

//_config.scss
$link-color: #dd0031;
$font-style: "Poppins", sans-serif;
$heading-color: rgb(0, 79, 113);

 

Now, import the variables defined in _config.scss file in style.scss using @import.

//style.scss
@import "config";

 

Then assign the variable $font-style as the font-family to the body. The font poppins was assigned to the variable $font-style in the _config.scss file.

 

//style.scss
body {
  font-family: $font-style;
}

 

Styling inline buttons The two inline buttons are added as:

<!-- index.html -->

<div role="button" class="menu-type-btn">
  <img
    src="https://s.svgbox.net/materialui.svg?ic=shopping_bag&fill=dd0031"
    width="28"
    height="28"
  />
  <strong>Pickup</strong>
</div>

<div role="button" class="menu-type-btn">
  <img
    src="https://s.svgbox.net/materialui.svg?ic=delivery_dining&fill=dd0031"
    width="28"
    height="28"
  />
  <strong>Delivery</strong>
</div>

Both of these have a class called menu-type-btn, which would be our selector to add styles. The icons are added as images from “svgbox.net”.

We add the following styles to our menu-type-btn to make it inline, add a box shadow, and also add several other styles such as background color, border color, etc. We also re-use the variable $link-color as our font color.

 

//style.scss
.menu-type-btn {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  background-color: white;
  border-radius: 20px;
  justify-content: center;
  margin: 16px 12px;
  padding: 1.25rem 2rem;
  font-size: 1.25rem;
  line-height: 1.5;
  display: inline-block;
  text-decoration: none;
  color: $link-color;
  font-weight: 800;
  word-spacing: 5px;

  &:hover {
    transform: scale(1.02);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.35);
    color: darken($link-color, 10%);
  }
}

 

Also, notice we have made use of &:hover instead of writing it as menu-type-btn:hover and nested the hover properties. darken($link-color, 10%) will darken the link color with 10%.

 

The above code is compiled to css as follows:

/* css/style.css */

.menu-type-btn {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  background-color: white;
  border-radius: 20px;
  justify-content: center;
  margin: 16px 12px;
  padding: 1.25rem 2rem;
  font-size: 1.25rem;
  line-height: 1.5;
  display: inline-block;
  text-decoration: none;
  color: #dd0031;
  font-weight: 800;
  word-spacing: 5px;
}
.menu-type-btn:hover {
  transform: scale(1.02);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.35);
  color: #aa0026;
}

 

Next requirement is to add a box-shadow to nav which is a navbar component.

//style.scss
nav {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}

 

Also, we want to change the color of the links and add font-weight. This can be done by nesting the properties inside nav selection as follows:

 

//style.scss
nav {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}
nav a {
  color: #dd0031 !important;
  font-weight: 600;
}