How can I get SASS working in Netbeans for mac - ruby

Does anyone one know what to add in the Sass path in a mac? All the tutorials I have found are for Windows: https://medium.com/#raaechelb/sass-installing-on-netbeans-and-getting-started-2b5ce99d985c
I have installed Ruby and Sass. I can get SCSS to compile if I use --watch in the command line, but I can't seem to get Netbeans to see SASS within the IDE. I have also tried the file path /usr/bin/sass suggested on the Netbeans website:https://netbeans.org/kb/docs/webclient/html5-editing-css.html
I keep getting 'SASS executable must be a valid file' - Any ideas?
enter image description here

Go to your terminal and type which sass. It should give you the path that you can copy and paste in NetBeans.

Related

How to install Dart Sass?

The instructions on the website say:
You can install Sass on Windows, Mac, or Linux by downloading the package for your operating system from GitHub and adding it to your PATH. That's all—there are no external dependencies and nothing else you need to install.
I downloaded the Windows package from here: https://github.com/sass/dart-sass/releases/tag/1.10.1 and now what? Where do I place the zip? Do I need to extract it? I have no idea what this means - "To install Dart Sass 1.10.1, download one of the packages above and add it to your PATH." Sass is not being recognized when I try to check the version from the command line.
Can someone provide a step by step guide?
I've also installed Ruby, if it matters (but I don't want Ruby Sass, I want Dart Sass).
For windows 10
Go here dart-sass and download dart-sass which is suitable for your operating system.
Extract it where you want.
Open windows search and search this "system environment variables" then click it to open.
Click "Environment Variables"
Under system varibles find the PATH variable, select it, and click "Edit".
If there is no PATH variable, click "New" and write here PATH.
Go your dard-sass folder and copy directory.
Add your directory to the beginning of the variable value followed by ; (a semicolon). For example, if the value was C:\Windows\dart-sass, change it to C:\Users\Me\bin;C:\Windows\dart-sass. If there is not another directory just add your directory here. Then click "Ok".
Open "Command Prompt".
Write here "sass --version" and click enter to be sure it installed correctly.
Create style.scss and style.css file.
Write on Command Prompt "cd" then your directory(where is style.scss and style.css file). For example "cd Desktop\webdev"
Then write this "sass --watch style.scss style.css". Then minimize it.
That's it. You can open your text editor then style.scss file and write your Sass code. It's automatically compile to the css code.
https://katiek2.github.io/path-doc/

IntelliJ Mac - LESS Compiling with Autoprefixer

I was using a file watcher in IntelliJ which automatically compiled my less files into css files. I added an argument to the file watcher which used the autoprefix plugin to add all the prefixes to the compiled css file.
I now switched from a windows machine to mac and I can't get it to work like this there. I installed the autoprefix plugin via npm: https://github.com/less/less-plugin-autoprefix
And I set everything like it was on my windows machine: https://intellij-support.jetbrains.com/hc/en-us/community/posts/115000659610-Autoprefixer-in-file-watcher
But now I only get the error message:
"Unable to load plugin autoprefix please make sure that it is
installed under or at the same level as less"
Same error occurs when calling the compiling with plugin from the command line. LESS compiling itself is working fine.
Does anyone has an idea what I'm missing? I'm pretty new on Mac so I don't know if I miss some environment variables or something? Or how can I check where the plugin is installed and where do I have to install it?
Thanks to an answer which seems to has been deleted in the meantime I found the solution.
The current autoprefix plugin needs an older version of less. It's not compatible with less 3.0.1.
After uninstalling less and installing version 2.7.3 with
npm install -g less#2.7.3
it is working again.
Found the solution here: https://github.com/less/less-plugin-autoprefix/issues/30

Trying to get SASS working with Netbeans 7.4

I am working on a project which has a number of sass files located in a sub directory called sass. I understand that in order for these files to be generated into css I am required to install ruby and compass.
I've done this. I am on a Windows 7 64bit OS. I downloaded the Ruby .exe from their site and ran it. I ran sass -v to check the version that was installed and it was Sass 3.4.1
Next I went into Netbeans and went tools->options->miscellaneous and went to the CSS Preprocessors tab. From here I entered the path to my sass.bat file which was was follows:
C:\Ruby193\bin\sass.bat
Following this I then restarted netbeans and opened a command line. I navigated to the sass folder of my project and ran the command compass watch however when I make a change to the sass file and save it is not being detected by compass which makes me think I've done something wrong.
I'd appreciate any help with this. I've not got a lot of experience with SASS.

Cannot get SASS to output .css file in Netbeans 8.0

I'm trying to learn to use SASS to expand my web development skills but I've run into a problem. I'm running Windows 7 , I have installed both Ruby193 and SASS gem and I'm using Netbeans 8.0 as my IDE.
My system path points to C:\Ruby193\bin and I can type ruby -v from my command prompt without error, so I believe that is set up correctly.
Under CSS Preprocessors in project properties I have input set to /scss and output set to /css. In Configure Executables I have SASS path set to C:\Ruby193\bin\sass.bat. From what I have read, this is correct.
I've also got a simple project set up with two directories css and scss as well as an index.html with test text and a link to css/style.css in the header. In my scss directory I have style.scss with some test code. My css directory is empty. It is my understanding that when I compile SASS should generate a css/style.css from style.scss, however it does not.
Both Netbeans - installing SASS and Does Netbeans generate a separate CSS file when saving a SASS file? have the same problem I do, but neither solution seems to work for me. Could anyone offer me some help? I've also attached an image of my settings.
Thanks in advance for any help you can offer!
http://i.imgur.com/atyHT84.png
1) create css/styles.css.
2) type "--style compact" and check "Compile Sass files on save" in the CSS compact.

Can't Find Compass Imports after Compass Install

I'm updating a PHP project using PHPStorm. I first started using SCSS by turning on the PHPStorm watch for the file type. It works fine. I then wanted to incorporate Compass. I successfully installed it and ran "Compass create --bare" in my project directory. Now when I include #import "compass/typography/vertical_rhythm", it can't find it. It's not surprising as there is no compass subdirectory. How do I install the required components? Didn't see any Compass option that seemed appropriate. I used the bare option because thats what's the Compass site gave me for an existing project.
Once I get it installed, do I need the Compass watch given I already have a file watcher running for SCSS files? The description of it indicates it does the same thing.
Running OS X 10.8.4
Answering my own question again. I should have plugged away a little longer. I'll leave this in case someone has the same problem.
The #import "compass/typography/vertical_rhythm is resolved by the the Compass compiler. Just running a vanilla SASS compiler isn't going to do it. At this point I make this happen by running compass compile on a bash command line. I haven't been been able to get the PHPStorm watcher to work correctly. A new version of PHPStorm was announced yesterday (5 Sep 2013) with additional support for Compass.
Update
There's another question here asking how to get compass compile to work with PHPStorm. It didn't work as written for me. I made a comment there on the changes I made to get it to do so.

Resources