SASS przygotowanie środowiska i instalacja FireSass Opcje

[dkdnt]

Witam

Rozpoczynam swoją przygodę z sass, przygotowałem już prawie wszystko pod pracę z tym kodem instalacja Ruby, Sass, Compass, implementacja styli w notepad++ i zostało mi w rezultacie instalacja a właściwie włączenie dodatku do firefoxa FireSass i szczerze nie bardzo rozumiem w jaki sposób mam go włączyć.
Dodam, że mój angielski jest mizerny, ale staram się jak mogę i jakoś udało mi się uzyskać wcześniejsze informacje, ale nie wiem jak przygotować pozostałe rzeczy.

Na stronie dodatku jest taka instrukcja:
First, install FireSass from this page. Second, enable Sass's :debug_info option. If you're using Sass with a Ruby web framework, you probably want to set Sass::Plugin.options[:debug_info] = true. Add this to config/environment.rb in Rails, or config.ru (or wherever else configuration is specified) in other Ruby frameworks.

Zainstalowałem dodatek, ale nie wiem gdzie mam wpisać podane polecenia? Gdzie znajdę takie pliki environment.rb czy config.ru ? Pewnie to kwestia Ruby o którego istnieniu dowiedziałem się wczoraj;), lecz szczerze przyznam, że rozkładam ręce i nie ogarniam tego, a nie wyobrażam sobie pracy bez możliwości podglądu plików scss w przeglądarce...

Mógł by mi to ktoś jakoś łopatologicznie wytłumaczyć?

ps. gdyby udao mi się rozwiązać ten problem to opiszę to tutaj, także temat ciągle otwarty...

Z góry dzięki za pomoc!
pozdrawiam
dkdnt


--------------------------------------------

hehe
Chyba muszę się do tego przyzwyczaić, że jak sam sobie nie odpowiem na pytanie to nikt tego za mnie nie zrobi ...

info dla potomnych

Jeśli używasz compass po instalacji FireSass dodaj na końcu pliku projektu (plik z rozszerzeniem *.rb może mieć różną nazwę...) taki kod:

[PHP] pobierz, plaintext 
if environment != :production
    sass_options = {:debug_info => true}
end
[PHP] pobierz, plaintext 

Ja korzystam ze startowej skórki w drupalu w której taki projekt został już skonfigurowany czyli dołączony jest ten plik(*.rb) w Twoim przypadku możliwe, że musisz stworzyć nowy proj czyt. dokumentację compass. U mnie to byl config.rb.

następnie za pomocą konsoli (start>uruchom>cmd) uruchom sass(z dodatkowymi poleceniami) w katalogu projektu czyli tam gdzie jest plik .rb ...zrobisz to poleceniem:

[PHP] pobierz, plaintext 
sass --watch --compass --debug-info style.scss:style.css
[PHP] pobierz, plaintext 

żebyś się nie zdziwi ta komenda uzupełni css'a o dodatkowe info dla firebuga(ja próbowałem się tego pozbyć ) w postaci np:

[PHP] pobierz, plaintext 
@media -sass-debug-info{filename{font-family:file\:\/\/F\:\/xampp\/htdocs\/....styles\.scss}line{font-family:\0000345}}
[PHP] pobierz, plaintext 

ostatnią wersję edytowanego css trzeba poprostu wygenerować bez

[PHP] pobierz, plaintext 
--debug-info
[PHP] pobierz, plaintext 

W każdym bądź razie jak dodawane są te śmieci to w firebugu będziesz mial nr linii w plikach scss no i da się żyć

inne dostępne polecenia będziecie mieli po wpisaniu komendy: sass -h

życzę milej zabawy u mnie zaczyna robić się ciekawie:)

sorry za brak gdzieniegdzie malego Ł chyba skrót;) pozdro!

Ten post edytował dkdnt 21.01.2013, 23:19:54

[fizzlebubble]

Tak z ciekawości, dlaczego sass, a nie scss?

[dkdnt]

Tak z ciekawości, dlaczego sass, a nie scss?

Szczerze to ja jeszcze nie znam różnicy między sass a scss bawię się na plikach *.scss ...a zainteresowanie tym to totalny spontan w moim przypadku... skórka startowa, którą modyfikuję miała zaimplementowane arkusze w sass. Nie wiedziałem co to jest. Zacząłem czytać i stwierdziłem że fajne;) ... nie raz by się przydało...
Jeśli wiesz jaka jest różnica lub masz jakieś inne uwagi na ten temat to podziel się trochę

Wkurza mnie, że miałem sporo problemów z prawidłowym uruchomieniem tego wszystkiego... nawet dzisiaj wywalało mi błędy z powodu braku dostępu do plików na localu(?!?) coś robiłem nie tak.

Dla potomnych: Zadziałało po użyciu w folderze z *.rb komendy:

[PHP] pobierz, plaintext 
compass install compass
[PHP] pobierz, plaintext 

co dla mnie jest trochę dziwne, bo wcześniej instalowałem compass, chyba że to uruchamia compass w danym projekcie? nie wiem...
...a następnie:

[PHP] pobierz, plaintext 
compass watch
[PHP] pobierz, plaintext 

tylko teraz boję się to wyłączyć bo już w plecy jestem z projektem
ale style pisze się rewelacyjnie podoba mi się...

Ten post edytował dkdnt 22.01.2013, 23:14:43

[fizzlebubble]

Sass oparty jest na indentach, scss jest jego ewolucją i korzysta już z klamr jak w zwykłym cssie, lecz też pozwala zagnieżdżać. Osobiście polecałbym właśnie scss'a... . Do obsługi compassa używam Compass.app (koszt 50 zł) na Maca, ale z tego co się orientuję to na Windowsa też jest, w ostateczności Scout, z tym, że jest trochę zbugowany (kompilacja rgba, gubienie się przy większej ilości plików), ale na sam początek wystarczy.

[dkdnt]

Sass oparty jest na indentach, scss jest jego ewolucją i korzysta już z klamr jak w zwykłym cssie, lecz też pozwala zagnieżdżać. Osobiście polecałbym właśnie scss'a... .

Czyli zwykły Sass ma rozszerzenie *.sass a Scss *.scss czy obydwa mają takie samo rozszerzenie a różnią się jedynie składnią? Z tego co widzę pliki w *.scss w tej templatce mają klamry i kodując też ich używam(przyznam że bardzo mi to pasuje )

Do obsługi compassa używam Compass.app (koszt 50 zł) na Maca, ale z tego co się orientuję to na Windowsa też jest, w ostateczności Scout, z tym, że jest trochę zbugowany (kompilacja rgba, gubienie się przy większej ilości plików), ale na sam początek wystarczy.

i na czym polega obsługa tego Compass.app(na ile ją ułatwia ten programik) bo to jest chyba ta apka dostępna na stronie compass'a? ... będę musiał się tym zainteresować

Ten post edytował dkdnt 23.01.2013, 12:58:55

[fizzlebubble]

Pliki różnią się rozszerzeniem . Compass.app jak i Scout to nakładki graficzne na Compassa. Jeśli nie spędzasz "od 8 do 18" przy kodzie spokojnie wystarczy Ci Scout, który jest darmowy, w innym wypadku zainteresuj się Compass.app, który jest bardziej rozbudowany.

[dkdnt]

Pliki różnią się rozszerzeniem . Compass.app jak i Scout to nakładki graficzne na Compassa. Jeśli nie spędzasz "od 8 do 18" przy kodzie spokojnie wystarczy Ci Scout, który jest darmowy, w innym wypadku zainteresuj się Compass.app, który jest bardziej rozbudowany.

Dzięki za info dobry człowieku ... siedzę średnio 10h ale najpierw wypróbuję scout:) chociaż pewnie po jakimiś czasie przesiądę się na Compass.app

A mam jeszcze pytanie czy można tu stosować warunki jak np w php np:

[PHP] pobierz, plaintext 
if( .classa ){
 color:#fff;
}else{
 color:#000;
}
[PHP] pobierz, plaintext