@pugpigjs/sass-utilities

Shared SASS utilities, mixins, functions, and base styles for Pugpig WordPress themes and plugins.

Installation

npm install --save-dev @pugpigjs/sass-utilities

Usage

Basic Setup

Import all utilities into your main SASS file:

@use '@pugpigjs/sass-utilities' as *

With Configuration

You can configure variables when importing:

@use '@pugpigjs/sass-utilities' as * with (
  $font-path: '@/fonts',
  $dark-mode: true,
  $wide: 1024px,
  $medium: 640px
)

Import Specific Modules

Import only what you need:

@use '@pugpigjs/sass-utilities/mixins.sass' as *
@use '@pugpigjs/sass-utilities/functions.sass' as *
@use '@pugpigjs/sass-utilities/placeholders.sass' as *

Configuration Variables

All variables use !default and can be overridden:

Breakpoints

$large: 1400px !default
$wide: 1024px !default
$medium: 640px !default
$small: 428px !default

Paths

$font-path: '@/fonts' !default

Features

$dark-mode: true !default
$font-base: 16 !default  // Base font size for rem() calculations

License

ISC