Apologies if the following doesn't make sense,
I'm very curious about one thing, using SCSS & CSS file together in same website. My question is can we actually use SCSS and CSS together?
It is now possible to import CSS files directly into your sass file. The following PR in GitHub solves the issue. The syntax is the same as now - #import "your/path/to/the/file", without an extension after the file name. This will import your file directly.
Related
I developed a ReactJs app that contain multiple components which every one of them have a seperate css file.
But now i need to clean up and have a shared css file that contains the commun styles for all of the components.
I want to have it done the best way.
I would love to have some suggestions.
How about using Sass and then working with mixins?
For this, also use a import statement in css files, or you can import all css files into index.jsx file
im import in scss #import "./libs/bootstrap-select.css";
after build given #import url(./libs/bootstrap-select.css);
i need css code in file
if import in scss #import "./libs/bootstrap-select"; norm, but
DEPRECATION WARNING on line 1, column 8 of /libsass/test.scss:
Including .css files with #import is non-standard behaviour which will be removed in future versions of LibSass.
Use a custom importer to maintain this behaviour. Check your implementations documentation on how to create a custom importer.
The latest implementation of LibSass is warning us about an upcoming change in an effort to stick to the sass standards and they primarily say that you should direct the sass/scss code to "load" your standard css file instead of importing it inline to form part of a unique css file, it won't work that way anymore, of course it is just a warning for now but in a near future they will remove that functionality, called by them "non-standard behavior" :D so I invite you to read this thread:
Including .css files with #import is non-standard behaviour which will be removed in future versions of LibSass. (GitHub issue #2362)
I just figured out a handy workaround for this problem.
Simply rename your .css file to a .scss file and import that instead, making sure to update your import statement to reference the file with the new .scss extension.
The warning goes away :)
wrap it in an url()
e.g.
#import url("{file Path here}");
I had the same problem, but only needed the .css file on one page. My solution was, instead of importing it in my .scss, to copy the .css file from my resources directory to the public directory with Gulp. Then, on the page which needed the .css code I imported it with:
<link href="path + file.css" rel="stylesheet" type="text/css">
Import works for *.scss the same way as for *.css files - just omit the extension:
#import "path/to/file";
This will import file.css
If this does not work, change your extention from the .css file to .scss and import it #import "yourfile";
While converting from scss file to css file how to avoid conversion of any particular scss file into css?
I have 20 scss file which eventually convert to css which make css file very large. I am trying to convert only few file to css and want to avoid other.
This question may seems directly asking for solution but i have searching answer for this quite long. but found most of the doc unrelated.
Please give suggestion or direction to solve this issue.
Add an underscore - to the start of the filename. From the official Sass documentation:
If you have a SCSS or Sass file that you want to import but don't want to compile to a CSS file, you can add an underscore to the beginning of the filename. This will tell Sass not to compile it to a normal CSS file. You can then import these files without using the underscore.
I can't confirm that this syntax is best practice. I would like to reference an external Sass file and have it prepend it to my final CSS file, this way my Sass sheet looks more clean, and I'm only still only making one HTTP request.
For example, take the "normalize" code and put it into a .sass file, then in my sass sheets simply refer to it:
#import src/normalize
#import src/droidSans
rest of code here.....
It works fine so far, but I can't find anything concrete if I'm headed in the right direction. Also I am just making static templates for the time being... not using Rails at the moment.
I have been playing around with Sass for a few hours and I love it!!!
In order to prevent your partial from being converted into its own css file, prefix the filename with an underscore, _normalize.scss. Then you can import it the way you've indicated you're doing already:
#import "normalize";
Or import many files at once:
#import "normalize", "droidSans";
Or import from a relative directory:
#import "folder/file"
Note the use of double-quotes and semi-colon; I'm using the SCSS syntax which is a later development to the SASS word. While both styles are valid, you may find yourself preferring one over the other depending on what other languages you dabble in.
Further reading can be found under Directives/Partials in the documentation.
This question already has answers here:
Import regular CSS file in SCSS file?
(15 answers)
Closed 7 years ago.
I can use Sass to compile multiple .SCSS or .SASS input files into a single .CSS output file using #import as described here.
If I use #import to include normal .CSS files, they are not merged. The output .CSS file still contains the #import directives. That makes sense.
But is there a way I can override this behavior, perhaps a command-line switch to the Sass compiler? In other words, can I tell Sass to attempt to forcibly merge #import "foo.css"; just as if it were a .SCSS file?
I'm using a third-party library (Google Closure Library) with many .CSS files. I'm only using a few of these in my project. I'd rather avoid manual solutions such as renaming all these files as .SCSS (although this seems to work) or copying and pasting their contents into my .SCSS file (also works). And I don't want to serve them all to be imported on the client-side. I'd really just like Sass to include the few .CSS files that I use 'as is' and produce a single output stylesheet. Possible? Are there any other tools I should look at?
every CSS file is a valid SCSS too.. so if you change the files you need "invisibly" imported or merged to _filename.scss then #import from the main scss file using #import "filename"; (extension optional) it should compile to one big CSS with no #import statements inside it
edited to add: sorry just saw your edit after a browser crash.. and see it's not what you're looking for, I don't know of another way
I haven't found a way to do this in Sass.
My workaround is to import third part libraries directly from their URLs. Of course this only works for CSS libraries that are served via URLs. It's still importing multiple files but at least I don't have to rename files and otherwise manage a modified copy of the vendor's CSS library.
Example:
// ORIGINAL: locally managed, modified copy (bad), no #import in output (good)
#import 'my_modified_copy/closure/goog/css/common.scss';
// WORKAROUND: vendor-managed (good): #import in output (bad but acceptable)
#import 'http://closure-library.googlecode.com/svn/trunk/closure/goog/css/tab.css';
Before release, I'll probably add a script to pull a current version from the vendor and rename all .css files as .scss files. But for now, the above workaround is acceptable for development.
This can be done server-side and save you a bit of hassle if that's an option. Since you're just merging the files together and since it's just CSS there shouldn't be any conflicts in the information that should harm your site. Also, this way gives you flexibility to make updates to the CSS as frameworks are improved.
Ruby is not my language of choice but still very viable to do everything needed here. There is a tool out there written in Ruby that will do this for you with CSS as well as JS files. Take a look at this blog post to get the rundown:
http://cjohansen.no/en/ruby/juicer_a_css_and_javascript_packaging_tool
I hope that this is helpful, and please let me know if you need anything else on this one.