Eclipse plugin to automatically compile Sass files [closed] - css

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I'm currently using the Aptana plugin for Eclipse, which is giving me great syntax highlighting, and allows me to manually click to compile a *.scss file into a *.css file. What I would really like to be able to do is get it to automatically compile every time I save, but I cannot figure out how to do this.
I know you can use sass --watch on the command line, but I don't want to have to set this up manually every time I open eclipse, or create a new project.
Has anyone found a good way of achieving this? Is there must be a way of hooking into Aptana's Sass bundle and running it's compile command everytime I save? The accepted answer to this question suggests using a "Program Builder" - but is this really the best solution? If so does anyone have any tips/links to tutorials?
Update: I wrote up a blog post about how to use an ant script as a builder, but I'm still looking for a better way.

After lot of tries, I've found that the best solution in Eclipse is to define a simple Builder using the --update sass feature:
From the Project menu select "Properties" and choose the "Builders" section.
Create a new Builder and select "Program" as configuration type.
Choose a name for your launch configuration (SASS?!).
Insert the path of your sass installation into the Location field.
Use ${project_loc} as working directory.
In the Arguments text box insert the configuration parameters you want sass to use and, at the end, specify the --update parameter followed by your sass files directory source followed by ":" and the destination folder for the compiled css files. In my configuration "resources" is the source folder containing the .scss files and "web" is the destination directory containing the compiled .css files. The --update command will check for modifications in the source folder and all sub-folders. Screenshot
In the "Build Options" tab just check all options under the "Run the builder:" section. You can also "Specify working set of relevant resources" to launch the builder only when files contained in selected folders are saved. Screenshot
Click ok to save your launching configuration.
Now try to modify a .scss file in your source directory and then save it, you'll see the sass CLI output in your console window.
The sass CLI will automatically check for modified resources inside the source folder (resources in my configuration) and compile them into the destination folder (web in my configuration). Also, all .sass files that #import the modified resources will be compiled.

there is a watch switch for the sass comiler.
which rebuild the output (css) file everytime the source (scss,sass) change.
Quoting from : http://sass-lang.com/documentation/file.SASS_REFERENCE.html#using_sass
Using Sass
Sass can be used in three ways: as a command-line tool, as a
standalone Ruby module, and as a plugin for any Rack-enabled
framework, including Ruby on Rails and Merb. The first step for all of
these is to install the Sass gem:
gem install sass If you’re using Windows, you may need to install Ruby
first.
To run Sass from the command line, just use
sass input.scss output.css You can also tell Sass to watch the file
and update the CSS every time the Sass file changes:
sass --watch input.scss:output.css If you have a directory with many Sass files,
you can also tell Sass to watch the entire directory:
sass --watch app/sass:public/stylesheets Use sass --help for full
documentation.
Using Sass in Ruby code is very simple. After installing the Sass gem,
you can use it by running require "sass" and using Sass::Engine like
so:
engine = Sass::Engine.new("#main {background-color: #0000ff}", :syntax
=> :scss) engine.render #=> "#main { background-color: #0000ff; }\n"

There is much easier solution. Just follow the instructions to install SASS from:
http://sass-lang.com/install
and you will notice that first you will have to install Ruby. After that, just go to the folder where your SCSS/CSS files are located, start CMD and run this DOS command:
>cd <path-to-your-css-files>
>sass --watch .
Then all you need to do is to link your SCSS files to be recognized by Eclipse as native CSS files. Follow this solution:
https://stackoverflow.com/a/12322531/4180447
Hope this helps.
Note: I might have missed one or two steps. This is as per what I remembered after I completed the installation. If you face any problem, just post a comment, and I will try to help you.
Tarek

Related

How to compile SASS .scss files in most basic method (without framework)

I installed Bootstrap CSS with SASS from the following repo:
https://github.com/twbs/bootstrap-sass
I ran the command "bower install bootstrap-sass" on the command line and this successfully installed the folder bower_components on my project folder. (Incidentally - I have nothing else present yet, I want to learn to bootstrap the CSS compiling first).
OK, here's what I want to accomplish:
I want to be able to add .scss files to the folder I create called resources/assets/sass/
I want to provision/manage so that .scss files I add to this directory are in turn compiled to public/build/css/that_file_name.css
More practically, I would like to compile all of the .scss files into one large .css file.
My question(s) are:
What does the compiling?
How do I instruct it to compile the .scss files in the folder above in the public/build/css/ folder?
Must I configure new .scss files or can I set it so as to just add them to that sass folder?
Bonus, how do I tell it to minify the output file, or not (so I can experiment with both ways)?
What does the compiling?
Compiling Sass files transforms stylesheets with Sass-specific syntax like selector nesting and mixins into normal CSS that can be parsed by browsers.
How do I instruct it to compile the .scss files in the folder above in the public/build/css/ folder?
Since you're already using Bower which is a Node.js package, I assume that you have no problem using the Node.js package node-sass instead of the original Ruby version.
First, install the package using npm i -D node-sass. Then, create a new script inside your project's package.json:
"compile-sass": "node-sass resources/assets/sass/main.scss public/build/css/main.css"
main.scss is now your entry point where you import Bootstrap and your other stylesheets.
// I don't know whether this path is correct
// Just find out the location of "_bootstrap.scss" and then create the relative path
#import "../../../bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss";
/* Your custom SCSS */
Finally, to actually run the compilation, execute npm run compile-sass in your terminal.
Must I configure new .scss files or can I set it so as to just add them to that sass folder?
Since you never tell node-sass to "compile everything inside this folder" and instead use an entry point file (main.js), when you want to include a new file you simply add an #import directive with a relative path to it.
Bonus, how do I tell it to minify the output file, or not (so I can experiment with both ways)?
To minify the resulting main.css file, I recommend csso. You can install its CLI package using npm i -D csso-cli and then add another script to your package.json:
"minify-css": "csso public/build/css/main.css public/build/css/main.min.css"
You can then run that script using npm run minify-css. The minified file will be outputted as main.min.css.
For all the question asked, the answer can be found above. But if you are just looking to compile .scss file to .css using command line, use below,
sass source/stylesheets/index.scss build/stylesheets/index.css
Make sure you have "node JS/npm" and Sass compiler installed.
If not, use this to install Node.js and npm - https://www.npmjs.com/get-npm
And use this to install Sass - https://sass-lang.com/install
Enjoy ;)

Does Netbeans generate a separate CSS file when saving a SASS file?

I am using Netbeans 8.0 to edit my HTML, PHP, and CSS. Just today I have installed SASS and enabled it within Netbeans. I am developing on Ubuntu, and Ruby and Sass are both available in the repositories, so I installed them and Netbeans found the SASS executable with the click of a button. So, I assume it's all working.
I have created a file called style.scss, and put in some test colour variables and a dummy #test id.
My understanding was that when I saved the .scss file that it would get processed and a .css file with the same name, in this case style.css, would get created. Or updated if it already existed.
Is this not the case? I did see other SASS and .css file generation questions here on Stack Overflow, but I didn't see one specific to Netbeans, so I'm not sure if there's something I haven't set up correctly in my environment. Also, I don't need to upload to a server when saving, I am just testing and developing locally.
How do I actually generate a .css file from my .scss in Netbeans 8.0?
Right click on the project -> Properties -> CSS Preprocessors
You have to set an input folder, for example /scss, and an output folder like /css
And there is a checkbox "Compile Sass files on save".
For Compiler options " --style compact " can be useful.
This was working for me in NB7.4, but in 8, something happened...
The plugin page says, it's currently incompatible with 8.
http://plugins.netbeans.org/plugin/34929
UPDATE: My scss folder was wrong... So it's working in NB8.
Look # the project settings, and separate your .scss and .css files in two folder, the default folders are /scss and it converts files to /css folder

Does a save to a scss file automatically update the css file?

I just started working with scss a few days ago (with Webstorm), and it seem to auto generate/update the css file after saving the scss file. Unfortunately, when I save the scss file now, no changes are made to the css file. I was working on these files from a different location, so I am guessing that the Webstorm settings might be different. I thought file watchers might have something to do with it, but I am not sure what goes in the program field. I really have no idea why this is happening.
No, saving a .SCSS file does not automatically compile the final stylesheet file. What you need to do is set up a watch. There are a number of ways to do this (and a number of programs that'll do it for you).
The most straight forward is through the command line. Assuming you have the SASS gem installed (and you're in a ruby environment), do the following in the command line:
Navigate to the folder in which your .scss file/s are kept.
Run the following command: sass --watch style.scss:style.css
Note: The above assumes that both your .scss and .css files are named style, adjust accordingly if they are not. Also, if your .css and .scss files are in different directories you'll have to adjust the paths accordingly.
Remember, sass --watch then yourScssFile.scss : yourCssFile.css
Alternatively you can use an app, like LiveReload to watch the files for you. this'll take a bit of configuration, but it may be a little easier for you if you're only just getting started in the wornderful world of SCSS/SASS
Yopu can use File Watchers in WebStorm to auto-update the CSS file on changing SCSS; but this would also require installing the external SCSS compiler (SASS gem). Please refer to http://www.jetbrains.com/webstorm/webhelp/transpiling-sass-less-and-scss-to-css.html#d104715e458 for more information

How to add Compass syntax support to Jetbrains PhpStorm?

I'm using JetBrains PhpStorm, which is probably the most epic IDE I've ever used.
The question is simple. How do I add Compass syntax support to it? I've got it installed, it renders and works, but PhpStorm still complains about undefined imports and mixins.
How can I resolve this? Can Compass be included as an external library?
Edit: I'd just like to note that this feature request is for the RubyMine IDE (also by JetBrains), it's not for PhpStorm/WebStorm.
It's explanation of Martin's answer.
Symlink to compass gem directory in your sass folder works great.
Instruction(Windows)
open cmd with admin privileges
change path to your project sass folder, for example cd projectname\sass
run mklink /d compass $GEM_LOCATION\frameworks\compass\stylesheets\compass, as for me $GEM_LOCATION = C:\dev\Ruby200\lib\ruby\gems\2.0.0\gems\compass-0.12.2
Thats all, now PhpStorm will not highlight compass mixins as errors, and will add them in autocomplete suggestions.
Warning: If you want to delete created symlink DON'T use delete, it will remove source directory.
open cmd with admin privileges, cd $yourProjectSassPath, and run rmdir compass
As the above user mentioned it also works to add the path to the Compass stylesheets as a resource directory in your project.
For example, my compass stylesheets are located at:
C:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets
Go to Settings > Project settings > Directories.
Add a content root
Add the compass stylesheets directory
Click 'Resource Root' (the blue icon)
When you apply you will see that PhpStorm finds the compass stylesheets without any problems. You can even ctrl+click (windows) on them to open them directly.
Good luck!
I solved it by placing a symlink of the compass-directory (from $GEM_LOCATION/frameworks/compass/stylesheets/compass) into the folder where my stylesheet lives. It's more of a workaround but it makes me and the phpstorm-inspections/-autocompletion happy.
I think it's better to add the directory in the Directories settings: http://www.jetbrains.com/phpstorm/webhelp/directories.html
In the example above, add a new content root of C:\dev\Ruby200\lib\ruby\gems\2.0.0\gems\compass-0.12.2.
This is more easily fixed by using a better source for the executable.
From: http://youtrack.jetbrains.com/issue/WEB-9139
In Windows, use an executable path like:
C:\Ruby200\lib\ruby\gems\2.0.0\gems\compass-0.12.2\bin\compass
While on the Mac use something like:
/Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/bin/compass

Can't compile file using Compass

I have tried both ways to compile a project using compass (i.e. via the gui app, and the command line.)
I get this error in both instances. "Nothing to compile. If you're trying to start a new project, you have left off the directory argument.
Run "compass -h" to get help."
Where do you add the directory argument?
I suspect the way to get this working is just switch to your directory for your project and then run
compass init
This will then create you a "working" config.rb, and a directory called sass, and a directory stylesheets
and a couple of start scss files.
If you do not want them, or want to use different directories, you can of course now edit your freshly created and working config.rb, and change your directories (and then delete the old automatically created ones)
Anyway having done that(or not) you should then be able to run
compass watch
and all should be good , i.e. your scss files get compiled to css files
Or then run your gui tool
More information to be found in the compass documentation here

Resources