I currently have a web application which is using SCSS, symphony, and doctrine amongst other libraries. It's well setup and heavily structured.
We are currently attempting to use Bootstrap.css to style it visually, however it's become quite an issue as we began trying to use SASS/SCSS #import function so we could #extend bootstraps classes. However when attempting to do so, it became problematic.
#import url('/bundles/iccsrpit/sass/css/_bootstrap.scss');
The above somewhat works (the code is never actually included in the css file when looking at Firebug. I can click on the path, and it brings me to the file.
#import '/bundles/iccsrpit/sass/css/_bootstrap.scss';
Causes a complete break of the CSS file, and I'm not sure why I can't access the file in this manner.
If anyone can offer a solution to this problem, please help!
Thank you,
iRed
Related
In Wordpress, my main style.css file imports various sub-files, such as content.css, archive.css, product.css and so on:
#import url("content.css");
#import url("archive.css");
#import url("product.css");
Without success have I have been looking for a way - through browser console or online resource - to download "in a shot" a single CSS containing style.css plus all related #import files, without having to copy and paste all of them in a new file.
Do you know if there is a solution for this? Thank you.
You could use a CSS pre-processor such as LESS or Sass (SCSS), they come with many other features as well.
Depending on the editor you already use you might be able so simply install a package (like Easy LESS for Visual Studio Code), rename your style.css to style.less and be done.
Choosing and switching to a CSS pre-processor might however, depending on your circumstances, environment and experience, not be easy or straightforward at all.
I'd suggest just to copy paste them your css files into one. Using a tool for a simple task as this one can only result in bugs.
I have multiple SCSS files that I want to import into one main SCSS file. I want ALL of the contents of that file to be imported, basically copying the entire document into the other one. Currently, I am using #import, which is exactly what I need. But now it has been announced that it will be removed from SCSS, and I'm afraid that #use cannot replicate this functionality that I need. With #use, I can only import selected variables, classes etc., but I want the entire file.
Two possible solutions (that I don't want to go for):
A) Writing everything in the same file. But that would become quite messy. I have one template SCSS file with variables and utility classes (a lot of them), and 3 other files for custom code (so the CSS of a site can be changed by multiple people at the same time, having only one file would limit it to one person at a time)
B) Loading multiple stylesheets on the site. That would be the better option, but that would cause a lot of unnecessary requests on the server.
Any ideas? I'm using SCSS in Wordpress. Will the #import rule be unusable once it's been removed from the language? What if I didn't update the Plugin that compiles the SCSS? It's frustrating because the current #import rule does exactly what I need...
Thank you!
The question is more or less resolved. I was trying to migrate from #import to #use in an environment that does not support the #use rule at all. As I said, I'm using a Wordpress plugin to compile. #use is only available in Dart Sass and upon using it in my setup, the compiler would throw errors, as it is based on phpsass, which does not have #use or #forward and still uses #import. Which make everything a lot easier!
I have a question about SCSS. I am new at this, so if I'm not providing enough information please let me know so that I can update my question.
I am currently working on a Wordpress installation that has an SCSS directory, with all of the various .scss files.
I tried editing the files directly, and came across a lot of issues. I did some research, and it looks like the scss needs to be compiled into css so that the site can read it. Issue is, no matter how I try, it just simply doesn't work. The site styles break, and the updated code won't work. I know I can change the css directly, but I understand that if the scss is recompiled it will remove my direct css changes.
Any help would be so appreciated.
If you don't have any way to compile the SASS to CSS then an easy way to translate your code is by using sassmeister.
I'm moving from Grunt to Gulp and noticed that gulp-sass does not include the contents of files referenced by #import "reset.css" statements. Instead, it normalizes the url reference, as #import url(reset.css). My intention is to have a single CSS reference on my index.html, that would be the concatenation of my CSS dependencies.
It's a simple read-file-and-output-contents operation, but I bet this is already implemented and I just don't know where to find it -- I'm still new on this ecosystem and would not like to spend time reinventing the wheel.
EDIT: the selected answer for this related question uses gulp-minify-css, instead of gulp-sass. Exchanging them could be a short-term solution, but I'd prefer to avoid my new build system to rely on unstable plugins. Moreover, I actually have plans to use scss, so I'd be back to having to deal with gulp-sass again. Thanks for the suggestion, though.
#import should actually include the contents of the file, not make a reference to it. Sounds like maybe the transpiling of the SCSS to CSS isn't working properly.
If I have a CSS file that is included into the page like
<link rel="stylesheet" type="text/css" href="all.css">
And then that file has...
#import "shCore.scss";
#import "shThemeDjango.scss";
Does this do 1 HTTP request or 3?
Is there a benefit of importing multiple files vs linking to all of them in the main file?
(I know the ideal solution is to combine all and minify)
I would recommend not using #import. This stops the browser from downloading files in parallel as it has to parse the first css file. Then go retrieve the import css files and import them.
google on #import
As you mentioned combining and minifying your css is the best option. Using a tool like minify allows you to keep your stylesheets separate and clean but serve them combined and minified.
This would still mean three HTTP-request, and there it most likely make the load process even slower, as Jros mention.
Instead I suggest that you minify all your CSS into one file, to make as few HTTP-requests as possible, and to decrease the amount of data that needs to be transferred.
Here's an example of a CSS minifying tool you can use, if you don't want to do it server-side.
I think, given the context of the question, there has been some misleading advice. Sure, "vanilla" CSS #import will make a HTTP request. But the OP seems to be using a pre-processor.
Pre-processors, such as; SASS or LESS, work by compiling down your code, often into a singular css file. Meaning an #import has already been handled and included for you. You just reference the end-point stylesheet.
So no. Knock yourself out, when using a pre-processor. It's a great way to organise your code.