Почетак рада са Сасс инсталацијом и основама

У овом посту ћемо расправљати о ЦСС Препроцессору званом Сасс или Синтацтицалли Авесоме Стилесхеетс.

Ако сте пратили наше претходне постове на МАЊИ, сигурни смо да сте упознати са ЦСС Препроцессор. И Сасс и ЛЕСС су ЦСС Препроцессори који првенствено проширују начин на који компонујемо обичан-статиц-ЦСС на динамичнији начин користећи програмске језике као што су Вариаблес, Микинс и Фунцтионс.

Инсталлинг Сасс

Пре него што саставимо Сасс морамо га инсталирати. Сасс је изграђен на Руби. Ако радите на Мацу, шансе су да сте већ инсталирали Руби. Ако можете инсталирати Руби у Виндовс, користите овај Руби Инсталлер.

Када се инсталација заврши, можете да одете на терминал (на Мац рачунару) или у командну линију (у оперативном систему Виндовс), а затим у њу унесите следећу командну линију:

Он Мац;

 судо гем инсталл сасс

У оперативном систему Виндовс;

 гем инсталл сасс

Ако инсталација успе, имаћете следеће обавештење у вашем Терминал / Цомманд Промпт.

Затим морамо да изаберемо који директоријум за Сасс да гледамо користећи следећу команду;

 сасс - путања стазе / сасс-директоријум

Командна линија изнад ће гледати сваки .сцсс/ \ Т.сасс филес ин путања / директоријум и кад год се једна од датотека у том директоријуму промени, Сасс ће ажурирати одговарајуће датотеке или креирати ако не постоји.

Ако нам је потребно да Сасс генерише фајлове у одређеном директоријуму, можемо то урадити на овај начин;

 сасс - путања стазе / сасс-директоријум: путања / цсс-директоријум

Можемо такође да гледамо одређену датотеку уместо директоријума, помоћу ове командне линије;

 сасс - путања стазе / сасс-дирецтори / стилес.цсс

Ако наредба за гледање успе, нешто као што је ово обавештење испод ће се појавити у вашем Терминал / Цомманд Промпт.

Додатна литература: Аутоматско компајлирање Сасс датотека са Сасс 3

Сасс Апплицатионс

Међутим, ако мрзите да радите преко Терминала или Цомманд Промпт-а, можете користити неке апликације за Сасс. Бесплатна опција је Сцоут; Израђен је на Адобе Аир-у тако да се може покренути на свим оперативним системима (Виндовс, ОСКС и Линук).

Међутим, ради веома споро, као што су неки раније пријавили.

Дакле, ако немате стрпљења за то, постоје и неке плаћене опције. Цијена варира за сваку апликацију, Цомпасс.апп иде за $ 10, Фире.апп, $ 14 и Цодекит за $ 25.

Означавање кода

Иако је Сасс примарно ЦСС проширење, ваш тренутни едитор можда неће исправно истакнути синтаксу. Срећом, већ постоје неки пакети за скоро сваки едитор кода који је омогућен .сасс или .сцсс означавање кода.

Ако радите са Сублиме Тект 2 као и ја, можете користити ове пакете; Сублиме Тект ХАМЛ & Сасс и Сублиме Тект 2 Сасс пакет, а за лакши начин, можете инсталирати један од ових пакета кроз контролу пакета.

За друге уређиваче кода, погледајте испод, или покушајте са Гооглингом.

Ово је одличан сцреенцаст водич о раду на Сасс-у са Дреамвеавер-ом
Сасс мод за Цода. Али, чини се да је овај режим интегрисан са Цодом од верзије 2
ТектМате Оффициал СЦСС Бундле
Еспрессо Сугар фор Сасс
ИнТипе Бундлес

Сасс Лангуаге

Сасс и ЛЕСС заправо дијеле неке заједничке језике, испод су неке од њих.

Променљиве

 $ цолор-басе: # 000; $ видтх: 100пк;

Једина разлика у односу на ЛЕСС варијабле је да је варијабла у Сассу дефинисана са а $ знак.

Правила гнијежђења

 хеадер ширина: 980пк; хеигхт: 80пк; нав ул лист-стиле: ноне; паддинг: ноне; маргин: ноне;  ли дисплаи: инлине; а тект-децоратион: ноне;

Микинс анд Фунцтионс

 @микин бордер-радиус ($ радиус) -моз-бордер-радиус: $ радиус; -вебкит-бордер-радиус: $ радиус; -мс-бордер-радиус: $ радиус; радијус границе: $ радијус;

Оператионс

 ли ширина: $ видтх / 5 - 10пк;

Условна изјава

 @иф лигхтнесс ($ цолор-басе)> = 51% бацкгроунд-цолор: # 333333;  @елсе бацкгроунд-цолор: #фффффф;

У ЛЕСС-у можете урадити сличну ствар преко Гуард израза, о чему смо говорили у овом водичу.

Финал Тхоугхт

И то је то. У следећем посту, почети ћемо истраживати Сассове језике и њеног пратиоца Цомпасс. Будите у току.