publikuj:

wydrukuj

skomentuj »

TAGI: css , tips & tricks

2011-07-18 10:56 | Łukasz Nawrotek

Jak ułatwić sobie tworzenie arkuszy stylów z preprocesorem CSS Scaffold?

Czy istnieje możliwość rozszerzenia możliwości arkuszy stylów? Istnieje, a do tego kod będzie bardziej czytelny. To wszystko można osiągnąć dzięki Scaffold, czyli preprocesorowi CSS. Dzięki niemu do dyspozycji mamy m.in. zagnieżdżanie selektorów, wstawki i automatyczną kompresje plików CSS.

Instalacja

Scaffold jest napisany w PHP. By go uruchomić, na serwerze musimy posiadać PHP w wersji co najmniej 5.2. Pierwszym krokiem jest pobranie skryptu i umieszczenie całego katalogu scaffold w katalogu z naszymi plikami CSS. W przypadku niektórych serwerów musimy nadać atrybut 777 folderom cache oraz logs.

Zakładamy, że katalog z arkuszami stylów nosi nazwę css, nasz pliki CSS nazywa się natomiast style.css. Link do arkusza stylów będzie wyglądał następująco:

http://nasza_strona.pl/css/scaffold/parse.php?file=/css/style.css

By wstawić arkusz, wystarczy pomiędzy znaczniki <head>, </head> wkleić poniższy kod:

 <link href="css/scaffold/parse.php?file=/css/style.css" rel="stylesheet" type="text/css" />

Zagnieżdżanie kodu

Ta funkcja znacznie poprawia czytelność kodu - bez problemu widać, który element jest zależny od innego. Najprościej działanie zagnieżdżania kodu w Scaffold wytłumaczyć na przykładzie. Do naszego style.css wstawiamy kod:

#container{
color: black;
a:href{
color: red;
}
.box{
background: white;
}
}

Natomiast rzeczywisty kod CSS, który "zobaczy" przeglądarka, to:

#container{color:black}
#container a:href{color:red}
#container .box{background:white}

Sposób pisania kodu według powyższego przykładu jest szybszy i prostszy. Również w przypadku późniejszej edycji łatwiej znaleźć odpowiednie rzeczy w CSS. Zwrócony kod jest natomiast odpowiednio zoptymalizowany, dzięki czemu użytkownicy nie będą zmuszani do wczytywania dużych plików CSS.

Wstawki

Kolejna ciekawa opcja. Często dla wielu DIV-ów lub klas definiujemy np. takie samo obramowanie i kolor tła. Najczęściej po prostu powielamy stałe fragmenty kodu, problem pojawia się, gdy trzeba masowo zmienić wygląd elementów.

Oczywiście możemy korzystać z opcji "znajdź i zamień" w edytorze, jednak jest inne wyjście. Scaffold oferuje wstawki (ang. Mixins). Definiowanie takiej wstawki jest bardzo proste, np:

@mixin nazwa_wstawki{
color: red;border: 2px solid black;
}

By wywołać stworzoną wstawkę, wystarczy wstawić w dowolnym miejscu @include nazwa_wstawki;. Wstawiamy poniżej np. kod:

.box{
@include nazwa_wstawki;
}

Dzięki temu otrzymujemy:

.box{color:red;
border:2px solid black}

Wstawki z parametrem

Ta opcja umożliwia wstawienie stałego fragmentu kodu, jednak w tym przypadku mamy większy wpływ na wygląd kodu. Jeżeli np. na naszej stronie mamy wiele podobnych elementów, które różnią kolorem tła i obramowania, definiujemy wstawkę:

@mixin nazwa_wstawki2($kolor_obramowania,$tlo){
color: black;
border: 2px solid $kolor_obramowania;
background: $tlo;
margin: 20px;
}

Oprócz normalnego wywołania wstawki definiujemy również wygląd za pomocą parametrów, np.

.box{
@include nazwa_wstawki2(red,#CCC);
}

Dzięki temu kod będzie wyglądał następująco:

.box{color:black;
border:2px
solid red;
background:#CCC;
margin:20px}

Dodatkowo możemy zdefiniować domyślną wartość, np. kolor obramowania. Jeżeli nie użyjemy parametru, zostaną użyte domyślne ustawienia (w poniższym przypadku będzie to czerwone obramowanie).

@mixin nazwa_wstawki2($kolor_obramowania,$tlo=red){
color: black;
border: 2px solid $kolor_obramowania;
background: $tlo;
margin: 20px;
}

Podoba Ci się ten tekst? Powiedz o tym innym na Fb: lub na G+:

publikuj:

wydrukuj

skomentuj »

Popularne 7 dni 30 dni

Społeczność komentarze forum

Polecane książki

Praca

Czytaj Webhosting

Chcesz być na bieżąco z naszymi informacjami? Zapisz się na Newsletter.

Śledź nas:

Zarejestruj domenę

Sprawdź dostępność swojej domeny:

.pl:	0 zł		.com:	19.90 zł
.com.pl:	0 zł		.eu:	19.90 zł

Jak ułatwić sobie tworzenie arkuszy stylów z preprocesorem CSS Scaffold?

Instalacja

Zagnieżdżanie kodu

Wstawki

Wstawki z parametrem

Popularne 7 dni 30 dni

Społeczność komentarze forum

Polecane książki

Praca

Czytaj Webhosting

Zarejestruj domenę

Popularne:

Wideo:

Praktyka:

Społeczność:

Partnerzy:

Jak ułatwić sobie tworzenie arkuszy stylów z preprocesorem CSS Scaffold?

Instalacja

Zagnieżdżanie kodu

Wstawki

Wstawki z parametrem

Warto przeczytać

Jak dodać przyciski Spam oraz Usuń do komentarzy w Wordpressie?

Prefiksy zawiodły, czas na tokeny – kolejny pomysł na wyjście z CSS-owego bałaganu

Jak rozwiązać problem z prefiksami CSS? Nowy pomysł może uratować standardy

Nowa metoda zamiany obrazka. Koniec z -9999 px [CSS]

Popularne 7 dni 30 dni

Społeczność komentarze forum

Polecane książki

Praca

Czytaj Webhosting

Zarejestruj domenę

Popularne:

Wideo:

Praktyka:

Społeczność:

Partnerzy: