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!
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 :)
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 just starting to play with SASS in Visual Studio. The question I have is that if I put my .scss file in the theme folder, the compiled CSS file will automatically be added to the site. The problem comes in that it generates a .css AND a .min.css file and BOTH are being applied to pages that use the theme.
Is there a way to have VS only add the .min.css automatically? I'd love to keep them in the theme folder and let VS handle linking everything automatically, but I don't want the stylesheet to be added twice. Or is there something else that is considered better/best practice that I should be doing with SASS files?
Are you using Web Essentials plugin to compile SASS? If yes, in its options, you can change it so when it compiles it can output min, css or either.
example for LESS (same for SASS):
Plus, even if VS is producing min and css files, it wouldn't make much difference since bundling will only use one file. You can just exclude certain files from the solution, and they will be ignored.
You could also look at build tools such as Gulp or Grunt to compile sass - they have much more options that you can apply.
I am planning on dividing up my LESS CSS into multiple files to modularize my CSS and make it easier to manage and maintain. Ultimately I will be using #import to import all of my modular CSS files into one file that will get enqueued in WordPress.
Is #import a bad idea for performance?
Yes, using multiple imports will incurr equivalent number of file requests the browser has to make.
As long as you compile the LESS source into a CSS file and include that CSS file as the stylesheet for your site, performance will not be an issue.
For example when you make a Wordpress theme you can make a folder for your CSS and then compile it using for example simpLESS (if you are on Windows)
Sample template directory structure:
-themes/
-your-theme/
-less/
-main.less
-import.less
-etc.
-style.css <- this is the target file you would compile into
-index.php
-etc.
You can setup the target file to compile into easily. Also, simpLESS will keep the first top comment in the resulting file so that you can put your theme information in it.
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.