@theholocron/scss-mixins

0.3.0 • Public • Published

(S)CSS Mixins npm

This utility droid provides a set of single-purpose, functional mixins for writing (S)CSS within the Galaxy.

Installation

$ npm install --save-dev @theholocron/scss-mixins

Table of Contents

Usage

// include all utilities with 'scss-mixins' as the namespace
// calls all mixins and will include in CSS output
@use "./node_modules/@theholocron/scss-mixins/src" as scss-mixins;

// include only a specific group of mixins
@use "./node_modules/@theholocron/scss-mixins/src/box-model" as *;
// call the mixins from this group
@include background-color();
@include border();

// use only a specific mixin
@use "./node_modules/@theholocron/scss-mixins/src/box-model/border-radius" as *;
// call the mixin you want to use
@include border-top-radius();
@include border-right-radius();

The previous examples are only a sample of what utilities are available.

Documentation

The best way to find out what's available is to check out the source code or tests but you can also take a look at the-holocron.github.io/astromech/mixins or the README which have been generated by SassDoc and sassdoc-to-markdown.

  • At-Rules - these are miscellaneous utilities that use at @ selectors such as media queries.
  • Backgrounds & Borders - these utilities all revolve around properties, such as borders and backgrounds, etc.
  • Box Model - these utilities all revolve around the box-model properties, such as width, height, overflow, margin, padding, etc. Use these to force a element to size accordingly.
  • Positioning - these utilities all revolve around positioning elements around the page, such as flexbox, floats, position, etc. Use these to force a element to layout accordingly.
  • Pseudo-Classes - these are miscellaneous utilities that affect hover, focus or active states, and nth-child selectors.
  • Text - these utilities all revolve around the typography, such as sizing, alignment, transformation, whitespace etc. Use these to force a elements text to display accordingly.

How We Track Changes Keep a Changelog

This project uses a CHANGELOG and GitHub releases which contains a curated, chronologically ordered list of notable changes for each version of a project. Read more about changelogs.

How We Version semantic-release

We use SemVer for its versioning providing us an opt-in approach to releases. This means we add a version number according to the spec, as you see below. So rather than force developers to consume the latest and greatest, they can choose which version to consume and test any newer ones before upgrading. Please the read the spec as it goes into further detail.

Given a version number MAJOR.MINOR.PATCH, increment the:

  • MAJOR version when you make incompatible API changes.
  • MINOR version when you add functionality in a backward-compatible manner.
  • PATCH version when you make backward-compatible bug fixes.

Additional labels for pre-release and build metadata are available as extensions to the MAJOR.MINOR.PATCH format.

How to Contribute Conventional Commits

Have a bug or a feature request? Looking to contribute to advance the project? Read our contribution guide or maintenance guide first in order to understand how we do things around here. Or you could look at some of our other guides below:

How do I… (click to expand)

Where to Find Support Contributor Covenant

Looking to talk to someone or need some help? Please read our support guidelines.

License License: GPL v3

©2020 GNU General Public License v3. See LICENSE for specifics.

Readme

Keywords

none

Package Sidebar

Install

npm i @theholocron/scss-mixins

Weekly Downloads

10

Version

0.3.0

License

GPL-3.0

Unpacked Size

81.6 kB

Total Files

29

Last publish

Collaborators

  • thenewton