Подборка полезных утилит 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'; }
    


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

    <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

    494,00

    Хостинг-провайдер: серверы в NL / US до 100 Гбит/с

    Поделиться публикацией

    Похожие публикации

    Комментарии 12
      0
      Respond To

      И в этом месте хочется развязать холивар на тему «предустановленные точки перелома vs. динамика и гибкость». Регулярно сталкивался с проблемой — как брейкпойнты не расставляй, сколько их не делай, всегда найдется элемент, который не выглядит нормально на каком-либо разрешении.

      Решение: по необходимости писать конкретные значения ширины/высоты экрана, в остальных случаях довольствуясь предустановленными точками перелома. Для этого есть удобные миксины: SASS, LESS.
        0
        Вопрос к фронтендщикам: то, что описано в статье это сейчас best-practices? В смысле использование такого рода сниппетов понадерганных отовсюду? Есть ли какой-то сайт где централизовано как на bower.io лежит такое добро? И если их много, то какому отдать предпочтение?
          0
          Есть foundation.zurb.com (Foundation 6) можно использовать в качестве библиотеки сниппетов. Подключаешь частями, например гриды и типографику, возможно кнопки. Все настраиваемо и не тащит лишний CSS. Можно ставить через bower, npm.
          Пример
          @import "foundation";
          @include foundation-global-styles;
          @include foundation-grid;
          @include foundation-typography;
          


          Но какого то определенного решения (что то вроде npm репозиториев) для SCSS сниппетов не видел.
            0
            Я не фронтендщик, но интересуюсь. Это смотря какие сниппеты и для чего нужны. Есть Compass, есть просто библиотека mixin'ов Bourbon bourbon.io, там часть представленных точно есть, но очень сомневаюсь, что какой-нибудь currency там когда-нибудь появится. Тот же порт bootstrap 3 на scss взять и использовать кусками можно. 4й вроде уже на нём.
              +1
              Половина статьи — понадёрганный отовсюду бред сивой кобылы. Использование таких чудесностей рискует поломать вам вёрстку в самых неожиданных местах.

              Currency

              Решение просто на грани фантастики. На уровне описания работы псевдоэлементов в справочнике по CSS.

              Respond To

              Чей-то воспалённый мозг решил, что медиазапросы придумали для определения типа устройства, а не точной адаптации элементов к любым размерам экрана.

              Кроссбраузерный text-overflow

              Опять же похоже на пример из учебника.

              Анимация

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

              Остальные миксины, возможно, могут кому-то действительно пригодиться.
                +1
                Нет. На bower.io вобщем-то всё и лежит. Тот же bourbon, в котором есть все полезные миксины из этой статьи.
                С другой стороны, во всех языках распространена практика нашёл на stackoverflow и скопипастил, SCSS тут ничем не отличается. А вот в plain old CSS копипастить было более актуально, потому что отдавать клиенту сотню килобайт из либы ради одной кнопочки — это слишком.
                  0
                  Ну зачем отдавать 100кб ради кнопочки? После компиляции на выходе получатся только те стили, которые ты используешь. Весь Foundation 6 состоит из большого количества миксинов, но я использую, например, только грид и кнопки, после компиляции в CSS фале только те классы которые действительно используются в проекте.
                  Пример
                  @include grid-column-size($width);
                  @include button($expand, $background, $background-hover, $color, $style);
                  

                    0
                    Так я о разнице CSS и SCSS — как раз о том, что в SCSS можно включить только то те миксны что нужны, а в CSS этого сделать нельзя, фреймворки получаются большими и проще взять стиль и скопипастить.
                0
                Хотя бы на codepen залили бы и ссылки дали.
                А то без примеров читать, как то не очень.
                  +2
                  Не пачкайте код миксинами с браузерными префиксами, используйте автопрефиксер.

                  @include box-sizing(border-box);
                  фу фу фу же
                    0
                    Bourbone, думаю оцените, очень удобный гем-либа с миксинами. И да, там есть все что вы описали. Единственное, в нем есть слабая сторона — это градиенты, но если заинтересует могу поделиться линком на отличную scss функцию по этой теме(github).
                      +1
                      @mixin hui_tooltip
                      

                      Hacking UI, ага, в оригинале это сокращение означало.

                      Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                      Самое читаемое