Skip to content

Instantly share code, notes, and snippets.

@Kozlika
Last active March 25, 2016 14:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save Kozlika/548d89c6ef48a035cbf3 to your computer and use it in GitHub Desktop.
Save Kozlika/548d89c6ef48a035cbf3 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----
// Settings
// ===========================================
$fonts-map: (
'sourcesanspro':
( // sera utilisé comme valeur pour la font-family de ce groupe
(
'font-path' : "sourcesanspro_regular_macroman/SourceSansPro-Regular-webfont",
'font-weight' : 400,
'font-style' : normal
) ,
(
'font-path' : "sourcesanspro_semibold_macroman/SourceSansPro-Semibold",
'font-weight' : 600,
'font-style' : normal
) ,
(
'font-path' : "sourcesanspro_italic_macroman/SourceSansPro-It-webfont",
'font-weight' : 400,
'font-style' : italic
)
),
'martel':
( // sera utilisé comme valeur pour la font-family de ce groupe
(
'font-path' : "martel/martel-regular-webfont",
'font-weight' : 400,
'font-style' : normal
)
)
);
$map: $fonts-map !default;
$webfont-path: "../webfont/" !default;
// Mixin
// ===========================================
// Import unitaire fonte
/// @include sc-import-font(roboto, 'chemin/vers/roboto');
@mixin sc-import-font($fonte, $font_path, $font_weight: normal, $font_style: "") {
$family: quote( #{$fonte} );
$wf-src: $webfont-path + $font-path;
@font-face {
font-family: $family;
src: url($wf-src + ".eot");
src: url($wf-src + ".eot?#iefix") format('embedded-opentype'),
url($wf-src + ".woff") format('woff'),
url($wf-src + ".ttf") format('truetype');
font-weight: #{$font-weight};
font-style: #{$font-style};
}
}
// Importe chaque font de la $map
/// @include sc-import-fonts($map);
@mixin sc-import-fonts($map) {
@if ($map != null) and (type-of($map) == "map") {
@each $font-group, $font in $map {
@each $variante in $font {
@include sc-import-font($font-group, $variante...);
}
}
}
@else {
@warn "$fonts-map est vide ou n'existe pas";
}
}
// Test
// ===========================================
@include sc-import-fonts($map);
@font-face {
font-family: "sourcesanspro";
src: url("../webfont/sourcesanspro_regular_macroman/SourceSansPro-Regular-webfont.eot");
src: url("../webfont/sourcesanspro_regular_macroman/SourceSansPro-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("../webfont/sourcesanspro_regular_macroman/SourceSansPro-Regular-webfont.woff") format("woff"), url("../webfont/sourcesanspro_regular_macroman/SourceSansPro-Regular-webfont.ttf") format("truetype");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "sourcesanspro";
src: url("../webfont/sourcesanspro_semibold_macroman/SourceSansPro-Semibold.eot");
src: url("../webfont/sourcesanspro_semibold_macroman/SourceSansPro-Semibold.eot?#iefix") format("embedded-opentype"), url("../webfont/sourcesanspro_semibold_macroman/SourceSansPro-Semibold.woff") format("woff"), url("../webfont/sourcesanspro_semibold_macroman/SourceSansPro-Semibold.ttf") format("truetype");
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: "sourcesanspro";
src: url("../webfont/sourcesanspro_italic_macroman/SourceSansPro-It-webfont.eot");
src: url("../webfont/sourcesanspro_italic_macroman/SourceSansPro-It-webfont.eot?#iefix") format("embedded-opentype"), url("../webfont/sourcesanspro_italic_macroman/SourceSansPro-It-webfont.woff") format("woff"), url("../webfont/sourcesanspro_italic_macroman/SourceSansPro-It-webfont.ttf") format("truetype");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "martel";
src: url("../webfont/font-path.eot");
src: url("../webfont/font-path.eot?#iefix") format("embedded-opentype"), url("../webfont/font-path.woff") format("woff"), url("../webfont/font-path.ttf") format("truetype");
font-weight: martel/martel-regular-webfont;
}
@font-face {
font-family: "martel";
src: url("../webfont/font-weight.eot");
src: url("../webfont/font-weight.eot?#iefix") format("embedded-opentype"), url("../webfont/font-weight.woff") format("woff"), url("../webfont/font-weight.ttf") format("truetype");
font-weight: 400;
}
@font-face {
font-family: "martel";
src: url("../webfont/font-style.eot");
src: url("../webfont/font-style.eot?#iefix") format("embedded-opentype"), url("../webfont/font-style.woff") format("woff"), url("../webfont/font-style.ttf") format("truetype");
font-weight: normal;
}
@Kozlika
Copy link
Author

Kozlika commented Mar 23, 2016

J'ai besoin d'aide. Quelqu'un peut me dire pourquoi ça ne marche pas si je définis la map en début de fichier ?

@Kozlika
Copy link
Author

Kozlika commented Mar 23, 2016

I don't understand why it doesn't work if I set $fonts-map at the begining of the file ?

@piouPiouM
Copy link

@Kozlika: la variable $sourcesanspro déclarée en ligne 130 a une portée locale à ton test. Elle n'existe donc au niveau global et est inconnue en ligne 165. Du coup, lignes 165 et 166 il te faut appliquer les font-family à l'aide du nom des polices comme déclarées en clés de ta map :

.font-stacks-test {
  font-family: 'sourcesanspro';
  font-family: 'martel';
}

@Kozlika
Copy link
Author

Kozlika commented Mar 23, 2016

Merci de ta réponse rapide @piouPiouM !

Ah oui mais c'est un souci secondaire. J'ai surtout, quand je définis la map via l' import avant ce fichier (ou pour le test quand je place la partie C avant la partie B) un message "$fonts-map est vide ou n'existe pas" (mon @warn du mixin sc-import-fonts).

Je vais simplifier le fichier en enlevant les lignes que tu signales pour ne pas polluer le test.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment