Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Easy to customize #9

Open
Kikobeats opened this issue Nov 22, 2016 · 4 comments
Open

Easy to customize #9

Kikobeats opened this issue Nov 22, 2016 · 4 comments

Comments

@Kikobeats
Copy link

Kikobeats commented Nov 22, 2016

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
Copy link

dfosco commented Nov 27, 2016

@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
Copy link

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

@dfosco
Copy link

dfosco commented Sep 21, 2017

@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
Copy link

Thanks, I'll have a look

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants