I am trying to recompile bootstrap-grid.css from its SASS files which are in .scss format.
These .scss files are the ones provided here under "Source files".
Current bootstrap version is v4.13
Right now, I am performing the following;
sass bootstrap-grid.scss bootstrap-grid.css
However, when I compare the bootstrap-grid.css that I have manually created with the bootstrap-grid.css that is readily downloadable, the results are different.
The Bootstrap generated version uses Autoprefixer which will add the vendor prefixes like -ms- in the CSS.
Related
I've just started learning a bit about Bootstrap and used npm to install Bootstrap. I noticed under node_modules that there are css files and scss files under Bootstrap. What I know of scss so far is that it's an advanced version of css, so I was wondering what the difference between the css Bootstrap files and the scss Bootstrap files were. Do they contain different things?
I believe what is ultimately rendered to the browser should be identical out of the box. The difference is that to serve the SCSS to the browser you have to have some build process in your development workflow that outputs the SCSS to CSS before serving it. There are, however, some benefits to using the SCSS files in your project, such as easier customization and access to mixins and helper utilities.
While webpack seems to support a wide variety of detailed configuration options, I only want to accomplish the simple task of taking a single css source file located at project/frontend/static/css/style.css and outputting a minified version of that css file to project/frontend/static/css/style.min.css. I can't seem to find anything in the documentation of webpack that discusses this, as I am not importing my CSS from JS, just linking it in the HTML head the old fashioned way, so all I want to output is a plain CSS file, just minified.
With webpack you may like to use mini-css-extract-plugin
npm install --save-dev mini-css-extract-plugin
This plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS. It supports On-Demand-Loading of CSS and SourceMaps.
It builds on top of a new webpack v4 feature (module types) and requires webpack 4 to work.
Please look at the documentation for more info
https://webpack.js.org/plugins/mini-css-extract-plugin/
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've done everything said here and here.
I've changed the file extension to .sass, but my browser doesn't load the styles. Did I miss something?
Sass is a CSS pre-processor, and it seems you're using it without understanding it. Web browsers can't understand SASS code, and they won't. You need to "ask" Sass to generate the CSS browsers will use.
When Ruby and Sass are are installed, you need to:
Have a .sass file with your SASS code
Run the command sass input.sass:output.css (with some options if you want) to compile the SASS code and get a generated CSS code
Link your generated CSS file in your HTML