Skip to content

Instantly share code, notes, and snippets.

@thelemondropkid
Created April 3, 2021 13:21
Show Gist options
  • Save thelemondropkid/e19e28ba9960ceb85840544c3e99b698 to your computer and use it in GitHub Desktop.
Save thelemondropkid/e19e28ba9960ceb85840544c3e99b698 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
@import "breakpoint";
// SASS 'map'
// ----------
$font-sizes: (tiny: 9px, small: 12px, medium: 16px, large:24px);
// SASS 'each loop' over SASS map (name = current itteration)
// $name = key, $size = value
@each $name, $size in $font-sizes {
.#{$name} {
font-size: #{$size};
}
}
// SASS 'list'
// -----------
$speakers: quintin, petra, nelson;
// SASS 'each loop' over SASS list
@each $speaker in $speakers {
.#{$speaker}-profile {
background-image: url('img/#{$speaker}.png');
}
}
/*
SASS 'while' loop.
@while loop is more flexible than @for loop
@while loop allows the step count to be adjusted
@while loop allows for more complex conditions than @for loop
*/
$j: 2; // condition
@while $j <= 8 {
.picture-#{$j} {
width: $j * 10%;
}
// Important to prevent 'infinate loop'
$j: $j + 2;
}
// Breakpoint (http://breakpoint-sass.com/)
// ----------------------------------------
// assume min-width (by default) if only a number
$high-tide: 500px;
// set min-width/max-width if both values are numbers
$ex-presidents: 600px 800px;
// if one value is a string, assume a feature/value pair
$surfboard-width: max-width 1000px;
// string tests together within parentheses, assume each item is a feature value pair
$surfboard-height: (min-height 1000px) (orientation portrait);
.reagan {
@include breakpoint($high-tide) {
content: "High tide";
}
}
.nixon {
@include breakpoint($ex-presidents) {
content: 'Ex-Presidents';
}
}
.johnson {
@include breakpoint($surfboard-width) {
content: 'Surfboard Width';
}
}
.carter {
@include breakpoint($surfboard-height) {
content: 'Surfboard Height, Portrait';
}
}
.mandela {
font-size: map-get($font-sizes, tiny);
@include breakpoint($high-tide) {
font-size: map-get($font-sizes, large);
}
}
// Working with SASS maps
// Keys must not contain spaces or special characters
// Values can be 'string', integers, booleans
$light-weights: ("lightest": 100, "light": 300);
$heavy-weights: ("medium": 500, "bold": 700);
.map {
// getting map keys
content: map-keys($light-weights);
// getting map values (with interpolation)
content: "#{map-values($light-weights)}";
// has key?
content: map-has-key($light-weights, 'lightest');
content: map-has-key($light-weights, 'lightest-01');
// get a map value
content: map-get($heavy-weights, 'bold');
// map merge (with 'inspect' for output)
content: inspect(map-merge($light-weights, $heavy-weights));
// removing key/value pairs from a map (immutable operation)
content: inspect(map-remove($heavy-weights, 'bold'));
// the org map is still in tact after previous operation
content: inspect($heavy-weights);
}
// new merged map to be used in function below
$all-weights: map-merge($light-weights, $heavy-weights);
// Function example that reduces the amount of typing when working with maps
@function weight($weight-name) {
@return map-get($all-weights, $weight-name);
}
.all-weights {
content: weight(lightest);
content: weight(light);
content: weight(medium);
content: weight(bold);
}
// The SASS apersand (placeholder of parent selector name)
.main {
// this will produce (.main__paragraph)
&__paragrapgh {
font-size: 1rem;
}
// but what if i want the parent class included in the selector?
// this will produce (.main .main__paragraph)
#{&}__paragraph {
font-size: 1rem;
}
}
// Some variables to be used in mixin below
$primary-color: #000;
$primary-text-color: #fff;
// Sass 'mixin' example for creating a theme (with a default boolean)
@mixin theme($theme-light: false) {
@if ($theme-light) {
color: darken($primary-text-color, 100%); // black
background-color: lighten($primary-color, 100%); // white
}
}
.theme-light {
@include theme(true); // we change the default boolean value to set the theme
}
// SASS 'Extend'
.paragraph {
color: $primary-color;
font-weight: weight(lightest); // our map function
}
aside {
.paragraph {
@extend .paragraph; // will combine this selector with previous '.paragraph'
background-color: light-grey; // only this will be added to a seperate selector
}
}
// Great technique for targeting child elements for staggered animation delay
@for $i from 1 through 4 {
.menu_item:nth-child(#{$i}) {
// each item has a base delay corresponding to
// itteration number plus 0.15s
transition-delay: ($i * 0.1s) + 0.15s;
}
}
// Tip: Calculate percentage for responsive design
@function calc-percent($target, $container) {
@return ($target / $container) * 100%;
}
.my-module {
width: calc-percent(650px, 1000px);
}
$list1: 200px;
$list2: 1px 2px 3px black;
// SASS 'length' function (takes 1 arg - the list)
.lenght {
content: length($list1);
}
// SASS 'nth()' function (takes 2 args - the list, target)
.nth {
content: nth($list2, 2);
}
// SASS 'set-nth()' function (takes 3 args - the list, target, new value)
// it replaces the item and produces the result
.nth-child {
content: set-nth($list2, 2, 10px);
}
// SASS 'join()' function (takes 3 args - the list, other list, optional seperator)
// 'comma', 'space (default)'
.join {
content: join($list1, $list2, comma);
}
// You can join a customa value using just one list as arg + 'custom value', seperator
.join-custom {
content: join($list1, 'sans-serif', comma);
}
// SASS append() - more specific than join()
.append {
content: append($list1, 'something', comma);
}
// SASS index() - returns the position of something in a list
// Takes 2 args - the list to inspect, what you want (case sensitive)
// if nested list, you need to type all values of the list
.index {
content: index($list2, black);
}
// SASS zip() function for combining values into muli-dementional list
// In this example: Produces a list with 1 value of each list seperated by ','
// The result is 4 lists (amount of items) with one value of each passed in
// "1px 2em blue, 2px 3em green, 3px 4em orange, 4px 5em grey"
.zip {
content: zip(
1px 2px 3px 4px,
2em 3em 4em 5em,
blue green orange grey,
)
}
// Zip with pre-defined zips
$zip1: 1px 2px 3px 4px;
$zip2: 2em 3em 4em 5em;
$zip3: blue green orange grey;
.zip-list {
content: zip($zip1, $zip2, $zip3);
}
// Variable arguments (arglist): we make it possible to pass any number of arguments
// without '...', only the first arg will be used
@mixin shadows($shadows...) {
box-shadow: $shadows;
}
.shadows {
@include shadows(1px, 2px, 3px, rgba(black, .5))
}
// another example of 'arglist'
@mixin linear-gradient($direction, $gradients...) {
background-color: nth($gradients, 1); // in call below = 'magenta'
background-image: linear-gradient($direction, $gradients...);
}
.selector {
@include linear-gradient(to right, magenta, red, orange, yellow, green, blue, purple);
}
// Setting defaults in arguments
@function dummy($a, $b, $c: "default") {
// do stuff
}
.tiny {
font-size: 9px;
}
.small {
font-size: 12px;
}
.medium {
font-size: 16px;
}
.large {
font-size: 24px;
}
.quintin-profile {
background-image: url("img/quintin.png");
}
.petra-profile {
background-image: url("img/petra.png");
}
.nelson-profile {
background-image: url("img/nelson.png");
}
/*
SASS 'while' loop.
@while loop is more flexible than @for loop
@while loop allows the step count to be adjusted
@while loop allows for more complex conditions than @for loop
*/
.picture-2 {
width: 20%;
}
.picture-4 {
width: 40%;
}
.picture-6 {
width: 60%;
}
.picture-8 {
width: 80%;
}
@media (min-width: 500px) {
.reagan {
content: "High tide";
}
}
@media (min-width: 600px) and (max-width: 800px) {
.nixon {
content: "Ex-Presidents";
}
}
@media (max-width: 1000px) {
.johnson {
content: "Surfboard Width";
}
}
@media (min-height: 1000px) and (orientation: portrait) {
.carter {
content: "Surfboard Height, Portrait";
}
}
.mandela {
font-size: 9px;
}
@media (min-width: 500px) {
.mandela {
font-size: 24px;
}
}
.map {
content: "lightest", "light";
content: "100, 300";
content: true;
content: false;
content: 700;
content: ("lightest": 100, "light": 300, "medium": 500, "bold": 700);
content: ("medium": 500);
content: ("medium": 500, "bold": 700);
}
.all-weights {
content: 100;
content: 300;
content: 500;
content: 700;
}
.main__paragrapgh {
font-size: 1rem;
}
.main .main__paragraph {
font-size: 1rem;
}
.theme-light {
color: black;
background-color: white;
}
.paragraph, aside .paragraph {
color: #000;
font-weight: 100;
}
aside .paragraph {
background-color: light-grey;
}
.menu_item:nth-child(1) {
transition-delay: 0.25s;
}
.menu_item:nth-child(2) {
transition-delay: 0.35s;
}
.menu_item:nth-child(3) {
transition-delay: 0.45s;
}
.menu_item:nth-child(4) {
transition-delay: 0.55s;
}
.my-module {
width: 65%;
}
.lenght {
content: 1;
}
.nth {
content: 2px;
}
.nth-child {
content: 1px 10px 3px black;
}
.join {
content: 200px, 1px, 2px, 3px, black;
}
.join-custom {
content: 200px, "sans-serif";
}
.append {
content: 200px, "something";
}
.index {
content: 4;
}
.zip {
content: 1px 2em blue, 2px 3em green, 3px 4em orange, 4px 5em grey;
}
.zip-list {
content: 1px 2em blue, 2px 3em green, 3px 4em orange, 4px 5em grey;
}
.shadows {
box-shadow: 1px, 2px, 3px, rgba(0, 0, 0, 0.5);
}
.selector {
background-color: magenta;
background-image: linear-gradient(to right, magenta, red, orange, yellow, green, blue, purple);
}
{
"sass": {
"compiler": "dart-sass/1.26.11",
"extensions": {},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment