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 (IMG:style_emoticons/default/wink.gif) 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 (IMG:style_emoticons/default/smile.gif)
Chyba muszę się do tego przyzwyczaić, że jak sam sobie nie odpowiem na pytanie to nikt tego za mnie nie zrobi (IMG:style_emoticons/default/wink.gif) ...

info dla potomnych (IMG:style_emoticons/default/wink.gif)

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ć(IMG:style_emoticons/default/wink.gif) ) 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ć(IMG:style_emoticons/default/smile.gif)

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 (IMG:style_emoticons/default/wink.gif) 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ę (IMG:style_emoticons/default/wink.gif)

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?(IMG:style_emoticons/default/questionmark.gif) 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 (IMG:style_emoticons/default/wink.gif)
ale style pisze się rewelacyjnie (IMG:style_emoticons/default/smile.gif) 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... (IMG:style_emoticons/default/smile.gif) . 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... (IMG:style_emoticons/default/smile.gif) .

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 (IMG:style_emoticons/default/smile.gif) )

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ć(IMG:style_emoticons/default/wink.gif)

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

[fizzlebubble]

Pliki różnią się rozszerzeniem (IMG:style_emoticons/default/smile.gif) . 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 (IMG:style_emoticons/default/smile.gif) . 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 (IMG:style_emoticons/default/smile.gif) ... 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