Cloud9 IDE seems to support formatting/coloring for SCSS files, but there does not appear to be a setting in the preferences for SCSS files to be automatically processed into CSS.
The only way I have found to achieve this is add the SCSS gem, then leave scss --watch running in the background.
Are there any better ways than this?
You can enable this via the Run menu:
Related
I get this annoying dialog when my SCSS is compiled by sass ruby gem.
How do I disable it?
I solved this simply by removing the folder which contains the compiled assets from Chrome's workspaces. I never quite saw the point of having compiled assets in there anyway, and it gets rid of the dialog.
I just can't get Codekit to compile my files.
I created a New Zurb Foundation project exactly as Bryan did in his video. No errors but for him the page loads with the styles. For me it just loads html but no styles are included except app.css.
Bower succesfully downloads all the files to bower_components. How can I make codekit to compile all files? Do I have to manually move the files from the folder to the root? I'm trying to start with SASS so I don't know how the imports work.
They don't mention any imports or any particular settings here: https://incident57.com/codekit/help.html#zurb-foundation
I had same issue, but enabling the libsass compiler for app.scss seemed to work for me.
Highlight app.scss, then in the right pane, select "Use the libsass compiler."
I was able to get this working by changing the output file for app.scss to be /css/app.css. That was the path the the index.html file was looking for.
You'll probably need to create the "css" folder in your project, as it wasn't there for me by default.
Does SASS render to an actual css file of my choosing or a newly generated style sheet?
in the case of an app with many style sheets , the most sensible thing is replace some css at a time and render to a style sheet that loads last -that would override all other style sheets until the updating is done and I would remove css.
The typical Sass workflow is to compile to a main style.css file from a style.scss file where you specify which files it should compile. You can set it to compile to a different file. If you're using the command line you can tell it what to watch and where to output a la
sass --watch input.scss:output.css
sass --watch app/sass:public/stylesheets
http://sass-lang.com/documentation/file.SASS_REFERENCE.html
Most GUIs that handle Sass have simple settings that allow you to do the same for individual files.
It renders into an actual CSS file. All of the SASS is eventually compiled into vanilla CSS
Is there a way to add Jade support in WebStorm's Configure Inspections?
You can get to Configure Inspections by clicking on the Yeoman lookalike in the right below corner
Jade plugin is active, but no Jade in Configure Inspections:
Which is annoying because when you have a jade template with invalid syntax (forgotten comma):
button(type='button' class='btn btn-primary')
WebStorm does not complain, but I get a nasty error when compiling the template. It would be easier to detect such errors faster.
The Jade plugin has no hidden features that have to be enabled in magical ways; the error highlighting you want is simply not implemented in the current version. You're welcome to file a feature request at http://youtrack.jetbrains.com/
Using the new "File Watchers" feature in the latest EAP it's possible to have WebStorm automatically compile Jade as you change the file. It will show errors in the output window as soon as they are detected.
Often times I use "edit css" functionality in web developer extension to edit my style sheets.
It's a great feature but it takes time to edit the css and copy it back to an editor to save it.
I am planning to use Compass for my next project and I am wondering how I can use "edit css" functionality with SASS/Compass.
There's no way to do this the way you're expecting.
The flow will have to work like the following ->
Write Compass/SCSS -> Refresh Page -> Edit CSS to get results -> Re-Edit SCSS with previous step and or copy/paste.
Because it compiles down, there's no solution I know of yet that hooks it back in to the SCSS layer.
I don't think it will be much different from what you're doing now..
Compass will precompile the stylesheet written with Sass/SCSS, it will be a regular stylesheet by the time it reaches the browser, so if you then use the "edit CSS" function of your browser toolbar it will work the same way as you do now only you will need to go back to the SASS/SCSS file and insert the changes into the right place (e.g. it could be in a nested rule or mixin or function, depending on how you've written the SASS/SCSS file) - then Compass can recompile the stylesheet
Codekit
Codekit is a great product for OSX that will allow you to edit your local files and as you hit save it will automatically inject the new compiled stylesheet into your browser without a page refresh, so it will at least save you that step. However, as of yet there is no Windows counterpart that I'm aware of.
I've used Codekit on a pretty large project recently where we were using SCSS and it was certainly helpful. Although sadly, like you, I'm used to the "Edit CSS" Web Developer Toolbar workflow, and I've yet to find an exact translation over into the SASS world.
Web Putty
One other option that has some potential (but some SERIOUS drawbacks) is a open source framework from Fog Creek called Web Putty. It was a service they offered that allowed you to live edit CSS in the browser, including SASS and SCSS flavored CSS, but they stopped the service and simply open sourced the software so getting it setup is entirely on you and requires quite some effort (THATs the drawback).
This is possible now with experimental support for Sass in the Chrome dev tools.
First enable the support for Sass:
Then make sure you're compiling to anything other than compressed and enable debug info in Sass. If you're compiling from the command line, pass the --debug-info flag, if you're using Compass, add this to your config.rb:
sass_options = { :debug_info => true }
Presto, you have access to the Sass source in the dev tools:
Clicking on the line number in the dev tools will allow you to edit and apply the local changes:
Personally, I prefer to use compass watch in conjunction with LiveReload and edit in my editor, but for those of you that like to edit in the browser, you can now edit the Sass files directly.
Don't forget to compile to compressed before deploying.