Как да започнем със Sass

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

как би изглеждала мона лиза днес

В този урок ще създаваме социални икони с помощта на цикли, комбинации и функции на Sass. Ще използваме и мощното влагане, налично в Sass.



Ще създадем списък в Sass, за да генерираме нашите социални икони, който ще се състои първо от името на класа, референтния шрифт и цвета - а по-късно и подсказката.



И ние ще използваме комбинации за създаване на многократно използвани медийни заявки и създаване на функция за превръщане на стойност на пиксела в стойност em. За да направим това, ние също ще създадем променлива за нашия основен размер на шрифта.

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



За да се възползвате истински от силата на Sass и да не се вкарате в бъркотия от специфичност и сложност, е необходимо солидно разбиране на CSS. Конкретният вкус на Sass, който ще използваме, е SCSS (Sassy CSS), което означава, че все още ще използваме къдравите скоби {} в нашия код на Sass.

Вземете файловете с уроци

За да изтеглите примерните файлове за този урок, отидете на FileSilo , изберете Безплатни неща и Безплатно съдържание до урока. Забележка: За първи път потребителите ще трябва да се регистрират, за да използват FileSilo.



01. Настройте вашия CodePen CSS

Правилната настройка на вашия CodePen CSS е ключова

Правилната настройка на вашия CodePen CSS е ключова

Първото нещо, което трябва да направим, е създайте нова писалка и променете някои от настройките по подразбиране за CSS редактора в CodePen. Ще сменим CSS Preprocessor на SCSS и ще включим Normalize и Autoprefixer.

02. Започнете да пишете някакъв код

Сега сме настроили всичко, което можем да започнем да пишем някакъв код. Вътре в HTML редактора ще създадем контейнер и редица елементи вътре, съдържащи връзката и иконата за всяка от нашите икони.

Използваните тук имена ще бъдат използвани в нашия списък на Sass като справка в CSS. Също така ще използваме конвенцията за именуване BEM за имената на нашите класове.

...

03. Задайте основни стилове

Преминавайки към редактора на CSS, ще започнем с включване на страхотен шрифт, задаване на променлива за нашия основен размер на шрифта и някои основни стилове за страницата.

@import url(http://srt.lt/w8yT8); // Variables $base-font-size: 16px; // Basic Styling body { font-size: $base-font-size; ... }

04. Създайте основна функция

След това ще създадем основна функция за превръщане на стойността на пиксела в стойност em чрез нашата променлива '$ base-font-size'.

Функциите в Sass се създават с помощта на „@function“, последвано от името на функцията и входа, използван за изпълнение на функцията.

След това вътре в декларацията използваме '@return', за да изведем стойността, когато използваме функцията. Използва се „# {}“ около изчислението интерполация .

// Functions @function px-to-em($pixels) { @return #{$pixels/$base-font-size}em; }

05. Правете миксини

Продължавайки с нашата настройка, ние ще създадем комбинации за прости мобилни медийни заявки, използвайки нашата функция 'px-to-em', която ще предадем в px стойност, за да върнем em стойност.

Mixins се създават с помощта на '@mixin', последвано от име за mixin. След това вътре в декларацията използваме '@content', за да изведем кода, който сме поставили вътре в миксина, когато го извикаме по-късно в нашата кодова база.

@mixin viewport--large { @media only screen and (min-width: px-to-em(1680px)) { @content; } } @mixin viewport--medium { @media only screen and (min-width: px-to-em(1080px)) { @content; } }

06. Създайте списък на Sass

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

Вътре в променливата ще дефинираме името на класа, стойността на unicode и цвета за всяка икона, като ги разделяме със запетая, в скоби.

научно-фантастична таблица за сравнение на размера на кораба
$icon-list: ( vimeo “f27d' #1ab7ea, twitter “f099' #1da1f2, ... github “f113' #333, rss “f09e' #f26522 );

07. Показвайте иконите си подред

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

.social__item { display: inline-block; margin-right: 0.05em; }

08. Създайте споделен стил на икона

За да сведем до минимум количеството CSS, което извеждаме, ще използваме CSS3 селектор, за да намерим всички класове, започващи с „икона“ и да създадем споделен стил за тях.

[class^='icon'] { font-family: 'FontAwesome'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

09. Оформете фона на бутоните

Използвайки същия метод, ще направим същото за бутоните, определящи нашите стойности в 'em', което ни позволява по-късно да ги преоразмеряваме с помощта на контейнера.

[class^='social__icon'] { font-size: 1em; width: 2em; height: 2em; background-color: #333; color: white; text-decoration: none; border-radius: 100%; text-align: center; display: flex; align-items: center; justify-content: center; }

10. @each цикъл за нашите икони

Използвахме нашия цикъл, за да генерираме иконите за всяка от нашите социални икони

Използвахме нашия цикъл, за да генерираме иконите за всяка от нашите социални икони

Сега имаме всички основни стилове, за да можем да използваме нашия списък, за да генерираме CSS, специфичен за всяка икона.

За да създадем цикъл в Sass, използваме „@each“, последвано от имена за всяка стойност на всеки елемент - „$ icon“, „$ unicode“ и „$ icon-background“ - последвано от думата „in“ и след това името от списъка.

Вътре в цикъла ще приложим стойността „$ unicode“ към псевдоелемента „before“ на всяка икона, която сме създали в HTML, позволявайки на споделения стил, който създадохме по-рано, да се грижи за всички останали необходими стилове.

@each $icon, $unicode, $icon-background in $icon-list { .icon--#{$icon} { &::before { content: $unicode; } } }

11. @each цикъл за нашите цветове на фона

Добавихме цветовете на фона, както и иконите към нашите

как да направя цифрово фен изкуство
Добавихме цветовете на фона, както и иконите към нашия цикъл „@each“

Иконите вече работят, но все още имаме резервен цвят на фона. Ще добавим още малко код към нашия списък, за да поправим това. Използвайки същия метод, както по-горе, ще изведем името „$ icon“, но този път в класовете „social__icon“ и вътре в този цвят „$ icon-background“.

@each $icon, $unicode, $icon-background in $icon-list { ... .social__icon--#{$icon} { background-color: $icon-background; } }

12. Използвайте миксините

Използвайки нашите миксини ние

Използвайки нашите комбинации, ние актуализирахме размера на шрифта на контейнера, за да променим размера на иконите в зависимост от ширината на прозореца

Използвайки миксините, които създадохме по-рано и тъй като стилизирахме иконите, използвайки стойности 'em', можем да приложим размер на шрифта към контейнера и да го увеличим, като използваме нашия миксин за заявки за смесване, използвайки '@include' и името на миксина, последвано от код, който искаме да включим в медийната заявка.

.social__container { font-size: 1em; @include viewport--medium { font-size: 1.5em; } @include viewport--large { font-size: 2em; } }

13. Добавете състояния на взаимодействие и вградени функции

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

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

icon--#{$icon} { background-color: $icon-background; &:hover, &:focus, &:active { background-color: mix(black, $icon-background, 15%); } }

14. Преход на цвета на фона

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

[class^='social__icon'] { ... transition: background-color 150ms ease-in-out ; }

15. Добавете допълнителни преходни ефекти

Чрез добавяне на 'относително' позициониране към бутоните и най-висока стойност и добавяне на 'top' към нашето свойство 'преход', ние можем да подготвим елементите за по-нататъшно взаимодействие.

[class^='social__icon'] { position: relative; top: 0; ... transition: background-color 150ms ease-in-out, top 250ms linear ; }

16. Преместете бутоните нагоре при взаимодействие

За това взаимодействие не е необходимо нищо конкретно за създаването му, поради което можем да добавим кода към споделения клас. Чрез прилагане на отрицателна горна стойност и премахване на контурите имаме още по-ясна визуална реплика на взаимодействие.

[class^='social__icon'] { ... &:hover, &:focus, &:active { outline: none; top: -0.25em; } }

17. Добавете падаща сянка

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

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

Също така можем да използваме същия метод, за да създадем и анимираме „кутия-сянка“ - добавяйки малко повече дълбочина към взаимодействието - променяйки вертикалната височина на сянката едновременно с горната стойност.

box-shadow: 0 0 0.25em -0.25em rgba(0,0,0,0.2); &:hover, &:focus, &:active { ... box-shadow: 0 0.5em 0.25em -0.25em rgba(0,0,0,0.3); }

18. Добавете подсказки

Можем лесно да добавяме подсказки с CSS, за да добавим допълнителна яснота за нашите потребители. Първото нещо, което ще направим, е да добавим стойността на подсказката към списъка. Не забравяйте да ги напишете в кавички, за да позволите използването на интервали, ако е необходимо.

$icon-list: ( vimeo “Vimeo' “f27d' #1ab7ea, twitter “Twitter' “f099' #1da1f2, ... github “GitHub' “f113' #333, rss “RSS' “f09e' #f26522, );

19. Променете цикъла @each

Поради добавянето към нашия списък ще трябва да модифицираме нашия цикъл „@each“, за да включим стойността на подсказката („$ name“). След това можем да изведем това име като съдържание на елемента 'before pseudo' на нашите бутони.

как да направя всички снимки във facebook частни -
@each $icon, $name, $unicode, $icon-background in $icon-list { ... .social__icon--#{$icon} { ... &::before { content: '#{$name}'; } } }

20. Оформете псевдо елемента before

Ние

Добавихме някои основни стилове към подсказките отново, като добавихме преходи, за да ги анимираме на място

Сега имаме името на всеки елемент, показан на екрана, от който се нуждаем, за да стилизираме елемента, като добавим цвят на фона, подложки и други елементи за стилизиране - както и позиционираме елемента и го подготвяме за преходи и променяме непрозрачността и горните стойности при взаимодействие .

&::before { ... top: -3.5em; opacity: 0; transition: top 250ms linear, opacity 150ms linear 150ms; } &:hover, ... { ... &::before { opacity: 1; top: -2.5em; } }

21. Оформете псевдо елемента after

Ние ще използваме CSS триъгълници за да създадем дъното на нашите подсказки - отново позиционирайки елемента, подготвящ го за преходи - чрез прехвърляне на непрозрачността и горните стойности при различни времена.

Чрез добавяне на забавяне получаваме анимация, състояща се от избледняване на подсказката и преместване надолу на мястото си.

&::after { ... top: -1.9em; opacity: 0; transition: top 250ms linear, opacity 150ms linear 150ms; } &:hover, ... { ... &::after { opacity: 1; top: -0.9em; } }

Колекцията CodePen от стъпки за обучение може да бъде намерена тук .

Тази статия първоначално се появи в брой 264 на списание Web Designer. Купете го тук .

Прочетете още: