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.
Related
I'm starting to learn by my own and I tried for the first time to use sass in order to get more clean my code, having everything on sections. So the problem is when I try to give some styles to the navbar, I don't know why when I write code it doesn't apply. Maybe is because I'm not linking correctly or just using bad the sass compiler.
The best option to help me is take a look into my repository where I started to build this project to practice. I really hope could help me because I want to create differents sections like navbar, body, articles, footer using sass and give them styles.
https://github.com/Shylex96/test-portfolio
Edit: After a long search about this issue I see there is a problem with "use" and I have to change rules or something like that, but still don't know.
Replace #use with #import in your scss files.
Try updating your \util\style.scss like below:
#import '../globals/';
#import '../components/';
Save and compile them then copy the resulting css files to dist folder if they weren't copied automatically.
Update the stylesheet link in your index.html file to:
<link rel="stylesheet" type="text/css" href="dist/style.css">
It should be "dist/style.css" not "/dist/style.css"
FINALLY!! I solved it and I'm going to commit what helps me if someone have same issues..
I had to reinstall node.js, install gulp, and change "about_Execution_Policies" from windows.. when I did, I could finally install gulp correctly and then I install again sass. Of course, I just converted all the changes that people told me about into the first ones I had.
I created a new file called gulpfie.js and two more files: .gitignore and .gitattributes
So, If someone need it, can check the changes here: https://github.com/Shylex96/test-portfolio
When I was studying Multimedia I got a free copy of PhpStorm.
Using PhpStorm I managed to some techincal magic using Ruby(I can't exactly remember how it worked) to write code in SCSS and phpstorm would automatically create a new file and compile all my code to usable CSS code.
I believe I remember something about a 'filewatcher' but im not sure.
Is there any way to do the same in Brackets?
maybe an addon to Brackets or something?
Thanks
I think you're talking about compilers that translate SCSS into CSS (and their integration in PhpStorm).
So maybe you will be interested in Brackets-SASS Plugin.
I'm just thinking if there is any way to recover some *.scss files if we have only css and its map. Ex.: someday someone removed your scss files :) Is it possible? I know that map helps us to debug our css code and show where it is located in scss. It's a lot of information. But is it enought? Any way to do this?
Picture above shows that example: sass folder doesn't exist. But browser know what and where is from source map.
I've used this site before to convert css output back to scss formatting. http://css2sass.herokuapp.com/ Not perfect but its a start.
I am using a wordpress theme and it has both style.css and style.scss. I want to make changes in the styling and I was wondering which file I need to edit? Both, style.css or style.scss?
Thanks in advance.
Information Sass
CSS on its own can be fun, but stylesheets are getting larger, more
complex, and harder to maintain. This is where a preprocessor can
help. Sass lets you use features that don't exist in CSS yet like
variables, nesting, mixins, inheritance and other nifty goodies that
make writing CSS fun again.
Once you start tinkering with Sass, it will take your preprocessed
Sass file and save it out as a normal CSS file that you can use in
your web site.
Answer
You need to edit the style.scss and then generate the style.css.
Once you started using sass oder less you'll never go back to css or regret it!
Learn how to Sass here.
An here is Software to generate the scss/less File.
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