SASS Lightweight CSS Library Sandbox

Summary

Playing around with SASS library - testing variables, mixins, maps, lists, loops, functions and more.

On my development machine I have structured the project into separate .scss files - partials.

I will include only a few examples below. The full code will be in the Code Pen. (link bottom of page)

Partials

index.scss

// variables and functions
@import 'functions';
@import 'variables';

// base reset and layout
@import 'base';
@import 'breakpoints';
@import 'grid';

// colours
@import 'colours';

// components - button, card, navbar, badge
@import 'components/card';
@import 'components/button';
@import 'components/navbar';
@import 'components/badge';
@import 'components/alert';

// utilities - margin, padding, opacity eg. m-4, pl-3, o-40
@import 'utilities';

_variables.scss

// theme colours
$primary: #326dee;
$secondary: #1ac886;
$error: #d32752;
$info: #f6c31c;

// colour palette - map
$colours: (
  'primary': $primary,
  'secondary': $secondary,
  'error': $error,
  'info': $info,
  'blue': #1919e6,
  'red': #e61919,
  'yellow': #e6e619,
  'green': #19e635,
  'orange': #ffa600,
  'purple': #9900ff,
  'gray': #808080,
  'black': black,
  'white': white,
);

// spacing
$base-padding: 0.75rem;
$base-margin: 0.75rem;

// borders
$base-border-thickness: 1px;
$base-border-radius: 20px;

// box shadow
$base-box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.1);

// font size
$base-font-size: 1rem;
$font-size-sm: $base-font-size * 0.75;
$font-size-lg: $base-font-size * 1.5;
$font-size-xl: $base-font-size * 2;
$font-size-xxl: $base-font-size * 3;

_base.scss

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* reset styles - vanilla css */
* {
  color: inherit;
  margin: 0;
}

body {
  font-family: Poppins;
}

ul {
  padding: 0;
  list-style-type: none;
}

a {
  text-decoration: none;
}

hr {
  border: 0;
  border-top: 1px dotted #efefef;
}

img {
  max-width: 100%;
}

h1 {
  a {
    color: crimson;
  }
}

_breakpoints.scss

// breakpoint - map
$breakpoints: (
  'xs': 0,
  'sm': 480px,
  'md': 720px,
  'lg': 960px,
  'xl': 1200px,
);

// mixins
@mixin xs {
  @media (min-width: map-get($breakpoints, 'xs')) {
    @content;
  }
}
@mixin sm {
  @media (min-width: map-get($breakpoints, 'sm')) {
    @content;
  }
}
@mixin md {
  @media (min-width: map-get($breakpoints, 'md')) {
    @content;
  }
}
@mixin lg {
  @media (min-width: map-get($breakpoints, 'lg')) {
    @content;
  }
}
@mixin xl {
  @media (min-width: map-get($breakpoints, 'xl')) {
    @content;
  }
}

_card.scss

@use 'sass:math';

.card {
  display: block;
  padding: $base-padding;
  border: $base-border-thickness solid #ddd;
  box-shadow: $base-box-shadow;
  border-radius: math.div($base-border-radius, 4);

  .card-title {
    font-size: $font-size-lg;
    padding-bottom: $base-padding;
    font-weight: bold;
  }

  .card-body {
    font-size: $base-font-size;

    a {
      text-decoration: underline;
      color: $primary;
    }
  }
}

Tech

• html
• css
• sass
• gulp
• code pen

Demo

Here is a link to the sandbox / demo on Code Pen.

Link to Sandbox Demo