Meteor.js & SCSS/Compass - sass

Anyone doing development with meteor and SCSS. How do you get started, there are no packages for meteorite that i could find that compile .scss files into a specific folder?

Have you tried just compiling the sass/scss into css locally during development? Meteor shouldn't complain if you have your config.rb inside of the client folder along with a sass folder and compiled css folder. It should just automatically read the css per norm. Running $ compass watch inside of this client folder where the config.rb resides is an easy way to automate this css compilation. Telescope is a great sample Meteor app that uses sass in this fashion.
--Alex

Just to get this posted as an answer (was posted as comment); bookcasey posted this sample project as well: https://github.com/gdumitrescu/scoreboard which provides some guidance on how to use sass/scss. Hope it helps.

Related

Why can't I get SASS/Bourbon to compile?

I am new to SASS. I am using this as a guide to learn Bourbon -
http://www.git-tower.com/learn/bourbon-neat-bitters/getting-ready/introduction
I followed all the instructions and it displays fine on my local machine. But when I edit _layout.scss, it doesn't compile to styles.css. I installed Compass and had it watch the project folder, but same results. My changes won't take.
Am I missing a step?
This is likely more of a sass importing/file-name issue than anything specifically with bourbon. I'd check out http://sass-lang.com/guide . Sass-lang put together a really nice guide to sass that includes things like imports, etc.
Also, Compass app can bring some things to the party that can conflict with Bourbon. I'd recommend using the sass app or a desktop app like https://prepros.io which can be easier starting out.
Hope this helps 🍻

Sass does not compile compile right with more than one project accessing a foundation folder

I'm using CodeKit 2.1.8
I was using Foundation 5.4.6 but got in to some problems and updated to 4.5.7 now I still have some problems but different ones.
I was using Sass version 3.4.7 but downgraded to 3.2.19 after reading this could help. This did not help so I updates back to 3.4.7.
Right now my problem is as follows:
I have foundation installed through CodeKit. I did not alter die bower component files, everything is as is.
I have two projects accessing the bower component folder. My folder structure is as follows:
zurb-foundation
bower_components
dsl
css
img
js
scss
index.html
header
css
img
js
scss
index.html
.bowerrc
bower.json
config.codekit
package.json
The Sass files in both the dsl and header folder are completely identical. But they compile different.
Right now the dsl app.css file has about 15000 rows where the header app.css file has about 5000 rows.
I compared them and there are a lot of differences. All of the styles and components get loaded but it looks like the styles get multiple times in the dsl/app.css. Another difference is that the header folder has no sass-cache folder but the dsl folder has got a folder called sass-cache.
So there are some compilation differences does anyone has encountered this before?
Thank you
I also posted this question in the Foundation forum. Rafi Benkual provided me with this answer:
Have you tried Libsass? Here is the recommendation from Codekit:
Sass Update
"Keep using Libsass to compile Sass files in a Zurb Foundation project because the latest Ruby Sass compiler (3.4.5) is not yet supported by Foundation. This should clear up in the next few weeks. See the link in the 2.1.7 release notes, below, for more information."
In CodeKit 2 you can find "Use the libsass compiler" checkbox under "Other options:" on the .scss file's settings panel (on right).
This worked for me.

How to update SCSS on Wordpress?

I recently learn how to use SASS, on local. And I found out that it is possible to use it in a wordpress theme.
I manage to install and use it without problem. But now I want to customize _settings.scss, I don't know how to transform my scss in css (I used Grunt, in a console using ruby to do so in local.)
You should be editing your files locally and uploading once finished rather than modifying files on the server. There should never be any need to compile SASS on the server itself.
If you really have to edit on the server you could login using SSH and start the watcher (install sass and run sass --watch with your settings).

Compass File Location Best Practice

Just starting out with SASS and Compass.
I've been using a Mac App called CodeKit to compile and manage my Sass and Compass.
If I wanted to use a set of Sass Partials on multiple projects and ideally store these in a central location (for example my dropbox) is this possible?
Codekit has a really nice feature called Frameworks that lets you do this but this doesn't work once you start to use Compass as Compass is a framework in its own right.
Thanks in advance for any help.
Richard
Create a Compass extension and import it into your config.rbs.

How to automatically compile scss into css with assets pipeline in Rails 3.1?

The new rails 3.1 asset pipeline confused me a lot. In rails 3.0.x, with the sass gem, my global css file got updated when I edit .scss files. But in rails 3.1, that doesn't work anymore. It seems like I have to run a rake task to update my css files whenever I modify the .scss files. I feel like I misunderstand something about the new asset pipeline, but I don't know what it is. Can someone provide a solution or explanation to this problem? Thank you.
There are two possible causes of this. I am assuming that you are in development mode, and that all the gems are loaded.
1. Config
In development mode files are compiled on-demand and cached until any changes are made. You have to get the new 3.1 config options set in the right files or this might not work as expected.
Check out the Rails guides section on upgrading.
2. Extensions
The other is getting the extensions in the right order. For scss that would be file.css.scss. This tells Sprockets to parse the files as scss first, and that the have a css extension. If you had .erb on the end - file.css.scss.erb - then erb is processed first, then scss.
Upgrading apps is a bit tricky because so many things have changed. The asset pipeline guide has lots of useful information and advice.
Sass / SCSS has this built in already so you don't have to do ERB pre-processing.
image-url("image.png")
http://guides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets
For me this problem resolved very easy.
I simple deleted all precompiled *.css files from assets/stylesheets and remain all *.scss files. Rails worked fine with *.scss directly, withoutn precompile.

Resources