Tachyons Sass partials.
Solus-Tachyons aims to leverage the tooling of Sass in the same way tachyons-css utilises PostCSS, thus enabling the creation of custom breakpoints and variable definitions when generating Tachyons modules with Sass. While there is a tachyons-sass variant from which this project is forked, it does not fully leverage the potential of Sass.
Solus-Tachyons breaks from the Tachyons parent project by integrating CSS custom properties alongside Sass variables definitions so that they can be used interchangeably within your projects. These features allow Tachyons scales and structure to be selectively used to provide uniformity in a project (for example, when using BEM methodology) while also allowing the option of generating selected Tachyons partials when you want to add "just a sprinkle" of Tachyons. These features are beneficial when using hybrid authoring approaches and migrating to or away from Tachyons.
To develop locally with Solus-Tachyons
git clone https://github.com/solus-css/solus-tachyons-sass.git
cd solus-tachyons-sass
npm installOr as an NPM dependency:
npm i https://github.com/solus-css/solus-tachyons-sass@import "path/to/tachyons.scss";If you want to just use everything in tachyons/sass as a jumping off point and edit all the code yourself, you can compile all of your wonderful changes by running:
npm start
This will output both minified and un-minified versions of the CSS to the CSS directory and watch the sass directory for changes. It's aliased to the command:
npm run build:watch
If you'd like to just build the CSS once without watching the sass directory, run:
npm run build
If you want to check that a class hasn't been redefined or 'mutated,' there is a linter to check that all of the classes have only been defined once. This can be useful if you are using another library or have written some of your own CSS and want to make sure there are no naming collisions. To do this run the command:
npm run mutations
Stylelint can be used to lint generated css after a build command by running the command:
npm run lint:css
Solus-Tachyons-SASS is bunnedled with wallace-cli. After a build, you can generate a report of useful statistics about your CSS in your terminal by running the command:
npm run wallace
Solus-Tachyons includes custom CSS properties for colors and all unit based values, where the name for each property matches its Sass variable counterpart.
For example the spacing values for margin-all (ie .ma3) are governed by the CSS custom property: var(--spacing-medium) which corresponds to the Sass variable $spacing-medium.
Custom CSS properties are defined in *-vars.scss files that appear along side the partial definitions for that group, while global Sass variables are found in _all_variables.scss.
Solus-Tachyons-SASS uses variables and mixins to construct Sass partials for each Tachyons module.
Sass variable names are identical to their custom property counterpart, a pattern established by tachons-sass from which this project is forked. See also tachyons-custom which offers a near identical suite of custom variables, with the notable exception of properties related to colors ie skins, where tachyons-custom has a greatly expanded color property set, diverging from the parent project.
Sass global variables are defined in the file _all_variables.scss.
Each Tachyons module utilises a matched collection of Sass mixins. Mixins are defined in *-mixins.scss files where the mixin name is the same as the Tachyons class name:
@include ma3; // .ma3Breakpoints and their utility class prefixes are defined in _all_variables.scss. The mixin that does the heavy lifting can be found in _breakpoint-gen-mixin.scss.
Adding or tweaking breakpoints can be done by modifying the key:value pairs of the $breakpoints map found in _all_variables.scss:
// Custom Media Query Variables
$my-super-small-breakpoint: 'screen and (min-width: 15em)' !default;
$breakpoint-not-small: 'screen and (min-width: 30em)' !default;
$breakpoint-medium: 'screen and (min-width: 30em) and (max-width: 60em)' !default;
$breakpoint-large: 'screen and (min-width: 60em)' !default;
$breakpoints: (
'': '', // required
'ss': $my-super-small-breakpoint,
'ns': $breakpoint-not-small,
'm': $breakpoint-medium,
'l': $breakpoint-large
) !default;NOTE: Be mindful when adding arbitrary breakpoints as these will balloon the overall size of your compiled CSS, as each suite of Tachyons utility classes will be generated for every breakpoint.
Where backwards compatibility is no longer a concern, we have begun removing or augmenting styles and rules that have either been deprecated or where modern tools and techniques are available.
This project has adopted a few tools to speed build times, and reduce cognitave overhead. These include dart-sass, for new Sass features, as well as and stylelint, and prettier for code formatting. Because there doesn't appear to be a perfect configureation which will follow Tachyons formatting conventions –– we decided not to bikeshed about it and just let Stylelint+Prettier do that work.
Due to their flexibility, especially with animations, this project has chosen to use hsl and hsla color values instead of hex.
Where backwards compatibility is no longer a concern, we have begun removing the styles that target older versions of IE. Fortunately, these are few and far between:
- Reference to
<command>element removed from_debug.sass. _clears.sasscurrently uses Nicolas Gallagher's clearfix hack. As most layouts no longer use floats, this module be removed from many projects._visibility.scssprovides an accessable way to hide content using.clip, which in turn uses an underscore hack that targets IE6 and below.
MIT
- Fork it
- Create your feature branch (
git checkout -b my-new-feature) - Commit your changes (
git commit -am 'Add some feature') - Push to the branch (
git push origin my-new-feature) - Create new Pull Request