Подборка полезных утилит SCSS

в 11:07, , рубрики: css, Блог компании ua-hosting.company, веб-дизайн, Веб-разработка, дизайн, примесь, функции

Для успешной реализации проекта разработчикам фронтенда не обойтись без проверенного арсенала расширения 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: '0A3'; }

Пример использования:

<body class="USD">    
    <span class="price">45</span>
</body>

.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;
      }
    }
  }
}

Список можно продолжать и продолжать. У каждого разработчика свои любимые методы и наборы инструментов для реализации проектов.

Автор: ua-hosting.company

Источник

Поделиться новостью

* - обязательные к заполнению поля