I'm working in very big project and using GruntJS.
For compile sass files i'm using Gruntjs plugins SCSS and watch;
But it is very slow, for one run want 6-7 sec.
well the task is not slow, you need see how many files you are compiling.
e.g.: if you are compiling vendor css like boostrap font-awesome with you sass files of course will make that slow.
I suggest to you insert boostrap and fontawesome calls in your html and remove from your sass compiling
try use this task:
time-grunt
I hope that helped you somehow.
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.
I am new to sass/scss and want to know how I can use sass file in my HTML project?
Do I have to first compile it into CSS with command line or anything else that compiles scss/sass runtime into css file at a time when webpage loads into browser?
So any help?
There are many options to create a Project working with SASS, but the most common is using Compass, I see you're new to it, I strongly recommend you read a Tutorial about Compass, after understanding this you should look others options to use the same SASS like working with gulp, gulp-sass, node-sass, browser-sync, and many other options to use the same Tool.
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 Less files with Bootstrap for my application and also using Less for client-side CSS compiling. I'm wondering how I can minify the compiled CSS output with Less.
I think I need to declare something in between above lines.
Most popular tools for task automation are Grunt and Gulp. Both can assist you in your minification.
But to use your less files you have to convert them to .css.
You can use https://www.npmjs.com/package/grunt-contrib-less to convert your less to css and then minify then using https://www.npmjs.com/package/grunt-contrib-cssmin.
I'm using sass to compile scss to css.
After each save it take a bout 15-20 seconds until it compile to scss file to css so I need to refresh few times to see the expected results. Is there a way to tell Sass to check for changes more often ?
This is the command I use:
sass --watch sass --watch app/scss/main/:app/css/
I am using Sass 3.3.8 (Maptastic Maple)
Please note that the scss are very short, I just started the project.
There is a performance issue in Sass 3.3. See the related issue on Github.
Sass is ruby based and therefore quite slow, nothing you can do about that. With that said, 15-20 seconds sounds way too slow.
You could try libsass instead, which is much faster.