kurs – webroad.pl

#6 SASS + Compass: Rytm pionowy

27 września 2013 / Michał Załęcki

Dostępne jest aż 6 części kursu SASS + Compass.
Dostęp do wszystkich znajdziesz na webroad.pl/tag/SASS.

Dzisiaj skupmy się nad tym jak stworzyć rytm pionowy za pomocą Compass. Zacznijmy od tego czym tak naprawdę jest rytm pionowy (ang. vertical rhythm). Rytm pionowy jest to prawidłowość w ustaleniu rozmiaru odstępów, skutkująca uporządkowanym i przemyślanym rozmieszczeniem elementów witryny, głównie tekstu, w pionie.

Richard Rutter w 2006 roku opublikował artykuł „Compose to a Vertical Rhythm”, w którym dosadnie wytłumaczył podstawy tej techniki. Pokaże Wam jak za pomocą Compass zmienić prostą i pozornie uporządkowaną witrynę taka jak ta:

Continue reading #6 SASS + Compass: Rytm pionowy

Tagi: compass • kurs • sass

#5 SASS + Compass: Compass początki

7 września 2013 / Michał Załęcki

Dostępne jest aż 6 części kursu SASS + Compass.
Dostęp do wszystkich znajdziesz na webroad.pl/tag/SASS.

Jak już pewnie wspomniałem w poprzednich wpisach tej serii Compass jest frameworkiem SASS. Dzisiaj zajmiemy się zdobyciem fundamentalnej wiedzy na jego temat tak aby później móc w pełni wykorzystać jego możliwości. Compass możemy podzielić na kilka części zawierających różne elementy, są to:

CSS3
Funkcje Pomocnicze
Layout
Reset
Typografia
Utilities (różne wstawki niepasujące do innych kategorii)

Importowanie Compass

By móc używać frameworku należy najpierw zaimportować go do naszego projektu za pomocą poniższego kodu, który najlepiej umieścić na samym początku pliku.

@import "compass";

1	@import "compass";

Kod ten sam w sobie nie powoduje żadnych zmian w wygenerowanym pliku CSS, ale daje dostęp do całej funkcjonalności Compass. Jeżeli zależy nam tylko na określonym elemencie, nie musimy importować całego frameworka. Poniższy kod powoduję dostęp do funkcjonalności zaokrąglania rogów, która znajduje się w części dotyczącej CSS3.

@import "compass/css3/border-radius"

1	@import "compass/css3/border-radius"

Instalacja pluginów

Instalacja pluginów do Compass jest banalna dzięki rubygems. Jeżeli ktoś preferuję normalize.css zamiast, używanego standardowo w Compass, reset 2.0 Erica Meyersa może zainstalować compass-normalize-plugin i używać normalize.css z SASS w bardzo wygodny sposób. Po instalacji za pomocą komendy.

$ gem install compass-normalize-plugin

1	$ gem install compass-normalize-plugin

Należy dodać jeszcze jedną linijkę w config.rb.

require 'normalize'

1	require 'normalize'

W samym pliku SASS trzeba już tylko zaimportować plugin i skorzystać z dostarczonej przez niego wstawki.

@import "normalize";
@include normalize;

1 2	@import "normalize"; @include normalize;

Bogactwo funkcji i wstawek

Po zaimportowaniu Compass do swojego projektu masz dostęp do ogromnej ilości funkcji i wstawek. Omówienie ich wszystkich nie ma większego sensu, na stronie dokumentacji Compass znajdziesz wszystkie potrzebne informacje, które zostały podzielone na mniejsze podzbiory powiązane ze sobą pod względem funkcjonalności. Dokumentacja ta jest napisana prostym językiem i poparta przykładami, jeżeli jednak coś nadal pozostawałoby niejasne napisz o tym w komentarzach lub na forum.

Compass, czyli jak zapomnieć o prefiksach

Używając Compass nie musimy już pamiętać o prefiksach, dla różnych silników przeglądarek internetowych, wystarczy, że używamy wstawek dedykowanych dla konkretnych funkcjonalności. Za przykład posłuży nam wstawka border-radius.

.round {
  @include border-radius(50%);
}

.round {

@include border-radius(50%);

}

.round {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}

.round {

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

-ms-border-radius: 50%;

-o-border-radius: 50%;

border-radius: 50%;

}

Podsumowanie

W tym miejscu można zadać sobie pytanie czy to już nie koniec tej serii wpisów, skoro dokumentacja Compass jest tak przyjazna. Bynajmniej. Pozostało jeszcze kilka zagadnień, które wymagają szerszego omówienia i nie da się ich zrealizować za pomocą jednej czy dwóch wstawek albo funkcji. Właśnie dlatego kolejny wpis serii poświęcę Vertical Rhythm.

Przydatne linki

Tagi: compass • kurs • sass

#4 SASS + Compass: sterowanie przepływem

31 sierpnia 2013 / Michał Załęcki

Dostępne jest aż 6 części kursu SASS + Compass.
Dostęp do wszystkich znajdziesz na webroad.pl/tag/SASS.

Jak nie trudno zauważyć SASS czerpie z języków programowania choć sam oczywiście nim nie jest, nie mniej jednak nie zabrakło instrukcji sterowania przepływem i właśnie na nich dzisiaj się skupię. Zgodnie z dokumentacją SASS instrukcje te nie zostały zaimplementowane po to by używać ich w „day-to-day styling”, a w funkcjach czy w wstawkach lub różnych bibliotekach by uczynić je bardziej elastycznymi. Nie wyklucza to oczywiście ich użycia w „zwykłym” kodzie, to jak zostaną wykorzystane zależy już od preferencji developera. Dzisiaj nie będę omawiał dokładnie działania instrukcji sterowania przepływem, zakładam, że ich idea i działanie jest już Ci znane z któregoś języka programowania, choćby JavaScript, PHP czy C, skupie się na ich konstrukcji.

Instrukcja warunkowa

Instrukcja warunkowa, jako jedna z najbardziej popularnych konstrukcji sterowania przepływem otwiera dzisiejsze zestawienie. Tutaj bez niespodzianek, ot taki prosty przykład.

$endable-baseline-bg: true;

$body-bg-color: navy; //ciemny niebieski (#000080)

body {
  @if $endable-baseline-bg { background-image: url('/img/bl.png'); }

  background-color: $body-bg-color;

  //lightness(color) zwraca jasność koloru w procentach
  @if lightness($body-bg-color) > 50%
  {
    //dla jasnego tła czarny kolor
    color: black;
  }
  @else
  {
    //dla ciemnego tła biały kolor
    color: white;
  }
}

$endable-baseline-bg: true;

$body-bg-color: navy; //ciemny niebieski (#000080)

body {

@if $endable-baseline-bg { background-image: url('/img/bl.png'); }

background-color: $body-bg-color;

//lightness(color) zwraca jasność koloru w procentach

@if lightness($body-bg-color) > 50%

{

//dla jasnego tła czarny kolor

color: black;

}

@else

{

//dla ciemnego tła biały kolor

color: white;

}

/* line 5, ../sass/if.scss */
body {
  background-image: url("/img/bl.png");
  background-color: navy;
  color: white;
}

/* line 5, ../sass/if.scss */

body {

background-color: navy;

color: white;

}

Można też łączyć konstrukcje instrukcje warunkowe w bloki else if, przykład z dokumentacji:

Pętla FOR

Trzeba przyznać, że pętla for wygląda w SASS dość oryginalnie. Jak na pętle for przystało musimy podać pierwszą i ostatnią wartość jakie przyjmie (bądź do której dojdzie) zmienna iteracyjna. W SASS mamy dwa typy pętli for. Ze słowem kluczowym through i to. W przypadku tego ostatniego zmienna iteracyjna nie osiąga ostatniej wartości.

@for $i from 0 through 2 {
  .mb-#{$i*10} { margin-bottom: 10px * $i; }
}

@for $i from 0 to 2 {
  .mt-#{$i*10} { margin-top: 10px * $i; }
}

@for $i from 0 through 2 {

.mb-#{$i*10} { margin-bottom: 10px * $i; }

}

@for $i from 0 to 2 {

.mt-#{$i*10} { margin-top: 10px * $i; }

}

/* line 2, ../sass/for.scss */
.mb-0 {
  margin-bottom: 0px;
}

/* line 2, ../sass/for.scss */
.mb-10 {
  margin-bottom: 10px;
}

/* line 2, ../sass/for.scss */
.mb-20 {
  margin-bottom: 20px;
}

/* line 6, ../sass/for.scss */
.mt-0 {
  margin-top: 0px;
}

/* line 6, ../sass/for.scss */
.mt-10 {
  margin-top: 10px;
}

/* line 2, ../sass/for.scss */

.mb-0 {

margin-bottom: 0px;

}

/* line 2, ../sass/for.scss */

.mb-10 {

margin-bottom: 10px;

}

/* line 2, ../sass/for.scss */

.mb-20 {

margin-bottom: 20px;

}

/* line 6, ../sass/for.scss */

.mt-0 {

margin-top: 0px;

}

/* line 6, ../sass/for.scss */

.mt-10 {

margin-top: 10px;

}

Pętla EACH

Pętla each działa na zbiorze elementów. Zbiór ten może zostać stworzony przed pętlą i przypisany zmiennej lub w samej pętli each.

@each $icon in facebook, gplus, twitter {
  .icon-#{$icon} {
    background-image: url('/img/icon/#{$icon}.png');
  }
}

$vehicles: (car, plane, bike);

@each $icon in $vehicles {
  .icon-#{$icon} {
    background-image: url('/img/icon/#{$icon}.png');
  }
}

@each $icon in facebook, gplus, twitter {

.icon-#{$icon} {

}

$vehicles: (car, plane, bike);

@each $icon in $vehicles {

.icon-#{$icon} {

}

/* line 2, ../sass/each.scss */
.icon-facebook {
  background-image: url("/img/icon/facebook.png");
}

/* line 2, ../sass/each.scss */
.icon-gplus {
  background-image: url("/img/icon/gplus.png");
}

/* line 2, ../sass/each.scss */
.icon-twitter {
  background-image: url("/img/icon/twitter.png");
}

/* line 10, ../sass/each.scss */
.icon-car {
  background-image: url("/img/icon/car.png");
}

/* line 10, ../sass/each.scss */
.icon-plane {
  background-image: url("/img/icon/plane.png");
}

/* line 10, ../sass/each.scss */
.icon-bike {
  background-image: url("/img/icon/bike.png");
}

/* line 2, ../sass/each.scss */

.icon-facebook {

}

/* line 2, ../sass/each.scss */

.icon-gplus {

}

/* line 2, ../sass/each.scss */

.icon-twitter {

}

/* line 10, ../sass/each.scss */

.icon-car {

}

/* line 10, ../sass/each.scss */

.icon-plane {

}

/* line 10, ../sass/each.scss */

.icon-bike {

}

Pętla WHILE

Pętla while będzie wykonywać się tak długo jak wyrażenie będzie zwracać prawdę. Konstrukcja ta zapewnia nam bardziej kompleksową kontrolę nad zmienną iteracyjną niż pętla for.

$i: 10;
@while $i >= 0 {
  .p-#{$i*10} { padding: 10px * $i; }
  $i: $i - 2;
}

/* line 3, ../sass/while.scss */
.p-100 {
  padding: 100px;
}

/* line 3, ../sass/while.scss */
.p-80 {
  padding: 80px;
}

/* line 3, ../sass/while.scss */
.p-60 {
  padding: 60px;
}

/* line 3, ../sass/while.scss */
.p-40 {
  padding: 40px;
}

/* line 3, ../sass/while.scss */
.p-20 {
  padding: 20px;
}

/* line 3, ../sass/while.scss */
.p-0 {
  padding: 0px;
}

$i: 10;

@while $i >= 0 {

.p-#{$i*10} { padding: 10px * $i; }

$i: $i - 2;

}