Skip to content

Instantly share code, notes, and snippets.

Avatar
🎨
Writing all the CSS!

Philip Zastrow zastrow

🎨
Writing all the CSS!
View GitHub Profile
View Reduce Motion Query.scss
// This function pairs with the `motion` mixin
// to convert a `true` or `false` value to the
// appropriate media query value for reduce motion.
@function motion($value) {
@if $value {
@return 'no-preference';
}
@else {
@return 'reduce';
}
View Dark and Light Mode Mixin.scss
// Simplified version of color schemes. Options are `light` or `dark`
@mixin color-mode($value: light) {
@media (prefers-color-scheme: $value) {
@content;
}
}
@zastrow
zastrow / input.scss
Created Feb 2, 2021
Generated by SassMeister.com.
View input.scss
$media-queries: (
sm: 40rem,
lg: 80rem
);
@mixin loop-states {
&,
&\:hover:hover,
&\:active:active,
&\:focus:focus {
@zastrow
zastrow / input.scss
Created Jan 14, 2021
Generated by SassMeister.com.
View input.scss
$font-stack: sytem-ui, sans-serif;
@function font($override:null) {
@if $override {
@return $font-stack !important;
}
@else {
@return $font-stack;
}
}
@zastrow
zastrow / input.scss
Created Jan 14, 2021
Generated by SassMeister.com.
View input.scss
$font-stack: sytem-ui, sans-serif;
@mixin font($override:null) {
font-family: $font-stack $override;
}
.my-class {
@include font;
}
@zastrow
zastrow / input.scss
Created Sep 23, 2020
Generated by SassMeister.com.
View input.scss
// Maps
// - Color Map
// - Major Breakpoints
// - Spacing
// - Font Sizes
// - Font Family
// - Font Weight
// - Display
// - Text Align
// - Flexbox Properties
@zastrow
zastrow / input.scss
Created Sep 23, 2020
Generated by SassMeister.com.
View input.scss
// default -> inside /node_modules/sparkle
$settings: (
'utilPrefix': 'sbx',
'colorUtil': true
) !default;
$colors: (
'red': #900,
'green': #090,
View SassMeister-input.scss
// ----
// Sass (v3.4.13)
// Compass (v1.0.3)
// ----
////
/// String to number converter
/// @author Hugo Giraudel
/// @access private
////
View Auto add Jira card number to end of commit
function jira-commit() {
branch_name=$((git symbolic-ref HEAD | cut -d'/' -f3) | tr '[:lower:]' '[:upper:]')
git commit -m "$@"$'\n'"${branch_name}";
}
@zastrow
zastrow / Unlink.scss
Created Aug 1, 2018
Mixin to remove the default link styles of an <a>
View Unlink.scss