I've read this question:
How to Minify CSS with SCSS File Watcher in PhpStorm IDE.
And it was very helpful. But I want to have a normal stylesheet, where I can see the lines in development. And I want a minified stylesheet for the live environment.
Can this be done with 1 file watcher? Because now I have 2, and it creates 2 .map files: style.css.map and style.min.css.map. I don't like that.
I've got it working now. Like #lazyone said, just don't generate a .map for the minified sheet.
This is how you do it:
In arguments field, you add: --no-cache --style compressed --update --sourcemap=none $FileName$:../$FileNameWithoutExtension$.min.css
the sourcemap=none part should do the trick.
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/
I was given some files from another developer and was told to make some changes. Within the file structure, there's a .css file and a .css.map file.
I'm relatively new to SASS, but my understanding is that you create a .scss file and use command line: sass --watch style.scss:style.css, which generates the .css.map file and compiles the sass into css.
Is there a way to work backwards with just the .css file and the .css.map file to generate the .scss files, or did the other dev just maybe forget to give me these files?
The CSS is the output of Sass and you cannot generate the original Sass files from the CSS.
As stated by thesassway, source maps (.css.map) seek to bridge the gap between higher-level languages like CoffeeScript and Sass and the lower-level languages they compile down to (JavaScript and CSS). Source maps allow you to see the original source (the CoffeeScript or Sass) instead of the compiled JavaScript or CSS while debugging.
(TL;DR, they are for debugging)
If you were to edit the CSS output files without using SASS to compile them, the next person who writes in the Sass files and compiles them will overwrite your work.
I'm not sure why the other dev will want you to make changes directly to the CSS output files, but asking them for guidance on what that are expecting you to do won't hurt anyone. :)
Yes you can. Using Chrome, inspect something on the page, go to "Sources" tab, go to "Page" tab, expand down to the SCSS files generated from the CSS Map (basically the original SCSS files).
Example below is using WordPress and I was in your situation where all I had was the CSS Map file. Just copy and/or save the files one by one into the appropriate folder. Now you have the SCSS files :)
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!
I am building a set of Sass stylesheets using Compass.
I also have a minified copy of bootstrap.css that I would like to include in my deployed site. However, I'm not sure where to keep it or what to do with it.
If I rename it to bootstrap.scss then Compass will pick it up and compile it. This takes a few seconds and I really don't need to add to the build time.
If I leave it named as bootstrap.css then it gets ignored.
Ideally there would be a flag, or some way of telling compass to simply copy that file across rather than attempt to compile it. Does that exist?
If your CSS file should not be compiled into your finished CSS file, then it should be placed wherever your compiled CSS files go. However, this is generally not the desired behavior: a vanilla CSS #import generates extra HTTP requests.
There isn't really a down side to having your CSS file compiled by Sass, as the compilation of that file should be cached (unless you're deleting your .sass-cache files?). Sass should only recompile a file if it or something it depends on changes.