zurb / foundation-icons

427 stars 85 forks source link

Sass font-face mixin too brittle compared to alternative ways of writing it that should be mentioned or replacing the current method described in the documentation. #38

Open lozandier opened 11 years ago

lozandier commented 11 years ago

To avoid having less variables, and the need to specify the URL helpers in a brittle way (leaving it more to the configurations of the end user to be automatically generated rather than a string), the Font-face mixin should be written this using the font-face mix-in (using the .sass syntax for the sake of simplicity)

It removes the need to have a $font-filename variable and the need to state the path (URL helpers are utilized internally):


// Note: @mixin and = are the same thing when you use the .sass syntax in case this is being read by a .scss user that's like 'WTF?'
= face 
  +font-face("#{$font-name}",
    font-files("#{$font-name}.woff", woff, 
    "#{$font-name}.ttf", ttf, 
    "#{$font-name}.svg", svg), "#{$font-name}.eot", normal, normal);

Edit: Doh, it's a Compass mixin; I would still inform users of the option.

FloNeu commented 11 years ago

I wouldn't add the compass dependency and rewrite the mixing in .sass syntax. I find this syntax a lot harder to read and understand by users not familar with preprocessors. If you got a doubled mixing in different stand alone components it's not really a problem because it doesn't bload the resulting css.

I also created this small project, because i didn't like the way the provided mixings handled the icon-font-import... maybe someone likes it... https://github.com/FloNeu/sass-icon-font-importer

All the best, Florian

lozandier commented 11 years ago

@FloNeu I wouldn't advocate a specific syntax of a unique language like Sass that gives you the option of an alternate syntax on anyone, that was a personal preference of mine to use the .sass syntax.

Likewise, it's not harder to read necessarily, that's a subjective claim.

Because Compass is utilized by Foundation to be installed, it makes sense to me to mention Compass's font-face mix-in to be able to use the font icons quicker.

FloNeu commented 11 years ago

I didn't mean to insult you. I would advocate the scss syntax, because it was much easier for people with css, but no preprocessor exp. to understand and edit it. Sure this is personal preference and it's up to you which to use. As i said i wouldn't add the compass mixing to the icon-import files, as people using the icon-font may not use compass or foundation.

lozandier commented 11 years ago

@FloNeu No offense taken.

You have a completely valid point regarding only mentioning the Compass version instead of what's already provided; my point is to perhaps mention the official Compass font-face mix-in in addition to what's already provided, since it's very likely they're using the Compass version since one of the default ways of getting started w/ Foundation is to install it w/ Compass .

Similarly, Zurb provides a convenient way of integrating Foundation w/ Rails via a Ruby gem. Rails by default uses Compass via compass-rails.

As a result, it made sense to me to mention a way of integrating the fonts using Compass's very convenient font-face mixin.