Подборка полезных утилит SCSS
Для успешной реализации проекта разработчикам фронтенда не обойтись без проверенного арсенала расширения SCSS. Ниже представлены утилиты, которые могут пригодиться в работе.
Triangle
Примесь triangle (которую дизайнеры Sagi предпочитают называть «chupchick»), добавляет к всплывающей подсказке треугольник. И tooltips становится похожим на диалоговое окно. Но triangle также может использоваться в качестве автономного элемента.
/*
* @include triangle within a pseudo element and add positioning properties (ie. top, left)
* $direction: up, down, left, right
*/
@mixin triangle($direction, $size: 6px, $color: #222){
content: '';
display: block;
position: absolute;
height: 0; width: 0;
@if ($direction == 'up'){
border-bottom: $size solid $color;
border-left: 1/2*$size solid transparent;
border-right: 1/2*$size solid transparent;
}
@else if ($direction == 'down'){
border-top: $size solid $color;
border-left: 1/2*$size solid transparent;
border-right: 1/2*$size solid transparent;
}
@else if ($direction == 'left'){
border-top: 1/2*$size solid transparent;
border-bottom: 1/2*$size solid transparent;
border-right: $size solid $color;
}
@else if ($direction == 'right'){
border-top: 1/2*$size solid transparent;
border-bottom: 1/2*$size solid transparent;
border-left: $size solid $color;
}
}
Вот еще вариант готового tooltips:
span.tooltip:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: transparent #FFFFFF transparent transparent;
top: 11px;
left: -24px;
}
Currency
Утилита отображает текущие курсы валют. Используя описанный метод можно задать элементы, показывающие цену или валютные символы, выбрать базовую валюту, добавить несколько дополнительных в избранные. Таким образом на сайте будут динамично переключаться разные валюты в соответствии с местоположением пользователя.
%currency {
position: relative;
&:before {
content: '$';
position: relative;
left: 0;
}
}
.USD %currency:before { content: '$'; }
.EUR %currency:before { content: '\20AC'; } // must escape the html entities for each currency symbol
.ILS %currency:before { content: '\20AA'; }
.GBP %currency:before { content: '\00A3'; }
Пример использования:
45
.price {
@extend %currency;
}
Clear Fix
Есть много различных способов размещения «плавающих» блоков внутри контейнера без внесения изменений в исходный код разметки страницы. Один из наиболее популярных — micro clearfix nicolasgallagher.com/micro-clearfix-hack Николаса Галлахера (Nicolas Gallagher). Ниже представлен вариант модифицированной версии с использованием псевдоэлемента : after.
%clearfix {
*zoom: 1;
&:after {
content: '';
display: table;
line-height: 0;
clear: both;
}
}
Respond To
Для реализации медиа запросов хорошо подходит примесь Sass content. В результате директива позволяет управлять размерами в соответствии со стилем.
// Breakpoints for each query
$smartphone: 480px;
$tabletPortrait: 767px;
$tabletLandscape: 1024px;
$desktop: 1174px;
$largeScreen: 1400px;
@mixin respondTo($media) {
@if $media == smartphone {
@media (max-width: $smartphone) { @content; }
}
@else if $media == tablet {
@media (min-width: $tabletPortrait) and (max-width: $tabletLandscape) { @content; }
}
@else if $media == smallScreen {
@media (max-width: $desktop) { @content; }
}
@else if $media == desktop {
@media (min-width: $desktop) { @content; }
}
}
Пример использования:
div {
// regular styles here
@include respondTo(desktop) {
&:hover { background: blue; } // only add the hover effect on desktop browsers
}
}
Вертикальное выравнивание
Несколько модифицированная версия метода CSS-Tricks css-tricks.com/centering-in-the-unknown для вертикального центрирования элементов с динамическими размерами. Работает красиво и не требует дополнительных не-семантических элементов HTML.
@mixin ghostVerticalAlign(){
&:before {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%; width: .1px;
}
}
Кроссбраузерный text-overflow
Метод, который поможет предотвратить переполнение у блочных элементов, а также убедиться, что текстовый элемент аккуратно размещается и не вылезает за переделы блока.
@mixin truncateText($overflow: ellipsis){
overflow: hidden;
white-space: nowrap;
text-overflow: $overflow; // values are: clip, ellipsis, or a string
}
Анимация
Вариант примеси для анимации в CSS3 на основе фреймворка Compass.
@mixin animation($name, $duration: 1000ms, $iterations: infinite, $timing-function: ease, $delay: 0ms) {
// There is a FF bug that requires all time values to have units, even 0 !!!!!!
-webkit-animation: $name $duration $iterations $timing-function $delay;
-moz-animation: $name $duration $iterations $timing-function $delay;
-o-animation: $name $duration $iterations $timing-function $delay;
animation: $name $duration $iterations $timing-function $delay;
}
Alerted
Примесь Аlerted — неплохое решение для демонстрации уведомлений, напоминающих пользователю о необходимости принять те или иные меры.
@mixin alerted() {
&:before {
content: '';
position: absolute;
top: 6px; right: 6px;
height: 8px; width: 8px;
@include border-radius(10px);
background-color: gold;
}
&:after {
content: '';
position: absolute;
top: 0; right: 0;
height: 20px; width: 20px;
@include border-radius(20px);
background-color: transparent;
border: solid gold;
border-width: 2px; // animates
@include box-sizing(border-box);
@include animation($name: alertMe);
}
}
@keyframes alertMe {
// -vendor prefixes omitted for brevity, but should be used in production
from {
border-width: 3px;
border-color: gold;
}
to {
border-width: 0;
border-color: rgba(gold, .1);
}
}
Изменение размера Спрайтов
Примесь от Даррена Вуда (Darren Wood), которая позволяет создавать и загружать файловые изображения и затем уменьшать их, используя CSS. Замечательно подходит для работы с 2X изображениями.
@mixin resize-sprite($map, $sprite, $percent) {
$spritePath: sprite-path($map);
$spriteWidth: image-width($spritePath);
$spriteHeight: image-height($spritePath);
$width: image-width(sprite-file($map, $sprite));
$height: image-height(sprite-file($map, $sprite));
@include background-size(ceil($spriteWidth * ($percent/100)) ceil($spriteHeight * ($percent/100)));
width: ceil($width*($percent/100));
height: ceil($height*($percent/100));
background-position: 0 floor(nth(sprite-position($map, $sprite), 2) * ($percent/100) );
}
Tooltips
Пустые всплывающие подсказки, позволяющие размещать контент в HTML и при этом получать удивительно хорошую поддержку браузера.
@mixin hui_tooltip($content: attr(data-tooltip), $direction: top) {
position: relative;
&:before, &:after {
display: none;
z-index: 98;
}
&:hover {
&:after { // for text bubble
content: $content;
display: block;
position: absolute;
height: 12px; // (makes total height including padding 22px)
padding: 6px;
font-size: 12px;
white-space: nowrap;
color: #fff;
@include text-shadow(1px 1px #000);
background-color: #222;
}
@if ($direction == 'top'){
&:before {
@include triangle(down, 6px, #222);
top: -6px; margin-top: 0;
left: 47%;
}
&:after {
top: -28px;
left: 47%; margin-left: -20px;
}
}
@else if ($direction == 'bottom'){
&:before {
@include triangle(up, 6px, #222);
top: auto; margin-top: 0;
bottom: -6px;
left: 47%;
}
&:after {
bottom: -28px;
left: 47%; margin-left: -20px;
}
}
}
}
Список можно продолжать и продолжать. У каждого разработчика свои любимые методы и наборы инструментов для реализации проектов.
