I have plenty of scss file in my MVC project.All of them imported to a single scss file then compile to a MainStyle.css. Inspect element just show css line and css file name.
Now when I want to change any style its not possible to find that scss file name in inspect element.
In addition show original sources in explorer not work.
You can enable source mapping when compiling from scss to css. You can check this article on that: https://www.sitepoint.com/using-source-maps-debug-sass-chrome/
Quick fix: You can go to the css line and copy the classname. Do a global search of wherever the classname is used. You should see the scss file along with what you're looking for
Related
I'm trying to make my SCSS files more modular by splitting it into individual partial files. It's all well until suddenly I have a bunch of .css and .css.map files in my partials directory because I've, naturally, saved all of them, and the Sass watcher dutifully compiled all of them too.
How do I achieve a clean structure like Bootstrap's while not having to manually delete every partial .css files? Ideal scenario is that every time I edit and save the partial files, Sass watcher compiles only the main .scss file.
I'm using VS Code on Mac with a Sass watcher plugin. Is it achievable in this environment?
https://sass-lang.com/guide
A partial is simply a Sass file named with a leading underscore. You
might name it something like _partial.scss. The underscore lets Sass
know that the file is only a partial file and that it should not be
generated into a CSS file. Sass partials are used with the #import
directive. (#import is soon to be deprecated, with a move to #use and #forward instead. https://sass-lang.com/documentation/at-rules/import)
Thanks Arkellys.
Ideally you have a main .scss file, like style.scss for example, and then the other partials exist, like _header.scss for example.
Once you have a partial like that, it's prudent to import it in the main .scss file, at the top of the file. In this case, it would be #import 'header';
Notice that we do not import the underscore...
If you don't have any errors after this, and it's still not compiling then check whether you have properly referenced the compiled css in the head of your html.
While surfing a website, being curious, I want to understand how some of the css is built.
So I open the devtools and inspect a specific element, on the right panels it shows me the css and a link to scss files, but I click on the name of the scss file then it seems to show me an empty file!
Any way to inspect the sass/scss files from a 3rd party website in devtools?
You can view the original SCSS file only if the sourcemap file is included in the site's files and have been uploaded.
Does SASS render to an actual css file of my choosing or a newly generated style sheet?
in the case of an app with many style sheets , the most sensible thing is replace some css at a time and render to a style sheet that loads last -that would override all other style sheets until the updating is done and I would remove css.
The typical Sass workflow is to compile to a main style.css file from a style.scss file where you specify which files it should compile. You can set it to compile to a different file. If you're using the command line you can tell it what to watch and where to output a la
sass --watch input.scss:output.css
sass --watch app/sass:public/stylesheets
http://sass-lang.com/documentation/file.SASS_REFERENCE.html
Most GUIs that handle Sass have simple settings that allow you to do the same for individual files.
It renders into an actual CSS file. All of the SASS is eventually compiled into vanilla CSS
I am using sass with prepros compiler and sublime editor. I need to have each scss file complied with the same file name.
For example:
I currently have-
header.scss
content-top.scss
footer.scss
and they are all compiles into style.css to create one full style sheet.
I wish to have a style folder with
header.css
content-top.css
footer.css
which will be done automatically when saving and compiling like I normally do.
How can I accomplish this?
Thank you
Check this link out.
It states that you can adjust your project structure (in your case CSS folders) in project settings.
If I remember correctly you may have to buy it so that you can compile more than 4 or 5 Sass files, but I may be wrong.
Also check that you aren't "only" importing sass partials because of this:
Any Sass and Scss file (i.e. including partials) imported by another
file are not shown in the files list but they are still watched by Prepros.
The parent file is re-compiled whenever any of the imported files are changed.
I am using YT Framework on Joomla2.5, I want to add new css file fot the template SJ+, but I could not find any documentation for the framework.
I have general understanding that, as the css will be builded every time I install any component or module, so in order to implement our custom css, I need to add my css in a specific file, but I am unable to find where to keep that file and with what name.
I have tried by adding a "custom.css" file in template's css folder.
For any template if you need to add your custome css code you need to first find index.php file in your template directory,
If you found html code in index.php then add your css code to index file using tag. or add
if you do not found html code in index.php file then you need to find component.php file in template root folder.
and follow the same thing as for index.php
After looking deeper into each of the css file I came to solution for loading of custom css for YT Framework templates.
Keep your custom css in a file named "your_css.css" file under the css folder of your template, this is the functionality of the YT frame work that after loading all the css files required by the template, it loads this css file at the end so that all the default and dynamic css will be overloaded with all the stylings you have written in your_css.css file