CSS - SASS

[superyann418]

Hello,

For starters, I'm french. I installed OSclass which is really beautiful and really professional.
I have already installed and modified visually many script but I do not understand how to work with SASS.

I installed ruby and it says:

"Once You have Ruby installed, you can install by running Sass
gem install sass "

I do not understand .. There is no installation file for SASS ..

Anyway,

Is there any way davoir a normal style sheet rather than needing 4 software to change a simple stylesheet? (ruby, sass, node, git....)

thanks.

[lipchang]

I had the same question for the past few days....very confused.  I did this and it seemed to work fine.

I downloaded the older release of sass, which you can find by clicking on "Rubyforge" on the very bottom of this page:
http://sass-lang.com/download.html

Once it's downloaded, you can use the command: $gem install sass

But I get stuck on the very next step, when I type in sass --watch style.scss:style.css,
It returns the following error:
Sass is watching for changes. Press Ctrl+C to stop.
        error sass\main.scss (Line 5: File to import not found or unreadable: compass/utilities/color/contrast.

And I didn't see that file anywhere in my OSC 3.2.1 package.

Can anyone offer some help, thanks!!

[lipchang]

I have another question related to this topic, i.e., how to open up main.css and start editing some of the font-size.

I'm having problems following the instruction here:
http://doc.osclass.org/How_to_modify_Bender_theme

Where exactly do I type the command: npm install?

I tried it when I was here: C:\Users\My Comp Name\Desktop\osc 3.2.1> npm install
But then it returned a whole bunch of npm ERR! xxxxxxxx  lines

Is that not my OSClass root folder? I'm confused. Thanks for any advice!!

[strata]

Here the step :

• Downloa Ruby https://www.ruby-lang.org/
• After complete Run the istaller and install it under C:, eg. C:\Ruby
• Next step is open Command promt and navigate to ruby folder with command cd c:/ruby/bin
• under c:\ruby\bin promt test your ruby version by type ruby -v
• Ok after it, you can install the sass by type gem install sass, and wait until finish
• Next step after sass installed on your machine, you can start to modified the scss file
• Assumed your project on c:/xampp/htdocs/mysite, to edit the scss file on your theme you have to type under C:\Ruby\Bin >sass --watch c:\xampp\htdocs\mysite\oc-content\themes\yourthemename\css\main.scss:c:\xampp\htdocs\mysite\oc-content\themes\yourhemename\css\main.css and hit enter
• This will overwrite your main.css file

[lipchang]

Thanks strata for your clear explanation.

But after hitting Enter on your step 7, here's what I got:
Sass is watching for changes. Press Ctrl+C to stop.
        error sass\main.scss (Line 5: File to import not found or unreadable: compass/utilities/color/contrast.

Please see the attached picture. Thanks for any help.
I'm so stuck...

[strata]

It's mean you have to install compass, run it by type gem install compass and wait till finish, and you can find the contrast.scss at Ruby/lib/ruby/gems/2.0.0/gems/compass-0.1.2.2/framework/compass/stylesheets/compass/utilities/color/_contrast.scss

[lipchang]

Thanks strata.

I successfully installed compass by typing gem install compass under my OSClass root directory. And I did see the _contrast.scss file under the Ruby folder you indicated.

So what should I do next? I tried copying the _contrast.scss file to the C:/..../themes/bender/sass/  folder
and change Line 5 in the main.scss file to @import "contrast.scss";, instead of the original @import "compass/utilities/color/contrast.";. hoping that the file can now be found.

But then when I entered sass --watch sass\main.scss:css\main.css from C:\....\themes\bender>
I get a new error:
error sass/responsive/740.scss (Line 1: File to import not found or unreadable: responsive/header.scss.)
But when I look, the header.scss file is indeed there.  I'm very loss.... Thanks for your help. I tried to google this out but keep failing...
Am I doing all this right? Cuz I feel it shouldn't be this difficult.
Much appreciated!
 

[strata]

Ok try this,
1. Copy compass folder from c:/Ruby/bin/lib/.../compass and paste under sass folder on your theme
2. Edit 740.scss under responsive folder from

Code: [Select]

@import "responsive/header.scss";
@import "responsive/ui.scss";
@import "responsive/show-hide.scss";
@import "responsive/form.scss";
@import "responsive/list.scss";
@import "responsive/item.scss";
@import "responsive/structure.scss";
become

Code: [Select]

@import "header.scss";
@import "ui.scss";
@import "show-hide.scss";
@import "form.scss";
@import "list.scss";
@import "item.scss";
@import "structure.scss";
hope it solved your problem good luck

[lipchang]

strata, you are my hero!

Changing 740.scss the way you did solved the problem.

Thanks, I hope some day I can return your favor...

[strata]

Glad your problem solved, good luck for you 

[thedaigle]

Similar problems. But on mac osx.

Name:Ruby Name$ gem install sass
ERROR:  While executing gem ... (Gem::FilePermissionError)
    You don't have write permissions into the /Library/Ruby/Gems/1.8 directory.

I've changed permissions to read/write for every folder en route...library, ruby/gems/1.8, etc....
Please let me know what I'm doing wrong.

[strata]

Sorry I can't help because never use Mac 

[thedaigle]

Thanks for response anyway.

I have been able to change the css files myself, but it typically bogs down and then crashes after a few changes. I'd really like easier access to editing..just gotta figure it out.