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/
Related
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 :)
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.
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 have Codekit installed.With Codekit I tell the scss files to compress and compile into css inside of the ../css folder.
css
style.css
sass
style.css
style.scss
Something somewhere is telling that scss file to also export out a css file into my sass folder.
Codekit is setup correctly:
Output: (there should be no css files here)
Anyone else run into this issue?
What I've found out so far:
The problem does not seem to have anything to do with Codekit, cause the annoying .css file will get generated inside of my SASS folder even with Codekit uninstalled.
I use to have LiveReload and LiveStyle installed, but I've removed both of those items.
I started a brand new project in a different folder, so far have not been able to reproduce issue, however still experience bug with my real project.
PyCharm seems to be generating the css files! Looking into how to turn that off now Thank to Katie
Since it's happening without Codekit as a factor, you may have something odd in your config.rb file. In the root directory of your project (probably the directory that contains the css and sass directories), open the file config.rb in your text editor (Sublime Text). Look for these lines:
css_dir = something
sass_dir = something
These lines tell Sass where to put the resulting files. It sounds like you want it like this:
css_dir = "css"
sass_dir = "sass"
Rename style.scss to _style.scss it will solve your problem. smae thing is done with normalize.scss and reset.scss you can see.
I jumped into SASS tonight and I'm using Sublime Text 2 with SASS Build and SublimeOnSaveBuild. After much searching, I still cannot find how to specify a different output directory. I basically have a CSS/ directory and a SCSS/ directory which contains all of my SASS files. I want to output to ../CSS. I think it involves modifying the Package Setting file in Sublime. Here is the default preferences file:
{
"filename_filter": "\.(css|js|sass|less|scss)$",
"build_on_save": 1
}
I believe the "build" or "output" path goes there but I'm just not sure. Thanks in advance.
The answer is to change the settings for SASS Build, rather than SublimeOnSaveBuild. SASS Build creates a "Build System" for SASS and SASS Minified. You can go to Preferences -> Browse Packages, open the SASS Build folder, and then edit the two files ending with -build.
"cmd": ["sass", "--update", "$file:${file_path}/${file_base_name}.css", "--stop-on-error", "--no-cache"],
You can edit the file path there (there isn't a way to do per project yet it seems):
"cmd": ["sass", "--update", "$file:${file_path}/../css/${file_base_name}.css", "--stop-on-error", "--no-cache"],
Now, how to get them to stop building partials...that's the separate issue that I'm currently trying to find the best way to resolve. EDIT: Stopped it from building partials. Posted a blog about it here.
Perhaps this does not directly answer your question, but I'd like to try.
In my SASS installation (with Compass, however), I have config.rb in my project. In there you can actually specify where the compiled CSS file go.
...
css_dir = "css"
...
If you are not using Compass, my humble suggestion is to have a look at it. It is sort of an extension to SASS (much like jQuery to javascript)
Install 'compass'. Create your next project in the terminal using compass (this is all documented) and the config.rb file will have the appropriate folders/directories and your sass/compass compiler will do everything automatically. You can either use compass watch in the terminal or a programme like LiveReload to do the work for you. In fact, use LiveReload. Honestly, you won't regret it!!!