Is there an easier way to compile my sass files with sourcemap enabled rather than the following command?
sass --compass --sourcemap --style compact --watch sass:css
If I was using compass, I would use 'compass watch' and it reads configurations from the config.rb file.
No, unfortunately.
In a future release Sass will emit the sourcemap as a default. https://github.com/nex3/sass/issues/1189
Until then, either a grunt configuration or an alias in your bash profile is your best bet.
Related
Is there any way to compile node-sass forcefully even if there is no change in the SCSS files. Like the compass watch --force in ruby-sass
Now I am using the following command with the npm script
node-sass --watch assets/scss -o assets/css --output-style compressed
Yes you can:
node-sass --output-style=compressed --output=assets/css assets/sass
Thay will compile all .scss files located in assets/sass into assets/css.
You code uses the --watch argument; that means that node-sass will be watching assets/scss for any .scss or .sass file that changes, to compile the files.
You can learn more about node-sass here. Hope it helps!
I had to rewrite this every time I want to see a live preview.
sass stylesheet.scss stylesheet.css
I use sass --watch stylesheet.scss:stylesheet.css. When saving your .scss file, it'll automatically update the .css file.
You might also consider sass --watch stylesheet.scss:stylesheet.css --style expanded --sourcemap=none to keep the .css file readable.
I'd recommend the Sass Workflow class on Udemy.
Try out Grunt or Gulp with Sass: A great tutorial: https://www.taniarascia.com/getting-started-with-grunt-and-sass/
You need something to compile it automatically. As an example, there are solutions that use node.js to automatically compile for you on your computer. One tool is Foundation for Websites by Zurb.
You can install the application which will automatically compile sass for you.
For more information, check out: http://foundation.zurb.com/sites/download.html/
you can use this code
sass --watch file.sass:file.css
or
sass --watch foldersass:foldercss
Sass can be compiled automatically using below command:
sass --watch SASS_SOURCE_PATH:CSS_BUILD_PATH --style=expanded --no-source-map
Where:
SASS_SOURCE_PATH: Path of sass file
CSS_BUILD_PATH: Path of build CSS file. Where do you want to save CSS file
--no-source-map: will not output a map file, which is not readable.
--style=expanded: will expand CSS to human readable.
I would like to know how I can prevent Sass from writing .map files. I'm using Sass in a very basic setup:
sass --watch style.scss:style.css
what parameters do I have to add to avoid Sass to generate map files?
That depends on the implementation.
For node-sass and ruby-sass try this:
sass --sourcemap=none --watch style.scss:style.css
If you're using dart-sass the usage is --no-source-map:
sass --no-source-map --watch style.scss:style.css
it's works:
sass --watch --no-source-map input.scss output.css
with
1.8.0 compiled with dart2js 2.0.0-dev.66.0
I'm using sass version 1.13.2 compiled with dart2js 2.0.0 on Ubuntu and it's sass --no-source-map --watch [source].scss:[target].css
as --source-map enables source map and --no-source-map disables it.
Works:
sass --sourcemap=none style.scss style.css
Doesn't work, still generate .map file:
sass --update --sourcemap=none style.scss:style.css
So make sure you have no --update flag
As default, the sourcemap is enabled for Dart Sass and if you add --no-source-map it will disable it.
I have scss and css files in ASP.NET project.
If I change scss, should be css be regenerated? If yes, then how? VS can do this or should I have some other tool?
There are extensions that allow you to regenerate from inside Visual Studio, but I personally prefer the command line way.
sass --watch [folder holding .scss files]:[folder holding .css files]
If you use Compass, you can use this command instead:
compass watch
Both of these commands will tell Sass to watch the folder with the .scss files, and any time they're changed and saved, regenerate the CSS files.
If you created the project, then you likely already have Sass (and, by extension, Ruby) installed. If you don't, you'll need to install Ruby and Sass. Windows has a nice little installer that installs both Ruby and RubyGems. Once it's installed, you'll need to run the following to install Sass:
gem install sass
Once Sass is installed, you can either run the sass --watch command, or use a VS extension of your choice to watch and recompile the CSS files.
Is there a way to run:
sass --watch a.scss:a.css
but have a.css end up being minified?
How would I avoid having to run a separate minification step as I compile my stylesheet?
sass --watch a.scss:a.css --style compressed
Consult the documentation for updates:
https://sass-lang.com/guide
https://sass-lang.com/documentation/cli/dart-sass#style
If you are using JetBrains editors like IntelliJ IDEA, PhpStorm, WebStorm etc. Use the following settings in Settings > File Watchers.
Convert style.scss to style.css set the arguments
--no-cache --update $FileName$:$FileNameWithoutExtension$.css
and output paths to refresh
$FileNameWithoutExtension$.css
Convert style.scss to compressed style.min.css set the arguments
--no-cache --update $FileName$:$FileNameWithoutExtension$.min.css --style compressed
and output paths to refresh
$FileNameWithoutExtension$.min.css
If you're using compass:
compass watch --output-style compressed
There are some different way to do that
sass --watch --style=compressed main.scss main.css
or
sass --watch a.scss:a.css --style compressed
or
By Using visual studio code extension live sass compiler
see more
This worked for me :
sass --watch --style=compressed a.scss:a.css
Reference