how to configure WebStorm to start with Sass? The best is to not install Ruby, so I should use Gulp as I know. But what to do with it? Have anybody WebStorm and may give me step by step instructions?
I am beginner front-end dev, fresh with Sass and I need your help. Thanks!
Please see http://ryanchristiani.com/getting-started-with-gulp-and-sass/ - you may find this post helpful. But note that gulp-sass is a wrapper around libsass, there are lots of known issues installing it... So installing Ruby might be a better option. See also https://www.jetbrains.com/help/webstorm/2016.1/transpiling-sass-less-and-scss-to-css.html
Install Ruby
https://rubyinstaller.org/downloads/
2.instal sass: please type in cmd => gem install sass
Instructions: https://sass-lang.com/ruby-sass
3.set in webstorm
Setting -> Tools -> File Watcher -> Add SCSS
Program: C:\Ruby25-x64\bin\scss
if you want to be compressed css, write " --style compressed " Continue to write the command Arguments.
Example: $FileName$:$FileNameWithoutExtension$.css --style compressed
Related
Can anyone please help explain this? I am new at using Sass. But I cant understand why people use compiler for sass files when they can be run through terminal.
I actually had the same question some time ago when I was learning SASS.
I kept wondering why most tutorials involved using GRUNT / GULP or some kind of task runner when there where sass proprietary commands even for live-watching your files with a command such as:
sass --watch app/sass:public/stylesheets
I will quote myself here in the question (that no one answered) just to share my experience with SASS compiling:
Grunt: using grunt-contrib-sass - Everything has worked smoothly; I chose this one over grunt-sass for no particular reason, but I've read that the latter uses libsass(c++) which is faster than the traditional ruby Sass.
Gulp: using gulp:sass - I often encounter an error when watching
files, it doesn´t find some partials, but if you save again,
everything is fine (this is addressed in their common issues -this
solution hasn't worked for me though), also it doesn't generate sass
maps as a default you have to use gulp-sourcemaps on top.
Straight from Console: no task runners - Works fine so far, generates
sourcemaps, and lets you know where there's an error, just like with
Grunt and Gulp.
So after working on different projects using SASS I'd say the reasons are:
Tutorials popularized the use of task runners when using SASS in its early times
In a project, you rarely use SASS just by itself, you most likely want to run other tasks, so it makes sense to add your SASS task to the flow, which saves time and makes sense.
It's easier to run a simple command such as gulp sass or just gulp to run the default gulp task (that should include the sass task) than to remember a long command in which you have to put the paths over and over again.
After a while I realized that you can use NPM scripts in your package.json to run the SASS command line tools like so:
"scripts": {
"sass": "sass --watch app/sass:public/stylesheets --style compressed"
},
And then run it from the command line: npm run sass
the above requires no configuration and you don't have to remember the whole command by heart.
To conclude, there is nothing wrong in using the CMD SASS without other compilers/task runners, just use whatever you feel most comfortable with.
i run grunt dev and get the error:
Running "compass:dev" (compass) task
Error: invalid option: --sourcemap
Don´t know why :(
Don´t even know how i could run compass without the option ... found nothing in the gruntfile.
thanks for help, i´m new with grunt/compass/sass
Execute "gem list" so we can have more details on what gem versions you're using.
AFAIK the sourcemap works since sass 3.3 and up.
If you want to disable the sourcemap on your project, check your config.rb file and check the sass_options entry, you might find ":sourcemap => true". If you find it, remove it and check it out.
Hope it helps!
This happens because of old version of SASS (or COMPASS, if you are using it) ruby gems which do not support sourcemap options.
Update these with following commands:
gem update sass
gem update compass <= if applicable
This should resolve the issue.
I have all the correct packages installed and have SASS running. Now I just need to figure out how to start a project with it. Are there any pre-built templates that show you the file structure, etc...Any help would be great!
An easy way would be to install Compass (http://compass-style.org/) and then it's a simple as running:
compass create project-name
Which would create the structure for you.
And then to compile
compass watch
More can be seen here http://thesassway.com/beginner/getting-started-with-sass-and-compass
I'd love to use Bourbon with LiveReload but I can't seem to get them to work together. Anybody successfully made these two play nice?
If you use the 'Run a custom command after processing changes' option rather than the standard compilation option, then you can use the commands as detailed on the readme.
# Example (project root directory)
sass --watch stylesheets/sass:stylesheets -r ./stylesheets/sass/bourbon/lib/bourbon.rb
I wrote a blog post covering this.
If you install the latest version (3.0.0) of Bourbon and install bourbon into your compass sass directory:
bourbon install --path ./sass
You can then use LiveReload with one small tweak. You will need to replace LiveReload's version of SASS with at least 3.2.3, since Bourbon requires this.
Instructions on how to replace LiveReload's default SASS version can be found here: http://carl-topham.com/theblog/post/changing-version-sass-livereload/
This seems to work for me.
I've been told you can get it to work by passing the lib/bourbon.rb file into the "Run a custom command" option in LiveReload. See attached image.
I wanted to use SASS on our company's web app but I can't install any programs on production machines. Everything I searched about SASS required you to run an installation program like gem and also required HAML.
I was hoping to find just a script that processes scss files without needing to install anything else.
Well... if you have Ruby available, you could checkout the Git repository of Sass (https://github.com/nex3/sass). Do so by either typing git clone https://github.com/nex3/sass.git or just downloading it.
Then you could use the interactive Ruby console by typing irb. Try to require 'sass/lib/sass' (this one here) and run Sass.compile_file 'my_styles.css'.
Otherwise... why are you trying to do that? You can also install sass locally, run sass --watch on your sass folder and it compiles your scss files automatically into css files - which you can deploy on your production environment.
If you can run java program in your build system, you could use JRuby for compiling sass. See this answer for more details
Here's a solution for using Sass without using the command line or installing dependencies. It works with Windows, OS X, and Linux. It has a graphical interface, and no installer, just unzip and double-click.
http://scout-app.io
You can also use the java library https://github.com/scireum/server-sass which can be embedded into any java based web-app. It will compile sass on the fly and return the resulting css. This is especially useful if the Sass sources change (i.e. for customizing reasons) and an ahead of time compilation is not possible. (Note: I'm the author of the project - and it is also not yet a complete implementation of the Sass standard).
Alternatively, what you could do is:
Install Ruby
Download the Sass Gem
Navigate to download location
Run: gem install sass-3.3.4.gem
Voila! Sass is installed.
Use the online Sass compiler SassMeister. You just have to paste your sass code on the left panel and get the css code on the right.