tachyons-css/tachyons-sass

Transpiled Sass partials for Tachyons

tachyons-sass

Transpiled partials for Tachyons.

Installation

npm install --save tachyons-sass

Usage

@import "path/to/tachyons.scss";

License

MIT

Contributing

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create new Pull Request

Built by @mrmrs_ & @4lpine.

---

This package was initially generated with yeoman and the p generator.

tachyons-sass's Issues

tachyons-sass violates the licence of its one upstream project

During swagger-api/swagger-ui#5042 I found out that tachyons embeds code from https://github.com/necolas/normalize.css/ without reproducing its copyright statement and full licence terms, as required by the MIT licence.

The source code simply has https://github.com/tachyons-css/tachyons-sass/blob/master/tachyons.scss#L28 so https://github.com/tachyons-css/tachyons-sass/blob/master/license better be changed to reproduce https://github.com/necolas/normalize.css/blob/master/LICENSE.md in full.

However (see the swagger-ui-dist issue above) this is also a problem for your downstreams. The generated CSS file distributed from your NPM module contains necolas/normalize.css code without its full licence terms and statements. A method of aggregation would be best, or perhaps embed it into the generated CSS (even though that would kinda defeat minification).

Failing CI

https://travis-ci.org/tachyons-css/tachyons-sass/jobs/454558834

Easy to customize

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?

CSS prefixes?

I see in tachyons-css/tachyons#240 that autoprefixer wasn't set up properly there, and -webkit- prefixes weren't being applied as needed, is there something I can do to get them included in the Sass output?

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0 [duplicate]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/tachyons-sass/scss/_clears.scss b/node_modules/tachyons-sass/scss/_clears.scss
index d4c2fc3..4ed07de 100644
--- a/node_modules/tachyons-sass/scss/_clears.scss
+++ b/node_modules/tachyons-sass/scss/_clears.scss
@@ -18,7 +18,7 @@
 .cf:before,
 .cf:after { content: " "; display: table; }
 .cf:after { clear: both; }
-.cf {       *zoom: 1; }
+.cf { zoom: 1; }
 
 .cl { clear: left; }
 .cr { clear: right; }
diff --git a/node_modules/tachyons-sass/scss/_widths.scss b/node_modules/tachyons-sass/scss/_widths.scss
index abc4fc7..322dfca 100644
--- a/node_modules/tachyons-sass/scss/_widths.scss
+++ b/node_modules/tachyons-sass/scss/_widths.scss
@@ -70,8 +70,8 @@
 .w-90 {  width:  90%; }
 .w-100 { width: 100%; }
 
-.w-third { width: (100% / 3); }
-.w-two-thirds { width: (100% / 1.5); }
+.w-third { width: calc(100% / 3); }
+.w-two-thirds { width: calc(100% / 1.5); }
 .w-auto { width: auto; }
 
 @media #{$breakpoint-not-small} {
@@ -94,8 +94,8 @@
   .w-80-ns { width:  80%; }
   .w-90-ns { width:  90%; }
   .w-100-ns { width: 100%; }
-  .w-third-ns { width: (100% / 3); }
-  .w-two-thirds-ns { width: (100% / 1.5); }
+  .w-third-ns { width: calc(100% / 3); }
+  .w-two-thirds-ns { width: calc(100% / 1.5); }
   .w-auto-ns { width: auto; }
 }
 
@@ -119,8 +119,8 @@
   .w-80-m { width:  80%; }
   .w-90-m { width:  90%; }
   .w-100-m { width: 100%; }
-  .w-third-m { width: (100% / 3); }
-  .w-two-thirds-m { width: (100% / 1.5); }
+  .w-third-m { width: calc(100% / 3); }
+  .w-two-thirds-m { width: calc(100% / 1.5); }
   .w-auto-m {    width: auto; }
 }
 
@@ -144,7 +144,7 @@
   .w-80-l {    width:  80%; }
   .w-90-l {    width:  90%; }
   .w-100-l {   width: 100%; }
-  .w-third-l { width: (100% / 3); }
-  .w-two-thirds-l { width: (100% / 1.5); }
+  .w-third-l { width: calc(100% / 3); }
+  .w-two-thirds-l { width: calc(100% / 1.5); }
   .w-auto-l {    width: auto; }
 }

This issue body was partially generated by patch-package.

How to extend

Hi, great project. Just thought it might be a good idea to include a suggestion within the docs on how to extend the Sass version of Tachyons (overriding certain default styles to suit the project at hand). Also, listing all of the variables that can be used within the docs would make it a lot easier for people to get started with regards to extending and customising.

Thanks in advance.

We should transpile tachyons-custom to expose more variables

Automate transpilation

Per discussion in #2

duplicate in downloaded zip from repo _debug_children.scss

There's a weird occurrence wherein if you download the project as a zip from this repo, there are two, nearly identical copies of _debug_children.scss. Now I've never used this file, but, I cant imagine Sass would be very happy with two items with the exact same name if you tried to import it.

Navigating the latest version in the repo here, of course, there is only one copy. . .

// Converted Variables


// Custom Media Query Variables


/*

  DEBUG CHILDREN

  Just add the debug class to any element to see outlines on its
  children.

*/

.debug * { outline: 1px solid gold; }

vs

// Converted Variables


// Custom Media Query Variables


/*

  DEBUG CHILDREN
  Docs: http://tachyons.io/docs/debug/

  Just add the debug class to any element to see outlines on its
  children.

*/

.debug * { outline: 1px solid gold; }
.debug-white * { outline: 1px solid white; }
.debug-black * { outline: 1px solid black; }

Error: Undefined variable: "$spacing-extra-small"

Running gulp I am getting:

Error: Undefined variable: "$spacing-extra-small".
    on line 38 of node_modules/tachyons-sass/scss/_negative-margins.scss
>> .na1 { margin: -$spacing-extra-small; }

Any ideas?
Thanks

add a variable in each module to turn off media query variants if not needed?

You could add an option inside of each module to do an "if (mediaquerries='1'){ output media querry stuff}" The tachyon library is pretty small but would be alot smaller without stuff like changing border widths at other screen sizes.

On the other hand one could just comment them out.?

Placeholder selectors

It would be great to have variants with placeholder selectors.

See http://thesassway.com/intermediate/understanding-placeholder-selectors

Flexbox order of precedence issue

I've noticed that when using the media query extensions on the flexbox module in conjunction with the display module, they don't seem to behave as expected. I would expect the below code to display flex on large displays and display none on all other sizes, but instead it stays permanently hidden.
<div class="dn flex-l">Foo bar<div>

`.maxs` or `.ma1`?

I nearly just started using tachyons and wanted to try out the sass bit of it. I'm a little lost about the naming convention... For what I could tell you dropped the acronyms for the v4 in favor of numbers for sizing things, e.g. drop .maxs in favor of .ma1. The commit #1 didn't include that, any plans to update the transpiled sass?

great work btw!

Release new version

The current 4.7.1 version is not the same than [email protected].

I don't know why, but they don't have available the last changes, such as .f7 class.

How to unclip

How would I 'unclip' an Element? If I have a clip class applied on mobile, which I want to unclip on not-small?

What is the release cycle for this project?

I was wondering what the release cycle was for this project? I see the main project seems to be officially at v4.11.1 and working on v4.11.2. (Although, I see the docs at https://tachyons.io say v4.10.0) meanwhile the project here seems to be at v4.9.5.

Missing modules

Hi, just noticed there are missing @import references to modules in tachyons.scss.

• scss/_word-break.scss

... and I'm not sure about this as it seems to be more like a sample file:

• scss/_gradients.scss

EDIT: Just checked the main repo issues and saw that you intend to remove it and the gradients was not even there. No issue I guess :) I'll just create what I need for my project.

$code not utilized

$code does not appear to actually be utilizedin font-family

Issue with order of precedence

Using the SASS files in my project, I've noticed an example where the order of precedence is resulting in rules not being applied as expected.

Eg, with the following I'd expect a border-top with 2.5rem thickness...

<div class="bt bw2">Foo bar</div>

However, in the generated CSS, the border-width classes appear before the border classes, meaning the border-width rules do not override the default 1px border widths.

In contrast the CSS at https://unpkg.com/[email protected]/css/tachyons.css shows the border-width classes after the border classes, so the width rules successfully override the defaults.

How do I customise?

I'm using webpack (Laravel Mix) within a Laravel 5.5 project.

In my default app.scss file where I import tachyons.scss, I would also like to define some other colours for example and have them be picked up and prefixed with bg- for background colours.

It would be good to have some more information around how to customise without touching the source files.

deprecation warning with dart-sass

Hello, I just switched from node-sass to (dart)sass, and now I see this warning in my Cypress tests:

  More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
98 │   .w-two-thirds-ns { width: (100% / 1.5); }
   │                              ^^^^^^^^^^
   ╵
    node_modules/tachyons-sass/scss/_widths.scss 98:30  @import
    node_modules/tachyons-sass/tachyons.scss 72:10      @import
    src/style/main.scss 3:13                            root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(100%, 3)

There's actually quite a few warnings of similar nature.

Context: Libsass/Node Sass is deprecated

Remove star property hack

tachyons-sass/scss/_clears.scss

Line 21 in 2dce89b

.cf { *zoom: 1; }

The star property hack is not valid CSS, so it breaks modern css parses.
I think it is safe to remove it because only very old browsers (IE 5.5 to 7) support it.

related:

• tachyons-css/tachyons#699
• swagger-api/swagger-ui#7526