Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: SASS przygotowanie środowiska i instalacja FireSass
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
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 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 smile.gif
Chyba muszę się do tego przyzwyczaić, że jak sam sobie nie odpowiem na pytanie to nikt tego za mnie nie zrobi wink.gif...

info dla potomnych 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:

  1. if environment != :production
  2. sass_options = {:debug_info => true}


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:
  1. sass --watch --compass --debug-info style.scss:style.css


żebyś się nie zdziwi ta komenda uzupełni css'a o dodatkowe info dla firebuga(ja próbowałem się tego pozbyćwink.gif ) w postaci np:
  1. @media -sass-debug-info{filename{font-family:file\:\/\/F\:\/xampp\/htdocs\/....styles\.scss}line{font-family:\0000345}}


ostatnią wersję edytowanego css trzeba poprostu wygenerować bez
  1. --debug-info


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ć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!
fizzlebubble
Tak z ciekawości, dlaczego sass, a nie scss?
dkdnt
Cytat(fizzlebubble @ 22.01.2013, 15:36:26 ) *
Tak z ciekawości, dlaczego sass, a nie scss?


Szczerze to ja jeszcze nie znam różnicy między sass a scss 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ę 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:

  1. compass install compass


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

  1. compass watch


tylko teraz boję się to wyłączyć bo już w plecy jestem z projektem wink.gif
ale style pisze się rewelacyjnie smile.gif podoba mi się...
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... 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
Cytat(fizzlebubble @ 22.01.2013, 23:28:27 ) *
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... 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 smile.gif )

Cytat(fizzlebubble @ 22.01.2013, 23:28:27 ) *
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ćwink.gif
fizzlebubble
Pliki różnią się rozszerzeniem 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
Cytat(fizzlebubble @ 23.01.2013, 13:55:15 ) *
Pliki różnią się rozszerzeniem 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 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:

  1. if( .classa ){
  2. color:#fff;
  3. }else{
  4. color:#000;
  5. }
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.