Selection of useful utilities SCSS
For the successful implementation of the project, the developers of the frontend cannot do without the proven arsenal of SCSS expansion. Below are utilities that can be useful in the work.
The triangle mix (which Sagi designers prefer to call “chupchick”) adds a triangle to the tooltip. And the tooltips look like a dialog box. But triangle can also be used as a standalone element.
')
Here is another version of the finished tooltips:
The utility displays the current exchange rates. Using the described method, you can set the elements that show the price or currency symbols, select the base currency, add a few additional to favorites. Thus, different currencies will be dynamically switched on the site according to the user's location.
Usage example:
There are many different ways of placing "floating" blocks inside a container without making changes to the source code of the page markup. One of the most popular is Nicolas Gallagher’s micro clearfix nicolasgallagher.com/micro-clearfix-hack . Below is a variant of the modified version using a pseudo-element: after.
For the implementation of media queries is well suited impurity Sass content . As a result, the directive allows you to control the size in accordance with the style.
Usage example:
A slightly modified version of the CSS-Tricks css-tricks.com/centering-in-the-unknown method for vertical centering of elements with dynamic dimensions. It works beautifully and does not require additional non-semantic HTML elements.
A method that will help prevent block elements from overflowing, as well as to make sure that the text element is placed neatly and does not creep beyond the unit.
An impurity option for animation in CSS3 based on the Compass framework.
Imported Alerted is a good solution for demonstrating notifications reminding the user to take certain measures.
Impurity from Darren Wood (Darren Wood), which allows you to create and upload file images and then reduce them using CSS. Great for working with 2X images.
Empty tooltips that allow content to be placed in HTML and at the same time receive surprisingly good browser support.
The list goes on and on. Each developer has his own favorite methods and toolkits for project implementation.
Triangle
The triangle mix (which Sagi designers prefer to call “chupchick”) adds a triangle to the tooltip. And the tooltips look like a dialog box. But triangle can also be used as a standalone element.
/* * @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; } } ')
Here is another version of the finished 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
The utility displays the current exchange rates. Using the described method, you can set the elements that show the price or currency symbols, select the base currency, add a few additional to favorites. Thus, different currencies will be dynamically switched on the site according to the user's location.
%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'; } Usage example:
<body class="USD"> <span class="price">45</span> </body> .price { @extend %currency; } Clear fix
There are many different ways of placing "floating" blocks inside a container without making changes to the source code of the page markup. One of the most popular is Nicolas Gallagher’s micro clearfix nicolasgallagher.com/micro-clearfix-hack . Below is a variant of the modified version using a pseudo-element: after.
%clearfix { *zoom: 1; &:after { content: ''; display: table; line-height: 0; clear: both; } } Respond To
For the implementation of media queries is well suited impurity Sass content . As a result, the directive allows you to control the size in accordance with the style.
// 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; } } } Usage example:
div { // regular styles here @include respondTo(desktop) { &:hover { background: blue; } // only add the hover effect on desktop browsers } } Vertical alignment
A slightly modified version of the CSS-Tricks css-tricks.com/centering-in-the-unknown method for vertical centering of elements with dynamic dimensions. It works beautifully and does not require additional non-semantic HTML elements.
@mixin ghostVerticalAlign(){ &:before { content: ''; display: inline-block; vertical-align: middle; height: 100%; width: .1px; } } Crossbrowser text-overflow
A method that will help prevent block elements from overflowing, as well as to make sure that the text element is placed neatly and does not creep beyond the unit.
@mixin truncateText($overflow: ellipsis){ overflow: hidden; white-space: nowrap; text-overflow: $overflow; // values are: clip, ellipsis, or a string } Animation
An impurity option for animation in CSS3 based on the Compass framework.
@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; } Alert
Imported Alerted is a good solution for demonstrating notifications reminding the user to take certain measures.
@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); } } Resizing Sprites
Impurity from Darren Wood (Darren Wood), which allows you to create and upload file images and then reduce them using CSS. Great for working with 2X images.
@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
Empty tooltips that allow content to be placed in HTML and at the same time receive surprisingly good browser support.
@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; } } } } The list goes on and on. Each developer has his own favorite methods and toolkits for project implementation.
Source: https://habr.com/ru/post/276509/
All Articles