I'm trying to import a Google Font inside the main.scss file, but following code didn't work:
#import url("//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700");
Is there a way to do that? I looking for this question in stackoverflow, but I don't find a concrete answer...
Can somebody help me?
Instead of using url(), try the below:
#import 'https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700';
The correct syntax for importing Google Fonts into Sass:
#import url('https://fonts.googleapis.com/css2?family=Alegreya + Sans + SC:wght#400;500;800');
Another example from my case, for multiple import:
CSS:
#import url('https://fonts.googleapis.com/css?family=Raleway:100,300,400|Roboto+Condensed:300,700&display=swap');
SCSS:
#import 'https://fonts.googleapis.com/css?family=Raleway:100,300,400|Roboto+Condensed:300,700&display=swap';
Right know, using Gulp and Dart Sass, both work. I prefer the Sass-way, just saying. So, with the new Google Fonts’ syntax:
#import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght#300;400;600;700&display=swap");
or
#import "https://fonts.googleapis.com/css2?family=Open+Sans:wght#300;400;600;700&display=swap";
give the same, exact result compiled from Sass to CSS. Then, if you add one of these in a .scss file, you don’t have to worry at all.
Related
I have downloaded a nice theme from Bootswatch, but I would like to change some colors. So I got the bootswatch.less and variables.less and compiles a merged file using WinLess.
When I do this I get following error:
undefined #gradient > .vertical-three-colors
I have read an issue on github indicating that one should include: bootstrap.import.less
But I cannot find this in the bootstrap distribution.
Hope you can help.
In my case I had the same problem with _bootswatch.scss.
After yo angular with bootstrap-sass just replace all text in main.scss:
#import "bootstrap-sass-official/assets/stylesheets/bootstrap/mixins/_gradients.scss";
#import "bootstrap.css";
#import "_variables.scss";
#import "_bootswatch.scss";
angularsassbootswatchbootstrap-mixins-gradients
The issue is related to Gradient Mixins missing. Easy way to solve is the download latest source code of bootstrap and import
#import "path\bootstrap-3.3.7\bootstrap-3.3.7\less\mixins\gradients.less";
So I would like to get Codekit to minify all my css + less files Upon save.
In the header of my 'style.less' I am trying to import the 'css' file as a less context like:
#import (less) "normalize.css";
#import (less) "file1.css";
#import (less) "file2.css";
#import (less) "file3.css";
body {....
In the hope it will sort of be 'included' then minified on save. I cant seem to get it to work with any combination of #import, saving the css files as less files.
Can it be done?
So my issue was trying to #import font replacement. When looking inside the font replacement file there was an import happening over another site. I believe this is what was causing the miniification to fail...
Hope this helps someone else.
I have the following stack:
Symfony2
Twig with lessphp filter installed.
Twitter Boostrap
In base.css i have:
// base.less
#import '/path/to/bootstrap.less'
#linkColor: 13px;
Variable name is not important at all. It can be any other variable used in bootstrap. It just doesn't get overridden. But if i put the variable into separate .less file and import it in base.less everything works as expected:
// base.less
#import '/path/to/bootstrap.less'
#import '/path/to/variables.less'
and
// variables.less
#linkColor: 13px;
Why does this work and the other not? Looked up for the docs (less/lessphp) but couldn't find anything related to this. (or i didn't know where to look).
Can someone explain why is this happening?
It looks like it's a bug in the lessphp compiler. Take a look at the github issue. Your workaround, to put the variable declaration into another file and also import it works just fine. Thanks by the way ;)
This is happening because you override the variable after it's been used to define all the Bootstrap styles.
I solve this problem this way:
Create my own main.less that imports my own bootstrap.less.
My own bootstrap.less is just the Bootstrap's bootstrap.less file copied over to my own folder with import paths changed accordingly, but with one exception: it imports by own variables.less instead of the Bootstrap's one.
My own variables.less imports the Bootstrap's variables.less and then overrides the ones I need.
I'm using assetic with less filter and storing main less file in app/Resources/...
I'd like to import into that file other less stylesheets from inside bundles.
Everything works fine but the paths are driving me nuts.
My base.less looks more or less like this:
#import 'normalize.less';
#import 'mixins.less';
#import 'header.less';
#import 'footer.less';
#import "../../../../../../src/Acme/FooBundle/Resources/public/less/example.less";
Is there a way to pass 'paths' option to less compiler in symfony2?
EDIT: I've found a issue for my problem on assetic's repo on github:
https://github.com/kriswallsmith/assetic/pull/218
Isn't it possible to store the path in a variable like they say in the less documentation?
#base-url: "http://assets.fnord.com";
background-image: url("#{base-url}/images/bg.png");
This is not exactly what you want but this way you define it only once.
All I need is to do is have a directory with my custom reset sheets and other sass files for imports.
I've been playing around and I can't get compass to read my custom sheets.
1) Where do I put my custom css sheets for import?
2) how do I #import them
(I'm using the sass indentation, but I doubt that makes a difference,)
(I know little about ruby I'm just using it for compass)
Thanks
Look at the #import section in Sass reference.
You can import a Sass file without telling explicitly the file extension:
#import "file"; /*will import file.scss or file.sass. Anyway you could as well use #import "file.scss" or #import "file.sass*/
To import a CSS, provide its extension.
#import "file.css"; /*will import file.css"
There are more ways to differentiate them in the reference, but these are the most used.
You can put your files where you want, but write the path relative to the current directory (the directory which the file from where you are importing is).