Sass placeholders are hoisted to the top of compiled stylesheets. I'd like to harness this to force any #font-face declarations to the top of my stylesheets (before any other compiled placeholders).
But when I try to do this:
%font-face {
font-family: 'FontName';
src:url('fonts/FontName.eot');
// other font files
}
#font-face {
#extend %font-face;
}
Sass gives me this error: Extend directives may only be used within rules.
Does anyone know a way to make Sass placeholders work with #font-face or a workaround that will have the same result?
You should use a mixin to handle the font-face import. It isn't going to work with a placeholder.
#include font-face;
Related
I have added font and tried to make mixin (also tried as varible, result is the same) to use it.
All sass files are connected through "style.sass"
#import '_interface'
#import '_fonts'
file "_fonts.sass", where I added font and made mixin
#font-face
font-family: 'Museo Sans Light'
src: url('../fonts/MuseoSansCyrl-300.eot')
src: url('../fonts/MuseoSansCyrl-300.eot?#iefix') format('embedded-opentype'),
url('../fonts/MuseoSansCyrl-300.woff') format('woff'), url('../fonts/MuseoSansCyrl-300.ttf')
format('truetype')
font-weight: normal
font-style: normal
#mixin reg
font-family: 'Museo Sans Light'
font-weight: 300
Then I tried to use it into "_interface.sass" for body tag:
body
box-sizing: border-box
color: $text-color
+reg
In the result I caught sass exception "no mixin named reg"
I will very grateful, If someone help!
Thank You.
SASS files are processed and loaded in an order-dependent way, so the file in which a mixin (or variable or function, etc.) is declared must be imported before that mixin is used in other files.
In your example, your mixin reg is declared in _fonts and used in _interface. For SASS to recognize and load reg, _fonts must be imported. After _fonts is imported, all subsequently loaded files, like _interface, will have access to reg.
A common pattern of working with shared SASS mixins, variables, or functions, is to create and store them in a single place (e.g. a file named _mixins, _vars, _functions) which you then import in your main SASS stylesheet before individual stylesheet modules. That way, you know that everything you need is already declared and available.
That might look something like this:
#import "_vars"; // Everything below knows about contents of _vars
#import "_mixins"; // Everything below knows about contents of _mixins
// These files can use everything above!
#import "_fileThatUsesSharedVariables";
#import "_fileThatUsesMixins";
#import "_fileThatUsesMixinsAndVariables"; // This last file can use everything above it!
I want to add AvantGard font to one paragraph in my React app, but it seems the font has no effect and I don't know why, here is how I am adding it:
I keep it as a ttf file in my assets folder.
I have global scss file index.css and I declare it there like this:
#font-face {
font-family: 'AvantGard';
font-style: normal;
src: url('./assets/fonts/avant_gartt/AvantGard.ttf');
}
I also have a variables.scss in which I keep it like this:
$avantGard: 'AvantGuard';
I import my variables in my component's css like this:
#import './variables.scss';
and then I just set the font-size of my paragraph:
font-family: $avantGard;
Does anyone have any idea why my font does not work? The rest of my fonts work the same way, but not this one.
Check your spelling on number 3.
AvantGard or AvantGuard?
I'm trying to import a web font using a sass mixin with the following extensions, .eot, .woff, .ttf
Here are the fonts file location.
For some reason the font is not rendering? I'm unsure why.
Here is my SASS mixin:
#mixin font-face($font-family, $file-path) {
#font-face {
font-family: $font-family;
src: url('#{$file-path}.eot');
src: url('#{$file-path}.woff');
src: url('#{$file-path}.ttf');
}
}
Usage: #include font-face(Roboto-Regular, '../../assets/fonts/Roboto-Regular');
This is a create-react-app. I'm using sass along with my component.
See here for folder structure as the compiled .css sits within the component folder.
Try #include font-face(Roboto-Regular, '../assets/fonts/Roboto-Regular');
as 'assets' is sibling of 'components' folder and generated 'compiled.css' is inside 'components' folder.
I'm using the following line in scss:
#import url(https://fonts.googleapis.com/css?family=Montserrat:300,700);
Which gets compiled to css without errors to... exactly the same:
#import url(https://fonts.googleapis.com/css?family=Montserrat:300,700);
But it should get compiled to:
/* vietnamese */
#font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 300;
etc...
I'm using gulp sass to compile my scss, which is based on libsass. It says here that my syntax is correct. Why isn't this working?
This is in fact expected behaviour. Quoting the Sass docs:
#import takes a filename to import. By default, it looks for a Sass
file to import directly, but there are a few circumstances under which
it will compile to a CSS #import rule:
If the file’s extension is .css.
If the filename begins with http://.
If the filename is a url().
If the #import has any media queries.
In other words: Sass does not integrate the css from google fonts directly into your css file. Instead, at runtime, the css import directive will resolve the link. Google responds differently depending on your browser by the way.
I am using a web-font that is declared with #font-face in an external css file. The font service is setup such that I source the external css file and then just use the font in my css. I cannot source the font file itself in my own #font-face definition.
Every time I use the web-font on my site, I add the same two style definitions to it. So, my font use always looks something like this:
h2{
font-family: 'Knockout 26 A';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Adding the antialiasing and grayscale EVERY TIME I use the font seems unnecessarily redundant. Is there a way for me to extend the #font-face declaration from the external file in my own css?
Thanks!
It's not possible to extend a #font-face declaration. According to the current W3C recommendation for fonts (3 Oct 2013) #font-face requires the font-family and src descriptors or the declaration is invalid. Additionally, the descriptors are limited to:
font-family
src
unicode-range
font-variant
font-feature-settings
font-stretch
font-weight
font-style
so you wouldn't be able to use webkit-font-smoothing or moz-osx-font-smoothing anyway.
I recommend using a CSS preprocessor like Sass, Less or Stylus to cut down on the verbosity of CSS. But if you can't use those you'll just have to keep writing your CSS declarations as you currently are.
I would recommend using LESS mixins. From lesscss.org:
Mixins are a way of including ("mixing in") a bunch of properties from one rule-set into another rule-set.
So for example you could write:
.knockout{
font-family: 'Knockout 26 A';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
And add the mixin where you want to apply the font:
h2{
.knockout;
}
More on mixins
I actually faced the same kind of issue because the #font-face declaration was made in an external CSS file that I couldn't control.
I also tried to override the #font-face declaration but it does not work.
So the solution in my case was actually to declare the #font-face BEFORE the inclusion of the external CSS file. The browser will then use my #font-face declaration and ignore the one in the external file.