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
Related
I tried to find a similar case to mine but didn't succeed.
Here is the issue. I followed Symfony documentation to add Bootstrap to my project.
I indeed get a bootstrap folder in a new folder called "nodes_modules".
The thing is i can't find a global.scss file anywhere (as mentioned in the tutorial) then i don't know where to put the following command:
#import "~bootstrap/scss/bootstrap";
Do i have to create this file or does it exist somewhere in my Symfony project?
Thank you in advance.
Yes, global is your application scss file, it can be named different on you wish. You can refer this documentation in order to see how to configure it (it is app.scss in the example)
I understood what was wrong there! So if you are creating a Symfony 4.1 project on mac and you don't know where to import your bootstrap theme(s) since you don't have any assets folder here is the solution:
To have the assets folder you have to install the webpack "encore".
Please make sure you have node.js and yarn installed before that.
Then just run the following commands inside your root project directory:
composer require symfony/webpack-encore-pack
yarn install
You might have now an "assets" folder inside your project with an assets/css/app.css file and a assets/js/app.js file.
Thank you for your time ScayTrase.
I'm new to SASS and as such ran sass --watch dir on my /scss directory.
Then I discovered Compass and ran compass watch on the same directory.
Now when I edit style.scss, the compass watch updates the /css/style.css file as expected, and the sass watch creates a new style.css alongside the style.scss file (which is unwanted).
I managed to cancel the compass watch with Ctrl+C. However even after a full system restart the sass watch still seems to be active. I.E. it's still creating style.css in the /scss directory.
How can I stop it?
I've solved the problem.
Its turns out I had the Sublime Text SASS Build Package installed which was running all along.
I've uninstalled that and now everything is as it should be.
Doh!
Oh ! You don't have to use Sass and compass at the same time dude.
Compass is a SASS extension, so you can use it alone.
Personally i advice you to learn SASS first so forget Compass for few months.
For the directory problem it's simple. Open your terminal go into the folder youre working.
Image you have a folder named site1 with a sass and a css subfolder. Go into your the site1 folder and run :
sass --watch sass/style.scss:css/style.css
And normaly it should work :)
I'm on Windows, and I have SASS running successfully in my project. Now, I want to include compass so I can take advantage of the pre-written mixins, etc.
First I simply tried this statement from within my working sass file: #import "compass/css3/transform";
Naturally, this didn't work since I didn't have compass installed, so I navigated to my Ruby directory and successfully installed the compass gem within c:/ruby193/bin. I can now successfully create compass projects within c:/ruby193/bin, but that doesn't do me much good.
I need run compass commands within my site, which lives here: c:/inetpub/mysite. When I try to do so, however, I get compass is not recognized as internal or external command
How can I get compass to work where I want it?
EDIT: a large part of my problem was that Ruby was installed without adding itself to the Windows Path environment variables, so I could only run SASS and Compass commands from within the C:/Ruby193/bin directory. This caused problems for me since, as a result, I thought that was where I needed to install compass. Anyhow, after figuring that out, I still haven't been able to get compass to work, but am planning on uninstaling SASS, Compass, and Ruby and giving this thing another try from scratch. I marked Stooboo's answer as correct since it was the best and most accurate, especially given the information he had to work with. Thanks!
here's how I do it
(One time)
install ruby http://rubyinstaller.org/
install compass, in a command window enter
gem install compass
to add compass to an MVC project, navigate to project folder and in a command window enter
compass create
you will get the default config.rb ... but here is my usual one
http_path = "/"
css_dir = "content/css"
sass_dir = "content/sass"
images_dir = "images"
javascripts_dir = "scripts"
to install bootstrap (for more info see https://github.com/thomas-mcdonald/bootstrap-sass)
add
require 'bootstrap-sass'
to your config.rb
enter (in your command window)
gem install bootstrap-sass
(I had to do a (in your command window)
gem update
after this but you may not need to)
enter (in your command window)
compass install bootstrap
(then ... every time you open the solution in Visual Studio)
navigate to project folder
in a command window enter
compass watch
(this will monitor project for saves and re-compile the scss files)
Hope that helps
Cheers
Stu
To install Compass, you should open your Windows console with Win+R, cmd and run:
gem update --system
gem update
gem install compass
Don't forget to remove all the stuff that you littered you Ruby installation with.
Use this command in order to add GEM to the Windows Path environment variables:
set PATH=C:\Ruby200-x64\bin;%PATH%
In the Ruby command you should write:
gem update --system
(this block of code updates all the gems in the Ruby)
Then you install sass like it:
gem install sass
(You said that you already has sass, so you don't need to write this code again.)
Then, you write this line:
gem install compass
(Now, you will have compass in your machine)
To know the version that was installed, you can write:
compass --version
To create a new project in your desktop machine, you can write this line of code:
compass create desktop/my-project
(This will create a compass folder in the desktop of your machine called my-project. I hope this is helpful.
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
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