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

scss 箭头宽

_common.scss

.arrow-wide {
                    position: absolute;
                    top: 50%;
                    right: 5px;
                    font-size: 47px;
                    height: 1em;
                    width: 0.25em;
                    display: block;
                    
                    &:before,
                     &:after{
                        position: absolute;
                        left: 50%;
                        display: block;
                        content: '';
                        width: 0.25em;
                        height: 0.5em;
                        background: $gray;
                    }
                    
                    &:before {
                        top: 0;
                        transform: skew(30deg);
                    }
                    
                    &:after {
                        bottom: 0;
                        transform: skew(-30deg);
                    }
                }

scss 使用Sass的实用程序类

https://alwaystwisted.com/articles/creating-utility-classes-with-design-tokens-using-sass

utility-classes-1.scss

$ds-color-map: (
  green-100: #c8e6c9,
  green-200: #a5d6a7,
  green-300: #81c784
);

@mixin color-utilities {
  @each $name, $hex in $ds-colors-map {
    &-#{$name} {
      color: $hex;
    }
  }
}

.u-color-text {
  @include color-utilities();
}

/* 
Result:
.u-color-text-green-100 {
  color: #c8e6c9;
}
.u-color-text-green-200 {
  color: #a5d6a7;
}
.u-color-text-green-300 {
  color: #81c784;
}
*/

utility-classes-2.scss

$ds-color-map: (
  green-100: #c8e6c9,
  green-200: #a5d6a7,
  green-300: #81c784
);

@mixin color-utilities($property: 'color') {
  @each $name, $hex in $vf-colors-map {
    &-#{$name} {
      #{$property}: $hex;
    }
  }
}

.u-color-text {
  @include color-modifiers();
}
.u-color-background {
  @include color-modifiers(background-color);
}

/*
Result:

.u-color-text-green-100 {
  color: #c8e6c9;
}

.u-color-background-green-100 {
  background-color: #c8e6c9;
}

.u-color-border-green-100 {
  border-color: #c8e6c9;
}
*/
.u-color-border {
  @include color-modifiers(border-color);
}

scss 水平居中

_alignment.scss

@mixin center-horizontally {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

scss 自定义列表css

custom-lists.scss

ul {
  list-style-position: inside;
  margin-left: 1.8rem;

  li::before {
    content: "\25CF";
    color: $open-color-primary;
    display: inline-block;
    width: 1em;
    margin-left: -2em;
    margin-right: .5em;
    text-align: right;
    direction: rtl;
    font-size: 1.1rem;
  }
}

ol {
  list-style: none;
  counter-reset: li;
  list-style-position: inside;
  margin-bottom: $spacing-xxl;
  margin-left: 2rem;

  li::before {
    content: counter(li) ". ";
    color: $open-color-primary;
    display: inline-block;
    width: 1em;
    margin-left: -1.5em;
    margin-right: .4em;
    text-align: right;
    font-size: 1.4rem;
  }

  li {
    counter-increment: li;
  }
}

scss 关闭按钮KendoUI的位置（下拉列表，组合框）

scss

::ng-deep.k-dropdown-wrap.k-state-default .k-icon.k-clear-value.k-i-close {
    top: 7px;
    left: calc(1.4285714286em + 25px);
}

scss 基本重置

basic-reset.scss

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-size: 62.5%; // 10px/16px = 62.5% -> 1rem = 10px
}

body {
  font-family: Roboto, sans-serif;
  font-weight: 300;
  line-height: 1.6;
  color: #777;
}

scss 标题视频

header-video.html

<header class="header-background">
    <!-- Background video -->
    <div class="fullwidth-video-bg">
      <video
        playsinline
        muted
        autoplay
        loop
      >
        <source src="~assets/thdmi/videos/the-video.mp4" type="video/mp4">
      </video>
    </div>
    <!-- Other things -->
  </header>

header-video.vue

mounted: function () {
    // To correct display height for mobile
    if (process.browser) {

      this.prefersReducedMotion()

      this.videoForMobile()
    }
  },
  
    methods: {
      prefersReducedMotion() {
      const video = document.querySelector('video')

      if (window.matchMedia('(prefers-reduced-motion)').matches) {
        video.removeAttribute('autoplay')
        video.pause()
      }
    },

    videoForMobile() {
      const video = document.querySelector('video')

      // For Chrome in Android
      video.muted = true
      video.play()
    }
  }

header-video.scss

.fullwidth-video-bg {
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      overflow: hidden;

      background-size: cover;
      background-color: transparent;
      background-repeat: no-repeat;
      background-position: 0% 50%;
      background-image:url(~assets/thdmi/images/background-header.png);
    }

    video {
      margin: auto;
      position: absolute;
      z-index: 1;
      top: 50%;
      left: 0%;
      transform: translate(0%, -50%);
      visibility: visible;
      opacity: 1;
      width: 100%;
      height: 100%;
      object-fit: cover;

      /** For Edge**/
      @supports (-ms-ime-align:auto) {
        object-fit: none;
        margin: none;
        position: inherit;
        z-index: 1;
        top: 50%;
        left: 0%;
        transform: translate(0%, -50%);
        height: auto;
        width: 100%;
      }

      /** For IE11 */
      @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
        object-fit: none;
        margin: none;
        position: inherit;
        z-index: 1;
        top: 50%;
        left: 0%;
        transform: translate(0%, -50%);
        height: auto;
        width: 100%;
      }
    }

scss 按钮转换变换比例

button-scale-transition.scss

button {
  transition: all 0.2s ease-in-out;

  &:active {
    transform: scale(0.95);
  }
}

scss 按钮焦点可访问性

button.focus.scss

button {
  &:focus {
    outline: none;
    box-shadow: 0 0 2px #555;
  }
}

scss 字体

font-face.scss

@font-face {
  font-family: "Noto-Sans-TC";
  src: url("~assets/fonts/noto-sans-tc.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

$font-family-title: "Noto-Sans-TC", Helvetica, Arial, sans-serif;

.title {
  font-family: $font-family-title;
}