Препроцесори ЦСС упоредили Сасс вс. ЛЕСС
Постоји велики број ЦСС Препроцессор, ЛЕСС, Сасс, Стилус и Свитх ЦСС, само да наведемо неколико. ЦСС Препроцессор, као што смо већ рекли раније, првенствено је намијењено да ауторски ЦСС учини динамичнијим, организованијим и продуктивнијим. Али, питање је који од њих најбоље обавља посао?
Па, наравно, не бисмо погледали сваку од њих, већ ћемо упоредити само два од најпопуларнијих: Сасс и ЛЕСС. Да бисмо одлучили, упоредићемо ова два у седам фактора: онај који боље ради добија по један бод; у случају изједначености, оба ће бити награђена једним бодом.
Почнимо.
Инсталација
Почнимо са веома фундаменталним кораком, Инсталација. И Сасс и ЛЕСС су изграђене на различитој платформи, Сасс ради на Руби док је ЛЕСС ЈаваСцрипт библиотека (коју она и користи) био уствари и на Руби прво).
Сасс: Сассу је потребан Руби да би могао да ради, у Мац-у је ово унапред инсталирано, али у Виндовс-у вероватно морате да га инсталирате пре него што почнете да играте са Сасс-ом. Осим тога, Сасс треба да буде инсталиран преко терминала или командне линије. Постоји неколико ГУИ апликација које можете користити на свом месту, али нису бесплатне.
МАЊЕ: ЛЕСС је изграђен на ЈаваСцрипт-у, тако да инталлинг ЛЕСС је тако лако као повезивање ЈаваСцрипт библиотеке са ХТМЛ документом. Постоји и неколико ГУИ апликација које помажу у компајлирању ЛЕСС-а у ЦСС-у, а већина њих су бесплатне и добро се изводе (нпр. ВинЛесс и ЛЕСС.апп).
Закључак: ЛЕСС је очигледно на челу.
Ектенсионс
И Сасс и ЛЕСС имају проширења за бржи и лакши развој веба.
Сасс: У нашем последњем посту, разговарали смо о компасу, тренутном и популарном Сасс базираном проширењу. Компас има неколико Микинс-ова за писање ЦСС3 синтаксе за мање времена.
Међутим, Цомпасс је изван ЦСС3 Микинс-а, додао је и друге врло корисне функције као што су Хелперс, Лаиоут, Типограпхи, Грид Лаиоут и чак Сприте Имагес. Она има цонфиг.рб где можемо да контролишемо ЦСС излаз и неке друге поставке. Дакле, укратко, компас је све-у-једном пакет за развој веб-а са Сасс-ом.
ЛЕСС: ЛЕСС такође има неколико екстензија, али за разлику од компаса који има све што нам је потребно на једном месту, они су одвојени и сваки од њих је изграђен од стране различитих програмера. Ово неће бити проблем за искусне кориснике, али за оне који тек почињу са ЛЕСС-ом, потребно им је мало времена да изаберу праве екстензије које одговарају њиховом радном процесу.
Ево неколико ЛЕСС екстензија које ћете можда морати да укључите у свој пројекат:
- ЦСС3 Микинс: ЛЕСС Елементи, Пребоот, ЛЕСС Микинс.
- Грид: 960.гс, Фрамелесс, Семантиц.гс
- Лаиоут: Још мање
- Мисц: Твиттер Боотстрап
Закључак: Мислим да морамо да се сложимо да је Сасс и Цомпасс сјајан дуо и да је Сприте слика заиста шокантна, тако да је један бод за Сасса овде.
Лангуагес
Сваки ЦСС Препроцессор има свој језик и они су углавном уобичајени. На пример, и Сасс и ЛЕСС имају променљиве, али нема значајне разлике у њему, осим што Сасс дефинише променљиве са $ знак док ЛЕСС то ради са @ знак. И даље раде исту ствар: похраните константну вриједност.
У наставку ћемо испитати неке од најчешће коришћених језика у Сасс-у и ЛЕСС-у (на основу мог искуства).
Нестинг
Правило гнијежђења је добра пракса да се избјегава писање селектора више пута, а Сасс и ЛЕСС имају исти начин у правилима гнијежђења;
Сасс / Сцсс и ЛЕСС
нав маргин: 50пк ауто 0; видтх: 788пк; хеигхт: 45пк; ул паддинг: 0; маргин: 0;
Али Сасс / Сцсс узима овај метод корак даље допуштајући нам да гнијежемо појединачне особине, ево примјера:
нав маргин: 50пк ауто 0; видтх: 788пк; хеигхт: 45пк; ул паддинг: 0; маргин: 0; бордер: стиле: солид; лево: видтх: 4пк; цолор: # 333333; десно: видтх: 2пк; цолор: # 000000;
Овај код ће генерисати следећи излаз.
нав маргин: 50пк ауто 0; видтх: 788пк; хеигхт: 45пк; гранични стил: солид; бордер-лефт-видтх: 4пк; бордер-лефт-цолор: # 333333; бордер-ригхт-видтх: 2пк; бордер-ригхт-цолор: # 000000; нав ул паддинг: 0; маргин: 0;
Закључак: Гнијежђење појединачних својстава је лијеп додатак и сматра се најбоља пракса, посебно ако следимо принцип СУШИ (Не понављам се). Дакле, мислим да је јасно која је боља у овом случају.
Микинс и Селецтор Инхеританце
Миксови у Сасс и ЛЕСС дефинисани су мало другачије. У Сассу користимо@микин директива док је ЛЕСС дефинишемо са селектором класе. Ево примера:
Сасс / Сцсс
@микин бордер-радиус ($ валуес) бордер-радиус: $ валуес; нав маргин: 50пк ауто 0; видтх: 788пк; хеигхт: 45пк; @инцлуде бордер-радиус (10пк);
ЛЕСС
.бордер (@радиус) бордер-радиус: @радиус; нав маргин: 50пк ауто 0; видтх: 788пк; хеигхт: 45пк; .бордер (10пк);
Микинс, у Сасс и ЛЕСС, је навикнут инцлуде својства из једног скупа правила на други скуп правила. У Сассу, овај метод се даље узима Селецтор Инхеританце. Концепт је идентичан, али уместо копирања целих својстава, Сасс ће проширити или груписати селекторе који имају иста својства и вредности користећи @проширити директива.
Погледајте овај пример испод:
.круг бордер: 1пк солид #ццц; радијус: 50пк; оверфлов: хидден; .аватар @ектенд .цирцле;
Овај код ће резултирати као;
.цирцле, .аватар бордер: 1пк солид #ццц; радијус: 50пк; оверфлов: хидден;
Закључак: Сасс је један корак испред различитих Микинс и Селецторс Инхеританце.
Оператионс
И Сасс и ЛЕСС могу обављати основне математичке операције, али понекад враћају различите резултате. Погледајте како изводе овај насумични прорачун:
Сасс / Сцсс
$ маргин: 10пк; див маргин: $ маргин - 10%; / * Грешка у синтакси: Некомпатибилне јединице: '%' и 'пк' * /
ЛЕСС
@маргин: 10пк; див маргин: @маргин - 10%; / * = 0пк * /
ЗакључакСасс, у овом случају, ради то прецизније; пошто% и пк нису еквивалентни, требало би да врати грешку. Иако, ја се заправо надам да то може бити нешто слично 10пк - 10% = 9пк.
Обавештења о грешкама
Обавештење о грешкама је важно да видите шта радимо погрешно. Замислите хиљаде линија кода и малу грешку негде у хаосу. Јасна обавештење о грешци ће бити најбољи начин да се проблем открије брзо.
Сасс: У овом примјеру користим само Цомманд Промпт за покретање компајлера. Сасс ће генерисати обавештење о грешци кад год је код неважећи. У овом случају уклонићемо једну тачку са зарезом на линији 6, и то би требало да се окрене грешци. Погледајте слику испод.
Када сам први пут видео ово обавештење, тешко да сам могао да га разумем. Такође, чини се да је Сасс незнатно на месту где је грешка. Речено је да је грешка укључена лине 7, уместо 6.
ЛЕСС: Са истим сценаријем грешке, ЛЕСС обавештење је боље представљено и чини се да је прецизније. Погледајте ову слику екрана:
Закључак: ЛЕСС доноси боље искуство у вези с тим и осваја руке.
Документација
Документација је веома битан део сваког производа; чак и искусни програмери тешко би могли радити ствари без њих Документација.
Сасс: Ако погледамо документацију на званичном сајту, ја, лично, осећам се као да сам усред библиотеке, документација је веома свеобухватна. Ипак, изглед и осећај, ако је то важно за вас, није мотивационо за читање, плус позадина је обична бела.
Презентација је много више као В3 документација или ВикиПедиа. Не знам да ли је то стандард приказивања документације на Интернету, али то није једини начин.
ЛЕСС: С друге стране, ЛЕСС документација је јаснија без превише текстуалних објашњења, и она се баца директно у примјере. Такође има добру типографију и бољу схему боја. Мислим да је због тога ЛЕСС привукао моју пажњу на прво мјесто и ја то могу брже научити због изгледа и презентације документације.
Закључак: Документација ЛЕСС документације је боља, иако Сасс има свеобухватнију документацију, тако да мислим да ово можемо назвати краватом.
Финал Тхоугхт
Мислим да је то јасан закључак Сасс је бољи са укупним резултатом 5 наспрам 3 фор ЛЕСС. Међутим, то не значи да је ЛЕСС лош; само требају бити бољи. На крају, ипак је на одлуци крајњег корисника да изабере претпроцесор по свом избору. Било да је Сасс или ЛЕСС, све док су удобне и продуктивније, онда је то победник у њиховој листи.
На крају, ако имате нешто на уму о овој теми, слободно је подијелите у оквиру за коментаре испод.
