Skip to content

Instantly share code, notes, and snippets.

@Solomko2
Last active June 7, 2019 12:53
Show Gist options
  • Save Solomko2/64ac43fce1ac5861776a to your computer and use it in GitHub Desktop.
Save Solomko2/64ac43fce1ac5861776a to your computer and use it in GitHub Desktop.
@mixin keyframes($animation-name) {
@-webkit-keyframes $animation-name {
@content;
}
@-moz-keyframes $animation-name {
@content;
}
@-ms-keyframes $animation-name {
@content;
}
@-o-keyframes $animation-name {
@content;
}
@keyframes $animation-name {
@content;
}
}
@mixin animation($str) {
-webkit-animation: #{$str};
-moz-animation: #{$str};
-ms-animation: #{$str};
-o-animation: #{$str};
animation: #{$str};
}
//Usage
@include keyframes(slide-down) {
0% { opacity: 1; }
90% { opacity: 0; }
}
.element {
width: 100px;
height: 100px;
background: black;
@include animation('slide-down 5s 3');
}
%clearfix {
*zoom: 1;
&:before, &:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
//Usage
.container-with-floated-children {
@extend %clearfix;
}
@mixin opacity($opacity) {
opacity: $opacity;
$opacity-ie: $opacity * 100;
filter: alpha(opacity=$opacity-ie); //IE8
}
//Usage
.faded-text {
@include opacity(0.8);
}
// зависит от модернайзер
$image-path: '../img' !default;
$fallback-extension: 'png' !default;
$retina-suffix: '@2x';
@mixin background-image($name, $size:false){
background-image: url(#{$image-path}/#{$name}.svg);
@if($size){
background-size: $size;
}
.no-svg &{
background-image: url(#{$image-path}/#{$name}.#{$fallback-extension});
@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
background-image: url(#{$image-path}/#{$name}#{$retina-suffix}.#{$fallback-extension});
}
}
}
//Usage
body {
@include background-image('pattern');
}
@mixin transition($args...) {
-webkit-transition: $args;
-moz-transition: $args;
-ms-transition: $args;
-o-transition: $args;
transition: $args;
}
//Usage
a {
color: gray;
@include transition(color .3s ease);
&:hover {
color: black;
}
}
%visuallyhidden {
margin: -1px;
padding: 0;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip: rect(0, 0, 0, 0);
position: absolute;
}
//Usage
<button class="mobile-navigation-trigger">
<b class="visually-hidden">Open the navigation</b>
<img src="img/mobile-navigation-icon.svg">
</button>
.visually-hidden {
@extend %visuallyhidden;
}
@mixin bp-large {
@media only screen and (max-width: 60em) {
@content;
}
}
@mixin bp-medium {
@media only screen and (max-width: 40em) {
@content;
}
}
@mixin bp-small {
@media only screen and (max-width: 30em) {
@content;
}
}
//Usage
.sidebar {
width: 60%;
float: left;
margin: 0 2% 0 0;
@include bp-small {
width: 100%;
float: none;
margin: 0;
}
}
@function calculateRem($size) {
$remSize: $size / 16px;
@return $remSize * 1rem;
}
@mixin font-size($size) {
font-size: $size;
font-size: calculateRem($size);
}
//Usage
p {
@include font-size(14px)
}
@artnikbrothers
Copy link

Афигенно))

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment