how to edit .scss file?

Question

Hello all! Thanks to Sololearn, I am employed as a web designer! woot woot.

Anyways, the site im working on used sass i believe, however, in the inspect element of chrome it shows .scss files and folders, but NOWHERE to be found in my directories or the server host. it says grid.scss:12.

I found bootstrap.grid.css and bootstrap.grid.min.css, but when I change any value in vscode and upload those files to the server, it doesnt actuall change anything. its as if, it totally ignores my edits.

I have NO IDEA how to change anything in the .scss

whats weird is i change something in chtome dev elements and it changes it..but when i gind the lines in those 2 files and change it..it doesnt work

Please help, I do not want to do this whole site from scratch!

Answer 1

Mustafa Yıldız , I think we established earlier in the thread that Jason doesn't have access to the upstream SCSS file. I think the best he can do since he has the CSS and HTML files (please correct me if I'm wrong here, Jason) is to edit the HTML file to include a new CSS file, but ensure that the link to the new stylesheet is the one as close to the end of the head of the HTML file as possible (compared to the other stylesheets, of which there is at least a CSS file that was compiled from an SCSS file and a Bootstrap one) to ensure that his new stylesheet stands the best chance of overriding styles from earlier stylsheets.

Answer 2

You don't need to edit scss files if you don't want to. It doesn't affects your site.
It should work if you just edit the css files, but if someone compiles the scss file, your changes made only to the css file will be removed.
Are you sure you upload them to the right directory?
Did you try to clear the cache using shift + f5

Answer 3

But the scss is not the actual source file.
scss files needs to be compiled with sass into css files.
So any changed made into scss files will not be applied before you run the compiler.

Answer 4

Congratulations on the new gig! 😀

Where is the source code? I'm a bit confused as to whether or not you were able to find the .css or .scss files, since you mentioned not being able to find them, then mentioned trying to make changes in them.

Answer 5

I think he means when you use the dev tools in Chrome, you can inspect them (an element) and it will tell you the source code file name (without showing the full source code file). I've seen this on my projects, but I couldn't tell you why this happens as I'm not as much of an expert on how browsers would know.

Answer 6

janning is correct. i can see scss file paths in chrome dev using inspect element. but these file paths are nowhere to be found locally or on server.

i am a one man team who was hired at a business to be their webmaster. ive updated the look quite a bit but these cew little edits are getting on my nerves since they are .scss

Answer 7

Congraduations!
(Sorry, I do not know well about sass or web, so I cannot help you)

Answer 8

You should compile that file and upload the compiled file. Browsers can't process scss files

Answer 9

thank you all for the help i understand the situation alot more now.

Answer 10

thanks!

the .scss i see is in chrome dev tools. i need to change height: auto to not auto uit i dont see any .scss files on the host or local files.

what i found locally was boostrap.grid.css and bootstrap.grid.min.css both of which had the height: auto but changing those did nothing.

Answer 11

That stinks.

Is the job to rewrite existing code or upgrade the look of the site without specifying how that's achieved at the source code level?

Depending on the situation, you may just want to put the direct question to the client to confirm that they don't have the files. Depending on the details of your contract, you can either invoke the client-hasn't-given-me-what-I-need-to-do-what-they-want-how-they-want-it and charge more (and extend deadline) for a full redo, or you can create a new .css that is linked to the HTML file in the head after all the other stylesheets that contains only your overrides.

Just some thoughts. It can be common for clients to not specify in their prior contracts which (source code) files they needed delivered from their developer. Often they just say "Build me a website!" and the developer gives the client the object code. /shrug

Answer 12

What is the build process for the .scss file (specific to the project)? Are you on this by yourself or with a team?

Answer 13

What do you mean you see scss files in chrome?
You cant link scss files directly to the html. Scss files should not even be visible in the inspect mode.

Answer 14

toni, when i edit all tbe css files nothing happens. but when i remove the class tag in html..it loses the styling..so its doing something but refuses to acknowledge my changes in the css it self and i tweaked every css i see.

in the chrome browser i remove height auto and it fixes my problem. but those changes are temporary in the chrome enviornment.

in chrome dev i have ot set to not cache si that isnt the issue..ive tried it in multople browsers as well abd the css changes never stick

its frustrating to say the least. obviously the styles have been source mapped and compiled and i am at a loss how to change anything

Answer 15

a Mixin is like a variable except it has a number of lines of code. The original developer used a mixin which he named “img-fluid” you wont find the mixin in the CSS because the compiler converts the mixin to regular CSS. My guess is you havnt targeted the correct value to edit, which is why you dont see a change.

Answer 16

@mixin img-fluid {
// Part 1: Set a maximum relative to the parent
max-width: 100%;
// Part 2: Override the height to auto, otherwise images will be stretched
// when setting a width and height attribute on the img element.
height:auto;

it says it is in vendor/scss/mixins/_image.scss, but i see it in chrome but not in the host files. all the host files have is vendor/bootstrap and vendor/css

Answer 17

toni i realize that now..since changing the edits in .map.css and .min.css isnt working.

my question is..how do i fix these scss files? do i have to decompile them fix it then recompile? its wuite complicated it seems considering i dont even have any .scss files to decompile or compile. all i have are a few raw .min.css abd .map.css files

Answer 18

thanks for clicking upvote, Jason!

Answer 19

You need to compile it