scss,Code片段,代码实例,代码示例,代码片段库

scss bXpvQo

bXpvQo

bxpvqo.markdown

bXpvQo
------


A [Pen](https://codepen.io/enutake/pen/bXpvQo) by [takeyuki nagano](https://codepen.io/enutake) on [CodePen](https://codepen.io).

[License](https://codepen.io/enutake/pen/bXpvQo/license).

index.html

<button class="btn">button</button>

script.js

const btn = document.querySelector('.btn');
btn.addEventListener('click', () => console.log("button"));

style.scss

$btn-width: 100px;
$btn-height: $btn-width/3;
$font-size: 16px;
.btn {
  background-color: skyblue;
  border: none;
  width: $btn-width;
  height: $btn-height;
  font-size: $font-size;
  font-weight: bold;
  border-radius: 3px;
  box-shadow: 1px 1px 1px 1px #ddd;
  cursor: pointer;
}

scss Flexbox的

flexbox.scss

//To make a separation after an element in flexbox we can use margin-right: auto
.overview {
	display: flex;

	&-heading {

	}
	&-stars {
		margin-right: auto;
	}
	&-location {

	}
	&-rating {

	}

scss blurredBackground

blurredBackground

.class {
    text-align: center;
    border-radius: 20px;
    border: 2px solid var(--green);
    box-shadow: var(--box-shadow);
    padding: 1rem 0;
    position: relative;
    &:before {
      position: absolute;
      content: "";
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: -1;
      display: block;
      background: var(--clear-grey);
      filter: blur(5px);
    }
  }

scss Sass中的间距

spacing.scss

$spacing-xxxxs: .15rem;
$spacing-xxxs: .25rem;
$spacing-xxs: .5rem;
$spacing-xs: .75rem;
$spacing-s: 1rem;
$spacing-m: 1.5rem;
$spacing-l: 2rem;
$spacing-xl: 2.5rem;
$spacing-xxl: 3rem;
$spacing-xxxl: 4rem;
$spacing-xxxxl: 8rem;
$spacing-xxxxxl: 10rem;

scss 会随着变换而改变

will-change CSS属性向浏览器提示如何改变元素。浏览器可以在元素实际更改之前设置优化。这些类型的优化可以通过在实际需要之前执行可能昂贵的工作来提高页面的响应性。

will-change.scss

.element {
  will-change: transform;
  transition: transform 200ms linear;
}

scss Sass中的评论

https://cssguidelin.es

comments-sass.scss

/*------------------------------------*\
  #SECTION-TITLE
\*------------------------------------*/

.selector { }

scss Autoplacement网格布局

autoplacement-grid-layout.scss

// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout
// grid-auto-flow: dense
@supports (display: grid) {
  .category .category-articles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
    grid-auto-flow: dense;
  }

  .category + .sidebar .article-list {
    display: grid;
    grid-template-columns: 1fr;
  }

  .category .category-articles li.bigger {
    grid-column-start: span 2;
  }

  .category .category-articles li,
  .category + .sidebar .article-list li {
    width: auto;
    margin-bottom: 0;
    margin-right: 0;
  }
}

scss SVG填充currentColor

svg-fill-currentColor.scss

&__link:link,
&__link:visited {
  color: red;
}

&__link:hover {
  color: orangered;
}

&__icon {
  fill: currentColor;
}

scss SVG蒙版改变颜色

svg-mask-change-color.scss

// https://codepen.io/chriscoyier/pen/bJXRwq?editors=0110
// https://twitter.com/chriscoyier/status/1124064712067624960

.icon-bike {
  mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-bike-black.svg);
}
.icon {
  display: inline-block;
  width: 70px;
  height: 70px;
  background: black;
  mask-size: cover;
}
.icon:hover,
.icon:focus {
  background: red;
}

scss SASS颜色函数和CSS变量

sass-color-functions-css-variables.scss

// https://codyhouse.co/blog/post/how-to-combine-sass-color-functions-and-css-variables
.component {
  background-color: alpha(var(--color-primary), 0.2);
}

// return css color variable with different opacity value
@function alpha($color, $opacity){
  $color: str-replace($color, 'var(');
  $color: str-replace($color, ')');
  $color-h: var(#{$color+'-h'});
  $color-s: var(#{$color+'-s'});
  $color-l: var(#{$color+'-l'});
  @return hsla($color-h, $color-s, $color-l, $opacity);
}

// replace substring with another string
// credits: https://css-tricks.com/snippets/sass/str-replace-function/
@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);
  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }
  @return $string;
}

@mixin defineColorHSL($color, $hue, $saturation, $lightness){
  #{$color}: unquote("hsl(#{$hue}, #{$saturation}, #{$lightness})");#{$color}-h: #{$hue};#{$color}-s: #{$saturation};#{$color}-l: #{$lightness};
}

:root, [data-theme="default"] {
  @include defineColorHSL(--color-primary, 220, 89%, 56%);
  @include defineColorHSL(--color-accent, 355, 90%, 61%);
  @include defineColorHSL(--color-black, 240, 8%, 12%);
  @include defineColorHSL(--color-white, 0, 0%, 100%);
  // color contrasts
  @include defineColorHSL(--color-bg, 0, 0%, 100%);
  @include defineColorHSL(--color-contrast-lower, 0, 0%, 95%);
  @include defineColorHSL(--color-contrast-low, 240, 1%, 83%);
  @include defineColorHSL(--color-contrast-medium, 240, 1%, 48%);
  @include defineColorHSL(--color-contrast-high, 240, 4%, 20%);
  @include defineColorHSL(--color-contrast-higher, 240, 8%, 12%);
}