Skip to content

Instantly share code, notes, and snippets.

View zastrow's full-sized avatar
🦄
Making the Web a magical place

Philip Zastrow zastrow

🦄
Making the Web a magical place
View GitHub Profile
@zastrow
zastrow / SassMeister-input.scss
Created August 8, 2019 12:24
Generated by SassMeister.com.
// ----
// libsass (v3.5.4)
// ----
@function space($space-value) {
@return $space-value * 1rem;
}
.my-class {
padding: space(2);
@zastrow
zastrow / SassMeister-input.scss
Last active March 4, 2022 13:00
Generated by SassMeister.com.
// ----
// libsass (v3.5.4)
// ----
/* Example 1 */
@mixin text-1 {
font-size: 1.5rem;
color: red;
}
@zastrow
zastrow / SassMeister-input.scss
Created August 8, 2019 12:14
Generated by SassMeister.com.
// ----
// libsass (v3.5.4)
// ----
$font-sizes: (
xs: 0.75rem,
sm: 0.875rem,
md: 1.125rem,
lg: 1.25rem,
xl: 1.75rem
@zastrow
zastrow / SassMeister-input.scss
Last active March 4, 2022 13:00
Holy Trinity of Sass: Complex Function Demo
// ----
// libsass (v3.5.4)
// ----
$sans: sans-serif;
$serif: serif;
$sans-weight: (
lighter: 300,
bolder: 700
.layout-main {
display: inline-block;
display: flex;
display: grid;
width: 100%;
}
.layout-main__left {
float: left;
width: 75%;
.layout-main {
display: inline-block;
display: flex;
width: 100%;
}
.layout-main__left {
float: left;
width: 75%;
}
.layout-main {
display: inline-block;
width: 100%;
}
.layout-main__left {
float: left;
width: 75%;
}
@mixin spacing-loop($property, $space, $value) {
@each $poskey, $posvalue in $spacing-key {
&-#{$poskey}-#{$space} {
}
}
}
@mixin spacing-loop($property, $space, $value) {
@each $poskey, $posvalue in $spacing-key {
}
}
@mixin spacing-loop($property, $space, $value) {
}