sass, scss, css snippets; some useful stuff

scss-css.css

// mobile viewport bug with `100vh` in WebKit (iOS Safari)! 
// credits: https://twitter.com/AllThingsSmitty/status/1254151507412496384
body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
} 

html:focus-within {
  scroll-behavior: smooth;
}

// negate margin flex 
.parent {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin: -5px; /* Negates the child margin */
}

.child {
  margin: 5px;
}

// The 60 FPS Smooth as Butter Solution
function toggleClassMenu() {
    myMenu.classList.add("menu--animatable");   
    if(!myMenu.classList.contains("menu--visible")) {       
        myMenu.classList.add("menu--visible");
    } else {
        myMenu.classList.remove('menu--visible');       
    }   
}
function OnTransitionEnd() {
    myMenu.classList.remove("menu--animatable");
}
var myMenu = document.querySelector(".menu");
var oppMenu = document.querySelector(".menu-icon");
myMenu.addEventListener("transitionend", OnTransitionEnd, false);
oppMenu.addEventListener("click", toggleClassMenu, false);
myMenu.addEventListener("click", toggleClassMenu, false);

<div class="menu">
	<div class="app-menu"></div>
</div>
<div class="layout">
	<div class="header">
		<div class="menu-icon"></div>
	</div>
</div>

.menu {position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 150; } .menu--visible {pointer-events: auto; } .app-menu {background-color: #fff; color: #fff; position: relative; max-width: 400px; width: 90%; height: 100%; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); -webkit-transform: translateX(-103%); transform: translateX(-103%); display: flex; flex-direction: column; will-change: transform; z-index: 160; pointer-events: auto; } .menu--visible .app-menu {-webkit-transform: none; transform: none; } .menu--animatable .app-menu {transition: all 130ms ease-in; } .menu--visible.menu--animatable  .app-menu {transition: all 330ms ease-out; } .menu:after {content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); opacity: 0; will-change: opacity; pointer-events: none; transition: opacity 0.3s cubic-bezier(0,0,0.3,1); } .menu--visible.menu:after {opacity: 1; pointer-events: auto; }

// css-scroll-snap for slider https://caniuse.com/#feat=css-snappoints
#gallery {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
}
#gallery img { scroll-snap-align: center; }

// Pure CSS Tooltip
https://codepen.io/cristina-silva/pen/XXOpga

// Cross Browser Autofill Form — Selected Fields A PEN BY Jason Grigsby
https://codepen.io/grigs/pen/YqoyWv

<img sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)" srcset="swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w" src="swing-400.jpg" alt="Kettlebell Swing"/>
If the browser window is narrower than 30em, I'll be displaying the image at 100vw wide.
If the browser window is between 30em and 50em, I'll be displaying the image at 50vw wide.
Otherwise (if it's even bigger), I'll be displaying the image at calc(33vw - 100px) wide.

 // sass mixin for repeated content
@mixin repeated-within($classes) {
  @each $class in $classes {
    .#{$class} { @content; }
  }
}

@include repeated-within(icon widget thing) {
  color: red;
  a { color: blue; }
}

// for loop to output .txt-h1 - 6
@for $i from 1 through 6 {
  .txt-h#{$i} {
    @extend %txt-h#{$i};
  }
}

// each
$align-list: center, left, right;
@each $align in $align-list {
  .txt-#{$align} {
    text-align: $align;
  }
}
//credits: modernweb.com/2014/03/03/getting-into-sass-control-directives


/* Create a 3D Animating Sidebar */
.sidebar {perspective: 800px; position: relative;}
.sidebar-rotater {transform: rotateY(-25deg); transition: transform 1s;}
.sidebar-rotater:hover {transform: rotateY(0deg);}

.ir {font: 0/0 a; text-shadow: none; color: transparent;}
&
.hide-text {text-indent: 100%; white-space: nowrap; overflow: hidden;}

/* boxshadow, pos:fixed gibi seylerin stresini azaltmak icin */
-webkit-transform: translateZ(0);

Flexible CSS cover images
<div class="CoverImage FlexEmbed FlexEmbed--3by1" style="background-image:url(http://placeimg.com/1000/1000/nature)"></div>
<div class="CoverImage FlexEmbed FlexEmbed--2by1" style="background-image:url(http://placeimg.com/1000/1000/nature)"></div>
<div class="CoverImage FlexEmbed FlexEmbed--16by9" style="background-image:url(http://placeimg.com/1000/1000/nature)"</div>
.FlexEmbed {display: block; overflow: hidden; position: relative; }
.FlexEmbed:before {content: ""; display: block; width: 100%; }
.FlexEmbed--3by1:before {padding-bottom: 33.33333%; }
.FlexEmbed--2by1:before {padding-bottom: 50%; }
.FlexEmbed--16by9:before {padding-bottom: 56.25%; }
.CoverImage {background-position: 50%; background-repeat: no-repeat; background-size: cover; margin: 0 auto 1em; max-height: 600px; max-width: 600px; }

/* CodePen Home Inner radius to image element: https://codepen.io/t_afif/pen/abMvjZj */
img {
  --c: #A7DBD8;
  --s: 10px; /* the border thickness*/
  
  width: 250px;
  border-radius: 50%; /* works with any value or without */
  border-image: conic-gradient(var(--c) 0 0) fill 0//var(--s);
}

/* Circle */
.circle {
  inline-size: 25ch;
  aspect-ratio: 1;
  border-radius: 50%;
}