Styles - Abstracts
This package gathers all Sass tools and helpers used across the project. Every global variable, function, mixin and placeholder should be put in here.
The rule of thumb for this folder is that it should not output a single line of CSS when compiled on its own. These are nothing but Sass helpers.
Reference: Sass Guidelines > Architecture > Abstracts folder
Styles packages structure
Styles - Abstracts package is created as part of restructuring Studyportals styling. This structure is based on a combination of SMACCS and the 7-1 pattern.
More information about how we use the patterns, can be found in the Knowledge Vault.
Installing the package
Install the package
npm install --save-dev @studyportals/styles-abstracts
Publishing the package on the GitHub Package Registry
- Ensure you are authenticated to the GitHub Package Registry. This section explains how.
Usage of functionality
How can I use:
There are two ways to use this package:
- Import all files into your project.
- Select specific files to use in your project.
Using the entire package
To use the entire package, you can import the
abstracts.scss file from the package into your project.
// Import the entire abstracts package @import '~@studyportals/styles-abstracts/abstracts.scss'; // Importing using the full url @import './node_modules/@studyportals/styles-abstracts/abstracts.scss';
~ is an alias for
node_modules. You might need to set this up in your project. Otherwise you can use the full url.
Using specific files
It's also possible to import only the files you need in your project. For example, only the (color) variables and/or the typography mixins.
To do this, you only need to import the specific files from the package into your project.
// Import only the mixins. @import '~@studyportals/styles-abstracts/mixins'; // Import only variables. @import '~@studyportals/styles-abstracts/variables'; // Import only the color variables. @import '~@studyportals/styles-abstracts/variables/colors'; // Import only the font size mixins. @import '~@studyportals/styles-abstracts/mixins/typography';
For all available files, you can explore the contents of this package.
This project is licensed under the BSD 3-Clause License - see the LICENSE file for details.
Shared with style team