Едно от любимите ми предимства на използването на Sass е, че прави автоматизирането на работния процес на предния дизайн лек. Има много инструменти на JavaScript за работа с файлове и автоматизиране на други задачи, но вградените способности на Sass за смесване позволяват да се пише модулен код от предния край. В тази статия изброих десет от любимите ми комбинации на Sass за автоматизиране на писането на уеб стилове.

Това са миксовете на Sass, които използвам за почти всеки уеб проект, по който работя. В мрежата има много интересни статии с някои полезни комбинации от Sass. Има и няколко добри библиотеки за смесване на Sass, които са чудесни за по-малки задачи, като например Бърбън . Друга страхотна библиотека за миксини, от която изведох някои от миксините по-долу, е Анди .

Миксините, които ще разгледам в тази статия, се занимават със следното:

• Медийни заявки
• Цветни теми
• Центриращи елементи
• Clearfix
• Последователни размери на шрифта
• Преходи на анимация
• Изображения на ретината
• Бързи градиенти
• Външни шрифтове
• Бързо допълване / полета

Заявки за медии

Мултимедийните заявки ви позволяват лесно да добавяте персонализирани точки на прекъсване към вашите таблици със стилове и бързо да добавяте персонализирано отзивчиво поведение в даден елемент за различни точки на прекъсване. Обаче затрупването на медийни заявки в таблици със стилове може бързо да се превърне в причина за главоболие, особено когато става въпрос за поддържането им надолу. С миксовете на Sass всичко това може да се промени.

$breakpoint-small: 600px; $breakpoint-med-small: 960px; $breakpoint-med: 1175px; @mixin screen($size, $type: max, $pixels: $breakpoint-small) { @if $size == 'small' { @media screen and ($type + -width: $breakpoint-small) { @content; } } @else if $size == 'med-small' { @media screen and ($type + -width: $breakpoint-med-small) { @content; } } @else if $size == 'med' { @media screen and ($type + -width: $breakpoint-med) { @content; } } @else if $size == 'large' { @media screen and ($type + -width: $breakpoint-med) { @content; } } @else if $size == 'custom' { @media screen and ($type + -width: $pixels + px) { @content; } } @else { @content; } }

С тези дефинирани миксините могат да се използват, както следва:

.foo { @include screen(large) { width: 20%; } @include screen(med) { width: 40%; } @include screen(med-small) { width: 60%; } @include screen(small) { width: 80%; } @include screen(custom, max, 400) { width: 100%; } }

Той работи чудесно самостоятелно или с други мрежови рамки като Bootstrap .

Операторът if ще излъчи медийна заявка, настроена на определен размер на екрана в зависимост от името на размера, предоставено на миксина. Това ще ви позволи лесно да коригирате поведението на CSS атрибутите си съответно. Можете също така да персонализирате точката, в която искате да коригирате CSS атрибутите си. Обикновено най-отзивчивите оформления ще се придържат към 3 или 4 дефинирани размери на ширината на екрана, за да коригират съдържанието. Разликата в размерите на екрана, устройствата и приложенията винаги се разширява, но има популярна тенденция, която много уеб разработчици ще използват за своите оформления; малки размери на екрана за телефони, средни за таблети, големи за лаптопи и изключително големи за настолни компютри.

За справка, медийните точки, използвани в Bootstrap v3, са:

• максимална ширина: 767px (всеки екран с ширина до 767px)
• минимална ширина: 768px (всеки екран с широчина над 768px)
• мин. ширина: 992px (всеки екран с широчина над 992px)
• минимална ширина: 1200px (всеки екран с широчина над 1200px)

Цветови теми

Определянето на цветна тема, която да се използва в целия ви сайт, помага да се спести време от наличието на еднакви цветни части на CSS на едни и същи HTML елементи. Ако искате всичките ви div бутони да имат 1px плътна граница, тогава можете лесно да добавите това към вашата тема. Този микс на Sass ще ви позволи да зададете толкова цветни променливи, колкото искате, и да повлияете на толкова класове, колкото искате. Това може да бъде полезен инструмент за предоставяне на цветови опции за нещо или по всяко време, когато имате функция, която влияе върху цвета на много елементи едновременно. Има страхотна статия тук с повече информация за работа с цветни теми в Sass.

@mixin theme($name, $color) { // Define colors in your theme $primary: $color; $secondary: lighten(adjust-hue($color, 20), 10%); // Add your classes with css colors added .#{$name} { .element { color: $primary; } .other-element { background: $secondary; } } }

След като настроите дълбока цветна тема, ще премахнете 70% от свързания с цветовете стил, ако сте направили правилно. Също така бих препоръчал да отделите този .scss файл от другите си .scss файлове и да включите всички променливи на цветовете на вашата марка в същия файл.

Проста линия като:

@include theme(theme-banana, yellow);

ще излъчи:

.theme-banana .element { color: yellow; } .theme-banana .other-element { background: #bbff33; }

Центриращи елементи

В зависимост от оформлението ви има много различни начини за центриране на елемент в вашите стилове. Методът по-долу използва абсолютно позициониране и ще ви позволи да дефинирате вертикални, хоризонтални или и двете центрирани елементи. Родителският елемент ще трябва да има position: relative. Това ви позволява лесно да определите центрираната позиция на елемент в кратки 2 реда код.

@mixin center($position) { position: absolute; @if $position == 'vertical' { top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } @else if $position == 'horizontal' { left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translate(-50%); } @else if $position == 'both' { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } .foo { @include center(both); } .foo-parent { position: relative; }

Този миксин е един от най-гъвкавите начини за центриране на съдържанието, но си струва да се отбележи, че има много различни начини за центриране на съдържанието ви и това не винаги може да бъде най-доброто решение. В зависимост от стила на оформлението и надбавката за съвместимост с браузъра може да искате да центрирате съдържанието си по различен начин. Flexbox е друг популярен и много полезен инструмент за подравняване, въпреки че в момента не се поддържа изцяло от старите браузъри. Опростеното подравняване на текст и контейнер може да се направи лесно без този миксин, като се използват прости свойства на css. Това ще ви помогне повече при създаване на оформления и работа с контейнери вътре в други контейнери.

Clearfix

Прилагайте свойството clearfix css бързо и ефективно към елементи. Има много решения за ясни корекции в мрежата и това изглежда работи най-добре. Също така е лесен за използване, след като е създаден миксът Sass.

Този миксин ще бъде от полза, когато имате съдържание, плаващо надясно или наляво и искате да освободите пространството под плаващия елемент, за да вмъкнете ново съдържание отдолу.

%clearfix { *zoom: 1; &:before, &:after { content: ' '; display: table; } &:after { clear: both; } } .container-with-floated-children { @extend %clearfix; }

Последователни размери на шрифта

Задайте рем размер на шрифта във вашия документ, който да се използва за всички ваши текстови елементи. Това е по-добър начин за мащабиране на шрифтовете нагоре и надолу вместо em. Използването на em ще се комбинира въз основа на другите CSS атрибути, но rem ще се мащабира само нагоре или надолу въз основа на размера, който сте определили в своя HTML документ. Разделянето на .scss файл за цялата ви типография и използването на комбинацията по-долу за определяне на вашите размери на шрифта по подразбиране драстично ще автоматизира вашия работен процес за кодиране на типография.

@function calculateRem($size) { $remSize: $size / 16px; @return $remSize * 1rem; } @mixin font-size($size) { font-size: $size; font-size: calculateRem($size); } p { @include font-size(14px) }

Този миксин също създава резервен пиксел за браузъри, които не поддържат rem (IE8 и по-долу). Когато браузърът не поддържа преоразмеряване, mixin ще изчисли пикселния еквивалент на първоначалния размер на rem, който сте задали, и извежда както пикселни, така и rem стойности за елемент.

Анимация

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

@mixin keyframes($animation-name) { @-webkit-keyframes #{$animation-name} { @content; } @-moz-keyframes #{$animation-name} { @content; } @-ms-keyframes #{$animation-name} { @content; } @-o-keyframes #{$animation-name} { @content; } @keyframes #{$animation-name} { @content; } } @mixin animation($str) { -webkit-animation: #{$str}; -moz-animation: #{$str}; -ms-animation: #{$str}; -o-animation: #{$str}; animation: #{$str}; }

Първата част на миксина ще добави правилните префикси на доставчика, необходими за съвместимостта на браузъра. Следващият раздел го настройва за въвеждане на вашите персонализирани низове и свойства. Последният раздел на миксина е мястото, където бихте създали името си на миксин (в случая: изчезване) и дефинирате какво искате да се случи във всеки ключов кадър в анимацията. Тази примерна настройка е много елементарна и можете да добавяте промени към произволен процент от продължителността на анимацията.

// Define animation name, and properties @include keyframes(fade-out) { 0% { opacity: 1; } 90% { opacity: 0; } } // Add animation to element .element { width: 100px; height: 100px; background: black; @include animation('fade-out 5s 3'); }

Примерът тук ще вземе целевия елемент при 0% от анимацията (началото) и ще прехвърли свойството от пълна непрозрачност (непрозрачност: 1;) към липса на непрозрачност и по същество изчезваща (непрозрачност: 0;) при 90% от анимацията . Така че, ако задам анимацията да има 5 секундна времева линия, елементът ще изчезне след 4,5 секунди (90% от 5 секундната анимация). Последното свойство, което определям при използването на миксина („3“), е броят пъти, в които анимацията ще се повтори.

Изображения на ретината

Добавете изображения с висока разделителна способност към вашия сайт, с резервен вариант за устройства, които не показват изображения с висока разделителна способност. Когато използвам изображения на ретината, бих препоръчал да компресирате възможно най-много, без да унищожавате изображението. Добър инструмент за това е TinyPNG (поддържа PNG и JPG).

@mixin image-2x($image, $width, $height) { @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6/2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { background-image: url($image); background-size: $width $height; } }

Този миксин ще ви позволи да добавите правило на същото място като CSS свойството, определящо оригиналното изображение.

div.logo { background: url('logo.png') no-repeat; @include image-2x('logo2x.png', 100px, 25px); }

Преди това единственото CSS решение за това беше използването на медийни заявки и това решение е много по-чисто и лесно. За повече мисли и идеи за този миксин, вижте тази статия .

Бързи градиенти

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

@mixin background-gradient($start-color, $end-color, $orientation) { background: $start-color; @if $orientation == 'vertical' { background: -webkit-linear-gradient(top, $start-color, $end-color); background: linear-gradient(to bottom, $start-color, $end-color); } @else if $orientation == 'horizontal' { background: -webkit-linear-gradient(left, $start-color, $end-color); background: linear-gradient(to right, $start-color, $end-color); } @else { background: -webkit-radial-gradient(center, ellipse cover, $start-color, $end-color); background: radial-gradient(ellipse at center, $start-color, $end-color); } }

Вече няма да се налага да помните различните префикси на доставчици и подреждания на параметри за внедряване на градиенти.

.foo { @include background-gradient(red, black, 'vertical'); }

Външни шрифтове

Използвайки свойството CSS font-face, можем лесно да добавяме шрифтове в директория и да включваме всички типове шрифтове. Когато се използват файлове с шрифтове, различните браузъри имат различна съвместимост с типовете файлове. Този миксин помага да се реши това, като се използва всеки подходящ шрифтов файл в директория.

Просто включете всички файлове с шрифтове в директория и добавете маркера “@include” във вашите стилове, който ще вземе всички файлове от избраната от вас папка.

@mixin font-face($font-name, $file-name, $weight: normal, $style: normal) { @font-face { font-family: quote($font-name); src: url($file-name + '.eot'); src: url($file-name + '.eot?#iefix') format('embedded-opentype'), url($file-name + '.woff') format('woff'), url($file-name + '.ttf') format('truetype'), url($file-name + '.svg##{$font-name}') format('svg'); font-weight: $weight; font-style: $style; } }

Този миксин ще се погрижи да дефинира алтернативни URL адреси на формати на шрифтове, включително странни заобикалящи мерки, необходими за обратна съвместимост.

Бързо подплащане и полета

Основната причина, поради която използвам това, е, че ще пропусна конкретно свойство за подложка, като padding-left на моменти, и не искам да го дефинирам. Използвайки свойството Sass null, можете да пропуснете свойствата за подплата. Същите правила се прилагат за маржовете.

//Padding mixin @mixin padding($top, $right, $bottom, $left) { padding-top: $top; padding-right: $right; padding-bottom: $bottom; padding-left: $left; } //Margin mixin @mixin margin($top, $right, $bottom, $left) { margin-top: $top; margin-right: $right; margin-bottom: $bottom; margin-left: $left; }

След това смесването може да се използва за заместване на куп свойства за подплънки * и полета * във вашите таблици със стилове. Можете бързо да включите този миксин във всеки елемент и да дефинирате само страните на подплънките / полетата, които искате да включите. Попълването и полетата са един от най-използваните CSS стилове, добавени към елементите, и малък спестяващ време като този бързо ще се добави.

// Usage definition @include padding(top, right, bottom, left); @include margin(top, right, bottom, left); // Usage 1 @include padding(1px, 2px, 3px, 4px,); @include margin(1px, 2px, 3px, 4px); // Output 1 // padding: 1px 2px 3px 4px; // margin: 1px 2px 3px 4px; // Usage 2 (with null properties) @include padding(1px, null, 3px, 4px); @include margin(1px, 2px, null, 4px); // Output 2 // padding-top: 1px; // padding-bottom: 3px; // padding-left: 4px; // margin-top: 1px; // margin-right: 2px; // margin-left: 4px;

Увийте

Използването на комбинации на Sass като описаните в тази статия са чудесен начин да направите работния си процес по-ефективен. Тези конкретни комбинации ще ви помогнат да отделите по-малко време за общи уеб задачи, като ви дават повече време да се съсредоточите върху други аспекти на проекта, които изискват по-внимателна и квалифицирана проницателност .

Инсталирането и работата с Sass може да се извърши по различни начини и ще включва използването на командния ред за инсталиране на някои библиотеки във вашия проект. Един от начините да инсталирате Sass е да използвате Ruby - както е посочено на основния уебсайт на Sass тук - и друг популярен начин е да се използва Node.js .

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

Свързани: Ръководство за стил на Sass: Урок за Sass за това как да напишем по-добър CSS код