hi,
i want to use Sass and i'm very confused about all those things...

1) i'll need to install ruby or rubygems in server-side to theme using the sass files?
    yes, how to install
    1a) what is that "bundle install" thing? i looked into omega-guard --help and i didn't see nothing about it? this command will install ruby to me?
2) how the .sass or .scss files are compiled to .css, is automatic? do i need a compiler? compass watch?
    can be automatic, yes i need a compiler, sass --watch [scss dir]:[css dir] or compass watch [path/to/project] will do the job
3) what omega-guard drush command do? i need this?
4) if i want to theme using .sass instead of .scss, is possible? how?
    yes, converting the code and changing the file extensions to .sass
5) and what about all those sass related drupal modules?
/project/sass
/project/sassy
/project/compass
do i need any/all of these?

    no, i don't need them

thanks!!!

Comments

zerorez’s picture

If you want to jump right into trying out sass without installing ruby/sass, you could download drupalpro:

http://drupal.org/project/drupalpro

You have to install virtualbox and Import the drupalpro file into vb:

https://www.virtualbox.org/wiki/Downloads

Ruby, sass and compass are already installed and ready to use in drupalpro. Then just try out stuff from where it's all explained:

http://sass-lang.com/tutorial.html

If you don't want to use virtualbox/drupalpro....

If you're on linux/ubuntu, there are tutorials you can find online that show you how to install ruby. Then sass is a single line gem install in the terminal.

If you're on windows/mac, it's easier to install because there is a Ruby installer:

http://rubyinstaller.org/

And sass can be installed with a single line in the command line.

ilw’s picture

I have the same Q + -

Hope someone will reply here...

brunorios1’s picture

Issue summary: View changes

some answers

brunorios1’s picture

Issue summary: View changes

switching of to

brunorios1’s picture

Issue summary: View changes

adding information

asauterChicago’s picture

4) if i want to theme using .sass instead of .scss, is possible? how?
yes, converting the code

What does this mean, I want to do the same. I want to use .sass vs. .scss. However, when I start the project, the styles compass adds to style.css are commented out. Is there something I'm doing wrong or how do I "convert the code". I'm not sure what that means...

Ohh, wait, I'm an idiot. I started editing "_layout.scss" instead of "styles.scss". I took out the stuff I added to "layout" and put it into style.scss. I changed the extension of that to ".sass" and cleaned up the imports. It works great now.

Now I get what he meant by "converting the code" you have to "convert" the stuff inside the style.scss before you can start compiling it as a .sass file.

Nevermind, crisis diverted!

fubhy’s picture

Status: Active » Fixed

1a) what is that "bundle install" thing? i looked into omega-guard --help and i didn't see nothing about it? this command will install ruby to me?

Bundler is a tool that manages lists of gems for you. The best possible way to use Ruby and Gems imho is to install RVM (Ruby Version Manager) which allows you to work with isolated ruby environments and gem sets. These are specified by the .ruby-version and .ruby-gemset files in your theme folder (created automatically by "drush omega-subtheme" or "drush omega-wizard"). Now, when using RVM, whenever you navigate to your theme folder it will recognize the .ruby-version and .ruby-gemset files and log you in to the isolated ruby and gem environment. This allows you to work on multiple different projects with potentially colliding / incompatible gem and ruby versions without any problems. By running "bundle install" it will then automaticall install all gems specified by the Gemfile and store a snapshot of the installed versions of those gems in Gemfile.lock. Hence, Gemfile.lock is some kind of "Versioning Tool / Version Control System (VCS)" for your gems. Now, when running "bundle install" at a later point in time or on a different machine (e.g. if another developer starts working on the same project) the exact same versions of those gems will be installed on the other machine too because of the Gemfile.lock. This is very important because especially in Sass-land gems change quickly and sometimes change the syntax for mixins, etc. which can be very annoying. Hence, version-controlling your gems is crucial.

2) how the .sass or .scss files are compiled to .css, is automatic? do i need a compiler? compass watch?
can be automatic, yes i need a compiler, sass --watch [scss dir]:[css dir] or compass watch [path/to/project] will do the job

You can do this with "compass watch" (navigate to the theme folder and run it there, no argument needed then) OR by running "bundle exec guard". Guard is what I use because it does more than just "compass watch". It is powered by the Guardfile located in the theme folder and also integrates with LiveReload and some other things. However, if you don't need/want all that a simple "compass watch" will do the job too.

Ohh, wait, I'm an idiot. I started editing "_layout.scss" instead of "styles.scss". I took out the stuff I added to "layout" and put it into style.scss. I changed the extension of that to ".sass" and cleaned up the imports. It works great now.

Now I get what he meant by "converting the code" you have to "convert" the stuff inside the style.scss before you can start compiling it as a .sass file.

Nevermind, crisis diverted!

Our starterkits come with a rather complete/complex Sass project structure which tries to follow the brilliant SMACSS concept as much as possible. We use the styles.scss file just as a main entry-point for the compiler and then split up all the actual CSS into the "partials" (files that begin with an underscore) which are not directly picked-up by the compass compiler but can be imported into top-level stylesheets (things without an underscore). Hence, styles.css just has @import statements. This gives us a great amount of flexibilty and a cool tree-like structure for the project.

fubhy’s picture

Issue summary: View changes

more info

asauterChicago’s picture

We use the styles.scss file just as a main entry-point for the compiler and then split up all the actual CSS into the "partials" (files that begin with an underscore) which are not directly picked-up by the compass compiler but can be imported into top-level stylesheets (things without an underscore). Hence, styles.css just has @import statements. This gives us a great amount of flexibilty and a cool tree-like structure for the project.

Ok, the project I'm working on is a sandbox project. I've designed previously in the past with Omega (and previous to that it was Zen) and I've been wanting to learn SASS. So Omega 4s out-of-the-box integration gave me the motivation to start this small side project (it's a website for a friend). So with that in mind, I don't fully know what I'm doing yet with Compass.

When you say "compass compiler but can be imported into top-level stylesheets...cool tree-like structure for the project" I'm not totally sure what you mean. How would I implement that? Right now I've been putting everything in style.sass because I'm not clear how you use the other underscore files.

I did look through the compass documentation to see if there was anything that spoke to this, but unfortunately their documentation seems pretty sparse. So it sounds cool, but I would have no idea how to do what you're talking about...

Edit: I had another question about page templates but I figured it out already :-). So just the question about SASS.

caspercash’s picture

Hi!

I have encountered errors when running the drush omega-guard name_of_subtheme command which in return I wouldn't be able to use it. Below are the errors it displayed, can somebody tell me whats wrong with it and how to fix it? Thank you very much!

C:\www\drupal\sites\all\themes\drupal>drush omega-guard drupal
C:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/guard-1.8.0/lib/guard/interactor.rb:8:in 'require': cannot load such file -- pry (LoadError)
from C:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/guard-1.8.0/lib/guard/interactor.rb:8:in '< class:Interactor >'
from C:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/guard-1.8.0/lib/guard/interactor.rb:6:in '< module:Guard >'
from C:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/guard-1.8.0/lib/guard/interactor.rb:1:in '< top (required) >'
from C:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/guard-1.8.0/lib/guard/dsl.rb:38:in 'require'
from C:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/guard-1.8.0/lib/guard/dsl.rb:38:in '< class:Dsl >'
from C:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/guard-1.8.0/lib/guard/dsl.rb:34:in '< module:Guard >'
from C:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/guard-1.8.0/lib/guard/dsl.rb:1:in '< top (required) >'
from C:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/guard-1.8.0/lib/guard.rb:10:in 'require'
from C:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/guard-1.8.0/lib/guard.rb:10:in ' < module:Guard >'
from C:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/guard-1.8.0/lib/guard.rb:8:in '< top (required) >'
from C:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/guard-1.8.0/bin/guard:3:in 'require'
from C:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/guard-1.8.0/bin/guard:3:in '< top (required) >'
from C:/Ruby200-x64/bin/guard:23:in 'load'
from C:/Ruby200-x64/bin/guard:23:in '< main >'

I am running on Windows 7 64bit. Installed Ruby 2.0.0-p0 (x64). Also has this ruby devkit -> DevKit-mingw64-64-4.7.2-20130224-1432-sfx.exe. Below was also the output when I run the bundle install command. I did run this command before running the drush omega-guard drupal above.

C:\www\drupal\sites\all\themes\drupal>bundle install
Fetching gem metadata from https://rubygems.org/..........
Fetching gem metadata from https://rubygems.org/..
Resolving dependencies...
Using addressable (2.3.4)
Using chunky_png (1.2.8)
Using fssm (0.2.10)
Installing sass (3.2.9)
Using compass (0.12.2)
Using blend-mode (0.0.1)
Using breakpoint (2.0.5)
Using color-schemer (0.2.3)
Using compass-normalize (1.4.3)
Using compass-rgbapng (0.1.1)
Using compass-validator (3.0.1)
Using css_parser (1.3.4)
Using em-websocket (0.5.0)
Using formatador (0.2.4)
Using rb-fsevent (0.9.3)
Using rb-inotify (0.9.0)
Using rb-kqueue (0.2.0)
Installing listen (1.1.1)
Using lumberjack (1.0.3)
Using thor (0.18.1)
Using guard (1.8.0)
Using guard-compass (0.0.6)
Using multi_json (1.7.3)
Using guard-livereload (1.4.0)
Using guard-shell (0.5.1)
Using oily_png (1.1.0)
Using rb-fchange (0.0.6)
Using sass-globbing (1.0.0)
Using sassy-strings (0.3.1)
Using singularitygs (1.0.8)
Using susy (1.0.8)
Using toolkit (1.0.0)
Using bundler (1.3.5)
Your bundle is complete!
Use 'bundle show [gemname]' to see where a bundled gem is installed.

I am so sorry to post this one here but it seems that this is an active thread compared to this thread http://drupal.org/node/1910822.

fubhy’s picture

@caspercash: Please don't post the same comment on multiple different issues. It's annoying and it clutters the issue queue for no good reason.

Ok, the project I'm working on is a sandbox project. I've designed previously in the past with Omega (and previous to that it was Zen) and I've been wanting to learn SASS. So Omega 4s out-of-the-box integration gave me the motivation to start this small side project (it's a website for a friend). So with that in mind, I don't fully know what I'm doing yet with Compass.

When you say "compass compiler but can be imported into top-level stylesheets...cool tree-like structure for the project" I'm not totally sure what you mean. How would I implement that? Right now I've been putting everything in style.sass because I'm not clear how you use the other underscore files.

I did look through the compass documentation to see if there was anything that spoke to this, but unfortunately their documentation seems pretty sparse. So it sounds cool, but I would have no idea how to do what you're talking about...

Edit: I had another question about page templates but I figured it out already :-). So just the question about SASS.

Please take a look at http://thesassway.com/beginner/how-to-structure-a-sass-project

It's pretty similiar to what the Omega starterkits look like and explains why and how to work with it.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Anonymous’s picture

Issue summary: View changes

more info