How can I automatically convert (compile) ".scss" code to standard CSS using GULP? Right now, I have to run the terminal command every time I want to compile, but I don't want having to re-enter the command every time.
Just use
sass --watch app/sass:public/stylesheets
this where:
app/sass is location of scss files and public/stylesheets location where you want to have css. It will automatically convert scss to css after each save of the sass files.
More details here: http://sass-lang.com/guide
Related
Can't find out the way to make source map for css. Can anybody give a hint?
So, there are a few ways to generate fileName.css.map or fileName.scss.map or anything you want.
First create a file optionalName.css.
1) Install sass: npm install -g sass.
The pattern looks like this: sass input.css output.css.
Then go to your terminal and type sass optionalName.css optionalName.css.
Sometimes you need to specify path to your file like:
sass src/css/example.css src/css/example.css
And you see optionalName.css.map file is generated in your folder.
You can also convert scss to css by running sass optionalName.scss:optionalName.css.
2) Go to VS Code and install Live Sass Compiler extension. When it's installed you'll see a Watch Sass button in the blue bar below. Just open a SCSS file you need, say, styles.scss, and press the Watch Sass button. Right after that all necessary files are generated in your folder:
styles.css
styles.css.map
styles.scss
Most compilers for SASS/LESS will make a sourceMap for you while compiling your code. If they didn't it's probably a setting.
You can read some more here https://cssdeck.com/blog/how-to-create-css-map-file/
Forgive me if this is naive, but I am used to using just CSS. Sass seems pretty cool and I'm down to learn it, but for some reason many of the Javascript or jQuery plugins I'm downloading have both a CSS and SCSS file associated with the stylesheet. I don't want to have to be editing two files to get results on the page, why would both be there when they seem like copies except for a few key areas? See image below, seems like there is an extra CSS file per SCSS. Is that because some browsers cannot compile the SCSS?
CSS and SCSS in same directory
Is that because some browsers cannot compile the SCSS?
Yes. There is a command line utility which converts the .scss to .css. Probably the .map file is a reverse-conversion aid for browser inspectors that understand it.
Whenever I have generated files (like a .min.js, or in your case .css that came from a .scss), I make sure the appropriate command-line conversion tool is executed automatically as part of my build script.
I'm not sure what kind of build system you are using, but there is some command line tool for conversion that will need to be executed.
You are not expected to manually update both formats. SCSS to CSS command-line converters existed long before any browser (is there one yet?) started to support SCSS.
No browser (at least major) is able to directly use SASS (or LESS). You always need to compile scss files to css, before you could use them.
You can compile css by build tools like grunt or gulp. You can even configure it to watch updates in scss files and recompile css if anything was changed.
You could have following types of files after build:
style.scss <- this is source file
style.css <- this is css file created from SASS file
style.min.css <- this is css file minified
style.css.map <- this is source map of scss file
Here you can read why css files are minified. Here you can read what are source maps for.
I'm using SASS and Netbeans for web development. Is it possible to create the default and minified CSS file at once?
Example: I've one SASS file like style.scss and want as fast as possible two compiled files named style.css and style.min.css
What can I do in Netbeans to get both files at once when I save or precompile my SASS file? Is there any solution or does it need every time a manual step to add compress on the command line, etc.?
Thanks!
A person directly edited the css output file. Am I in trouble here? He made edits all throughout the file and if I'm understanding correctly, my changes will overwrite his when I recompile. Is there anyway to keep everything but still work in my scss files? Could I take the entire css file and try the reverse css to scss path to get everything together?
One option would be to save the edited CSS file and then compare it to your compiled CSS file, allowing you to determine what the changes are and add them to your Sass file.
Save the edited CSS file as FileA.css.
Recompile your Sass file into FileB.css
Load files FileA.css and FileB.css into a diff viewer, something like DiffChecker or a desktop app like Kaleidoscope.
Determine the changes and add the appropriate Sass to your original .sass file.
I'm making the move from Coda to PHPStorm. I like it, however I need some help with setting up a custom CSS workflow.
Currently I have a file watcher converting my .scss into .css on every save. However I'm not sure how to go about also getting it to set up auto vendor prefixing and CSS compression. I'd like it to be so that:
I save the .scss
It writes to the .css
The .css gets run through something like -prefix-free
The .css then undergoes compression
Can anyone walk me through this?
The best way would be to create a shell/batch script that would do all required steps (file name it will receive as a parameter) and use that script in File Watcher instead of your current SCSS compiler.
Instead of shell/batch script you can write a grunt (or similar automation tool) task and call it in file watcher.
Another option is to create separate file watchers for each step, place them in correct order (from top to bottom). They will be executed one after another.
Problem is -- the "Immediate file synchronization" option must be checked in each of such file watchers .. otherwise only first one will be fired. Other will be fired as well .. but on second invocation only.
The negative side of that option is that file watcher will be executed within 1 second after you type any character -- it will not wait until you click "Save".
Sass is already pretty good at compression. Just execute your Sass compilation with a --style flag liked compressed. Ex:
sass --watch [your files] --style compressed
If you must handle the prefixing through PHPStorm, you'll need to look into their build tool Phing: http://www.jetbrains.com/phpstorm/webhelp/phing-build-tool-window.html
However, Compass (http://compass-style.org/install/) (a Sass add-on) has a large ecosystem of add-ons, one of which is AutoPrefixer: https://github.com/ai/autoprefixer#compass - a post-processor which adds the vendor-specific prefixes to CSS.