Публикации с етикет “scss”

Няколко интересни видеа за SASS >> това има общо с CSS :))

Публикувано в xHTML/CSS на 05.04.2011 5 Коментара »

Зравейте приятели,

преди няколко дни попаднах на нещо което ми се видя яко. Както може би сте разбрали от заглавиeтo на материала то се казва SASS. За да ви разкажа на кратко какво е SASS мисля, да изплагиaтствам малко информация от официалния сайт.

Sass прави писането на CSS яко … отново :)) . Sass е CSS3 решението ,което ви  добавя вложени правила, променливи, миксини, наследяване на селектори и тнт.

SASS има 2 синтаксиса .scss и .sass. Ако ви е станало интересно не губете време и се заровете из сайта, ако ли не вижте едно просто примерче, изгледайте клипчетата и тогава решавайте какво ще правите :)

Примерът

Представете си, че работите по голям проект в случая сайт на който трябва да поддържате CSS кода и там на много места, различни места използвате едни и същи цветове. Да кажем, че това са някакви фирмени цветове.

Картинката е много позната. И понякога доста болезнена :) Та какво правите:

  1. Копирате хексовете
  2. Копирате хексовете
  3. Копирате хексовете

Яко! Всъщност в това няма нищо лошо, все пак CSS работи така няма променливи няма константи, плюс това по този проект работя само аз, зная как си мажа и няма проблем. Но май все пак ще е хубаво да стане по някакъв по-културен начин.

Ето тук ви идва на помощ SASS:

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color:
    darken($blue, 9%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

А, как е ?! :)) Нещата май започнаха да придобиват някакъв по приличен вид. Хайде да не губя повече времето ви, направо пускайте видеата :).

Видеото

YouTube Preview Image YouTube Preview Image YouTube Preview Image

Видео уроците са изплагиатствани от ТУК

Надявам се да съм бил полезен :)