Easy to customize

[Kikobeats]

I don't know if this repository is auto-generated, but, ideally, I want rewrite it to extracting styles into a _variables.scss file using !default.

Very similar how boostrap do that. After it, could be easy customize styles just declaring the variable and the value before call tachyons-sass main file.

The value of the files would be the values provided by tachyons-custom.

What do you think?

[dfosco]

@Kikobeats You can already do this if you just change the values of the current colors in _colors.scss. You'll have to stick to the same class names, but it's customizable enough.

To generate new classes, I've created a map with the colors provided in _colors.scss and then updated _skins.scss with a loop like this:

/* http://www.sassmeister.com/gist/49c70fc294789d9c5798a3cdc8103f4b */

/* _color-map.scss */
  $color-map: (
  "black": unquote("#{$black}"),
  "blue": unquote("#{$blue}")
);

/* _skins.scss */
@each $color-name, $color-prefix in $color-map {
 $color-value: nth($color-prefix, 1);

// Color classes
 .#{$color-name} {
   color: $color-value;
 }

 // Background Color classes
 .bg-#{$color-name} {
   background-color: $color-value;
 }
}

It then regenerates all color classes based on the variables passed to the map. I don't enjoy using Sass “magic tricks” as it can get out of hand pretty fast – hard to read and bloated output – but this much felt ok.

Creating new classes by hand is not exactly hard, but I don't see why we shouldn't automate it whenever it makes sense for customization & maintenance as long as it doesn't add too much complexity.

@mrmrs @johnotander thoughts on this? I could open a PR if you folks think it makes sense for the project.

[muhajirdev]

+1 on this. Is it actually implemented? @dfosco

[dfosco]

@muhajirframe Yes, you can see it in http://github.com/dfosco/tachyons-sass-custom

But keep an eye out for http://github.com/tachyons-css/tachyons-generator as it evolves, it's the better approach for customization IMO

[muhajirdev]

Thanks, I'll have a look