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.
Related
Im new to SCSS and im trying to load a local font to my SCSS file.
This works perfectly fine in a CSS file but in a SCSS file it does not give anything, not even an error:
#font-face {
font-family: "Cairo";
font-weight: 400;
font-style: normal;
src: url(./assets/Fonts/Cairo/CairoBlock-Regular.ttf);
}
The css and scss files are both located in the same directory so the path should be same. What am I doing wrong?
If you want to have your fonts loaded properly, you need to have them linked to your page somehow at some point. Hence why putting your SCSS files into the css property is probably the way to go.
nuxt.config.js
export default {
// Global CSS: https://go.nuxtjs.dev/config-css
css: ['put-your-files-here']
}
Otherwise, here is how to load some fonts properly with Nuxt.
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 have a wordpress theme that within one of its CSS files uses the #import function to bring google fonts I would like to replace it in a more optimal way and that fulfills the same functions ....
I leave some code to see if you can help me.
#import url (https://fonts.googleapis.com/css?family=Lato:300,400,700,900);
#import url (https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);
.font_weight300 {font-weight: 300! important}
.font_weight400 {font-weight: 400! important}
I had thought of doing something like that
<link href = "https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel = "stylesheet">
but that code seems to me that it goes more in an html file for example, but this code with #import goes in a .css file so that's where my doubt goes.
how to best code for css file.
this is the right way to add a font to your project import is for importing a css file if you have the font locally you can put the address in src
see more about font-face on Mozilla Developers Network (MDN)
#font-face {
font-family: "CustomFont";
src: url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700");
}
and also for using important on a css property you should do this
.font_weight400 {font-weight: 400 !important}
My project contains the following :
A balloon JS widget with a hand-coded SCSS file common/balloon/luciad-balloon.scss :
...
.lcdClose {
...
background-image: url("close-icon-selected.png");
}
.lcdClose:hover {
...
background-image: url("close-icon.png");
}
An icon font with a generated CSS file resources/font/luciad/style.css :
#font-face {
font-family: 'LuciadRIA';
src:
url('fonts/LuciadRIA.ttf?25o3wd') format('truetype'),
url('fonts/LuciadRIA.woff?25o3wd') format('woff'),
url('fonts/LuciadRIA.svg?25o3wd#LuciadRIA') format('svg');
font-weight: normal;
font-style: normal;
}
...
I'm now creating a theme file template/css/sample-single.scss. This theme includes several components, including the two components I mentioned.
Unfortunatelty, I'm not able to do this :
#import "../../resources/font/luciad/style";
#import "../../common/balloon/luciad-balloon";
Considering a CSS import resolves the URL files relative to the file they are found in and SCSS does not adjust the URL after embedding it into sample-single.scss, the URL is still relative to the imported file and thus incorrect. This behavior is confusing, because I would expect SCSS imports to behave the same as CSS imports in this regard.
I could replace #import "../../resources/font/luciad/style" with #import "../../resources/font/luciad/style.css", considering this is a css file. Because the file is now referenced as an external file instead of embedded, this solves the issue for that particular file. However, I'd rather avoid external dependencies and prefer to embed everything in my sample-single.css.
And for #import "../../common/balloon/luciad-balloon", I do not have that option. Considering this is an SCSS file, I can not use this as an external reference. I suppose I could fix this issue by using absolute paths, but this reduces the reusability of this component. It prohibits using this component across different projects with different folder structures or server configs.
Is there a way I can include common/balloon/luciad-balloon.scss & resources/font/luciad/style.css into template/css/sample-single.scss without having to rewrite the URLs in their property values to absolute paths?
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;