Snippets Collections
@mixin most-outer-selector($new-class) {
  $current-selector: &;
  $new-selector: [];

  @each $item in $current-selector {
    $first-item: nth($item, 1);

    $appended-item: $first-item + $new-class;

    $new-item: set-nth($item, 1, $appended-item);
    $new-selector: append($new-item, $new-selector);
  }

  @at-root #{$new-selector} {
    @content;
  }
}

.parent {
  // some CSS rules
  .child {
    // some CSS rules
    span {
      // some CSS rules
      @include most-outer-selector('.bold') {
        font-weight: bold;
      }
    }
  }
}
:root {
  --centered: {
    display: flex;
    align-items: center;
    justify-content: center;
  };
}

.centered {
  @apply --centered;
}
a {
  /* Adjustments */
  color: color(red alpha(-10%));
  color: color(red tint(-10%));    /* lighten */
  color: color(red shade(-10%));   /* darken */

  /* Absolute */
  color: color(red alpha(50%));
  color: color(red hue(225));
  color: color(red saturation(100%));
  color: color(red lightness(50%));

  color: gray(33);       /* rgb(33, 33, 33) */
  color: gray(33%);      /* rgb(84, 84, 84) */
  color: gray(33%, 50%); /* rgba(84, 84, 84, 0.5) */
  color: #0000ff80;      /* rgba(0, 0, 255, 0.5) */

  color: hwb(90, 0%, 0%, 0.5);     /* like hsl() but easier for humans */
  color: hsl(90deg 90% 70%);       /* hsl(180, 90%, 70%) -- supports deg */
  color: hsl(90deg 90% 70% / 30%); /* hsla(180, 90%, 70%, 0.3) */
  color: rgb(30 60 90 / 30%);      /* rgba(30, 60, 90, 0.3) */
}
body {
  background: var(--text-color);
  background: color(var(--text-color) shade(30%));
}
:root {
  --text-color: #30333a;
}
@mixin text($font-size,$color,$bg-color) {

     // we pass the $font-size to font-size property
    font-size: $font-size;
    
    // we pass the $color to color property
    color: $color;
    
    // we pass the $bg-color to background property
    background: $bg-color;
}



.text1 {
          // ($font-size,$color,$bg-color)
    @include text(3rem,green , black)
}

.text2 {
          // ($font-size,$color,$bg-color)
    @include text(5em,red , transparent)
}
/// Shorthand mixin for offset positioning
/// @param {String} $position - Either `relative`, `absolute` or `fixed`
/// @param {Length} $top [null] - Top offset
/// @param {Length} $right [null] - Right offset
/// @param {Length} $bottom [null] - Bottom offset
/// @param {Length} $left [null] - Left offset
@mixin position($position, $top: null, $right: null, $bottom: null, $left: null) {
  position: $position;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}
/// Computes a top-shadow for a card effect.
/// @param {Number} $depth - depth level
/// @return {List}
@function top-shadow($depth) {
  $primary-offset: nth(1.5 3 10 14 19, $depth) * 1px;
  $blur: nth(1.5 3 10 14 19, $depth) * 4px;
  $color: rgba(black, nth(.12 .16 .19 .25 .30, $depth));

  @return 0 $primary-offset $blur $color;
}

/// Computes a bottom-shadow for a card effect.
/// @param {Number} $depth - depth level
/// @return {List}
@function bottom-shadow($depth) {
  $primary-offset: nth(1.5 3 6 10 15, $depth) * 1px;
  $blur: nth(1 3 3 5 6, $depth) * 4px;
  $color: rgba(black, nth(.24 .23 .23 .22 .22, $depth));

  @return 0 $primary-offset $blur $color;
}
/// Gives a card depth effect.
/// @param {Number} $depth - depth level (between 1 and 5)
/// @link http://www.google.com/design/spec/layout/layout-principles.html#layout-principles-dimensionality Google Design
/// @requires {function} top-shadow
/// @requires {function} bottom-shadow
@mixin card($depth) {
  @if $depth < 1 {
    box-shadow: none;
  } @else if $depth > 5 {
    @warn "Invalid $depth `#{$depth}` for mixin `card`.";
  } @else {
    box-shadow: bottom-shadow($depth), top-shadow($depth);  
  }
}
@mixin color-weight ($class, $base-color, $weight: 4) {
  $bg-color: null;

  @for $i from 1 through 8 {
    @if $i < 4 {
      $weight: $weight - 1;
      $bg-color: lighten($base-color, $weight * 10%);
    } @else if $i == 4 {
      $weight: 0;
      $bg-color: $base-color;
    } @else {
      $weight: $weight + 1;
      $bg-color: darken($base-color, $weight * 10%);
    }

    .#{$class}-#{$i} { background-color: $bg-color; }
  }
}

@include color-weight(bg-blue, #1483ff);
@include color-weight(mad, red);
@media screen and (min-width:767px) {

[data-current-styles*='"customContentWidth": 49'].horizontal-alignment--left {
  .section-background {
  
    width:50% !important;
    z-index:1 !important;
    overflow:visible;
  }
  
  .section-background-overlay {
    opacity:1 !important;
    left:100%;
    right:-100%;
  }
  
   .content-wrapper {
     width: 50%;
     margin-left: 50% !important;
     box-sizing: border-box;
     z-index:1;
  }
  
  .content {
    width:100% !important;
  }
}
  
}

@media screen and (min-width:767px) {

[data-current-styles*='"customContentWidth": 49'].horizontal-alignment--right {
  .section-background {
  
    width:50% !important;
    left:50%;
    z-index:1 !important;
    overflow:visible;
  }
  
  .section-background-overlay {
    opacity:1 !important;
    left:-100%;
    right:100%;
  }
  
   .content-wrapper {
     width: 50%;
     margin-left: 0% !important;
     box-sizing: border-box;
     z-index:1;
  }
  
  .content {
    width:100% !important;
  }
}
  
}
// Full Width Image Card - Page Section //

[data-section-id="012345"] {
  overflow-x: hidden !important;
  overflow-y: hidden !important;
    .content-wrapper  {
      padding: auto !important;
      margin: 0px auto;
      display: contents;
    }
.sqs-layout .sqs-row .sqs-block {
  padding-bottom: 0px !important;
  padding-top: 0px !important;
}}

// Full Width Image Card - Text Padding //
  
.image-card-wrapper .sqs-dynamic-text-container {
  padding: 40px !important;
}
//If you wish to apply this on both desktop and mobile
#blockID {
  max-width:150px;
  margin:auto;
}

//If you wish to apply this on mobile only
@media screen and (max-width:767px) {

#blockID {
  max-width:150px;
  margin:auto;
}

}
//FOR THE PRE STYLE MONOCODE FONT IN SS ONLY ONLY
[data-section-id="605471fe6055c808f219a123"] pre { 
    margin-bottom: 0px;
    margin-top: 0;
    transform: rotate(
-90deg);
    transform-origin: top left;
    position: absolute;
    width: 200px;
    bottom: -100px;
}
//IS THERE WHERE DOES THIS GO IN THE SCSS??
.sqs-block-html .sqs-block-content *:not(h1):not(h2):not(h3) {
    word-wrap: break-word;
}
/// Apply `$function` with `$args` to each item from `$list`.
/// @author Kitty Giraudel
/// @param {List} $list - List of items
/// @param {String} $function - Function to apply to every item from `$list`
/// @param {Arglist} $args - Extra arguments to pass to `$function`
/// @return {List}
/// @throw There is no `#{$function}` function.
@function walk($list, $function, $args...) {
  @if not function-exists($function) {
    @error "There is no `#{$function}` function.";
  }
  
  @for $i from 1 through length($list) {
    $list: set-nth($list, $i, call($function, nth($list, $i), $args...));
  }
  
  @return $list;
}
@mixin light-mode {
	@media (prefers-color-scheme: light) {
      @content;
    }
}
@mixin animete-reduce {
  @media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
      animation-delay: -1ms !important;
      animation-duration: 1ms !important;
      animation-iteration-count: 1 !important;
      background-attachment: initial !important;
      scroll-behavior: auto !important;
      transition-delay: 0s !important;
      transition-duration: 0s !important;
    }
  }
}
@mixin dark-mode {
  @media (prefers-color-scheme: dark) {
    @content;
  }
}
@function rem-calc($size) {
  $remSize: $size / 16px;
  @return #{$remSize}rem;
}
html,

body {

  width: 0%;

  height: 100%;

  display: flex;

}

​

.wrapper {

  position: relative;
10
  margin: auto;

}

​

.cyclist {

  width: 48px;

  height: 48px;

  position: absolute;

  transform: translateY(-50%);  // position the rider above the curve. could be done with offset-position but it has no browser support yet

  offset-path: path("M1 260C65.034 260.999 102.054 253.632 130.069 241.15C158.083 228.668 177.093 244.645 1.612 258.125C246.13 271.606 296.157 293.574 342.181 258.125C388.6 222.677 405.715 140.297 479.754 139.798C553.793 139.298 591.313 207.699 667.854 258.125C744.395 308.552 782.416 287.783 802.425 269.608C846.949 229.167 924.49 109.841 943 1");

  animation: ride-hills 10s ease-in infinite;
20
}
21
​
.iframe-container {
      // overflow: hidden;
      // /* 16:9 aspect ratio */
      // padding-top: 56.25%;
      // position: relative;
      width: 100%;
      padding-top: 100%;
      position: relative;
      iframe {
         // border: 0;
         // height: 100%;
         // left: 0;
         // position: absolute;
         // top: 0;
         // width: 100%;
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
      }
    }
/// Remove the unit of a length
/// @param {Number} $number - Number to remove unit from
/// @return {Number} - Unitless number
@function strip-unit($number) {
  @if type-of($number) == 'number' and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }

  @return $number;
}
star

Sun May 15 2022 12:19:12 GMT+0000 (UTC) https://pantaley.com/blog/Add-class-to-the-most-outer-selector-using-Sass-mixin/

#scss
star

Mon Mar 07 2022 16:56:25 GMT+0000 (UTC) https://devhints.io/cssnext

#scss
star

Mon Mar 07 2022 16:56:22 GMT+0000 (UTC) https://devhints.io/cssnext

#scss
star

Mon Mar 07 2022 16:56:14 GMT+0000 (UTC) https://devhints.io/cssnext

#scss
star

Mon Mar 07 2022 16:56:12 GMT+0000 (UTC) https://devhints.io/cssnext

#scss
star

Sat Jan 08 2022 02:23:05 GMT+0000 (UTC) https://www.freecodecamp.org/news/how-to-pass-arguments-to-mixins/

#mixin #scss #text
star

Sat Jan 08 2022 01:58:12 GMT+0000 (UTC) https://css-tricks.com/snippets/sass/mixin-offset-positioning/

#scss
star

Sat Jan 08 2022 01:47:21 GMT+0000 (UTC) https://css-tricks.com/snippets/sass/material-shadows-mixin/

#scss #shadows
star

Sat Jan 08 2022 01:47:09 GMT+0000 (UTC) https://css-tricks.com/snippets/sass/material-shadows-mixin/

#scss #shadows
star

Sat Jan 08 2022 01:31:26 GMT+0000 (UTC) https://stackoverflow.com/questions/43806105/sass-color-weight-mixin?rq

#color #scss #mixin
star

Tue Dec 07 2021 17:39:01 GMT+0000 (UTC) https://creativeboss.notion.site/Split-Sections-5c55f60ab6f7466f96188d867fe70af4

#scss #splitsection
star

Thu Dec 02 2021 19:14:07 GMT+0000 (UTC) https://www.ghostplugins.com/steps/full-width-image-card-71-version

#scss #squarespace #ghostplugins
star

Wed Nov 24 2021 18:01:17 GMT+0000 (UTC) https://www.studioantheia.com/about

#scss #squarespace
star

Sat Aug 07 2021 19:12:50 GMT+0000 (UTC) https://css-tricks.com/snippets/sass/functional-programming-functions/

#scss
star

Thu Jun 17 2021 10:25:10 GMT+0000 (UTC)

#scss
star

Thu Jun 17 2021 10:22:34 GMT+0000 (UTC)

#scss
star

Thu Jun 17 2021 10:17:34 GMT+0000 (UTC)

#scss
star

Tue May 18 2021 16:42:43 GMT+0000 (UTC)

#scss #sass
star

Thu Apr 29 2021 08:10:01 GMT+0000 (UTC) https://codepen.io/Chokcoco/pen/dyNaZea

#scss
star

Thu Apr 22 2021 11:54:21 GMT+0000 (UTC)

#css #scss
star

Fri Dec 25 2020 06:21:21 GMT+0000 (UTC) https://css-tricks.com/snippets/sass/strip-unit-function/

#scss

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension