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

scss 响应表

data.js

$('table').each(function () {
      let This = $(this);
      let lista = [];

      This.find('th').each(function (index) {
        console.log(index);
        let Th = $(this);
        let text = Th.text();
        lista.push(text);
      });

      This.find('tr').each(function () {
        $(this).find('td').each(function (index) {
          $(this).attr('data-label', lista[index]);
        });
    });
});

table.scss

@media screen and (max-width: 600px) {

  table caption {
    font-size: 1.5em;
    margin: .5em 0 .75em;
  }

  table tr {
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    padding: .39em;
  }

  table th,
  table td {
    padding: .625em;
    text-align: center;
  }

  table th {
    font-size: .85em;
    letter-spacing: .1em;
    text-transform: uppercase;
  }


  table {
    border: 0;

    caption {
      font-size: 1.3em;
    }

    thead {
      border: none;
      clip: rect(0 0 0 0);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
    }

    tr {
      border-bottom: 3px solid #ddd;
      display: block;
      margin-bottom: .625em;
    }

    td {
      border-bottom: 1px solid #ddd;
      display: block;
      font-size: .8em;
      text-align: right;
    }

    td::before {

      /*
      * aria-label has no advantage, it won't be read inside a table
      content: attr(aria-label);
      */
      content: attr(data-label);
      float: left;
      font-weight: bold;
      text-transform: uppercase;
    }
  }

  table td:last-child {
    border-bottom: 0;
  }
}

scss 离子水平卡片卷轴

component.html


  <div scrollx="true" class="scrolling-cards">
    <ion-card>
      <ion-card-header>
        <ion-card-subtitle>This is a</ion-card-subtitle>
        <ion-card-title>Nice Card</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        This is some nice content
      </ion-card-content>
    </ion-card>

    <ion-card>
      <ion-card-header>
        <ion-card-subtitle>This is a</ion-card-subtitle>
        <ion-card-title>Nice Card</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        This is some nice content
      </ion-card-content>
    </ion-card>

    <ion-card>
      <ion-card-header>
        <ion-card-subtitle>This is a</ion-card-subtitle>
        <ion-card-title>Nice Card</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        This is some nice content
      </ion-card-content>
    </ion-card>
  </div>

style.scss

div[scrollx=true], div[scrolly=true] {
    position: relative;
    overflow: hidden;

    ::-webkit-scrollbar {
        display: none;
    }
}
  
div[scrollx=true] {
    overflow-x: auto;
}
  
div[scrolly=true] {
    overflow-y: auto;
}

scss 规范化CSS

scss

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
  ========================================================================== */

/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
    ========================================================================== */

/**
  * Remove the margin in all browsers.
  */

body {
  margin: 0;
}

/**
  * Render the `main` element consistently in IE.
  */

main {
  display: block;
}

/**
  * Correct the font size and margin on `h1` elements within `section` and
  * `article` contexts in Chrome, Firefox, and Safari.
  */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
    ========================================================================== */

/**
  * 1. Add the correct box sizing in Firefox.
  * 2. Show the overflow in Edge and IE.
  */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
  * 1. Correct the inheritance and scaling of font size in all browsers.
  * 2. Correct the odd `em` font sizing in all browsers.
  */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
    ========================================================================== */
  .sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}
/**
  * Remove the gray background on active links in IE 10.
  */

a {
  background-color: transparent;
}

/**
  * 1. Remove the bottom border in Chrome 57-
  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
  */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
  * Add the correct font weight in Chrome, Edge, and Safari.
  */

b,
strong {
  font-weight: bolder;
}

/**
  * 1. Correct the inheritance and scaling of font size in all browsers.
  * 2. Correct the odd `em` font sizing in all browsers.
  */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
  * Add the correct font size in all browsers.
  */

small {
  font-size: 80%;
}

/**
  * Prevent `sub` and `sup` elements from affecting the line height in
  * all browsers.
  */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
    ========================================================================== */

/**
  * Remove the border on images inside links in IE 10.
  */

img {
  border-style: none;
}

/* Forms
    ========================================================================== */

/**
  * 1. Change the font styles in all browsers.
  * 2. Remove the margin in Firefox and Safari.
  */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
  font-size: 16px;
  height: 38px;
  border-radius: 3px;
}

/**
  * Show the overflow in IE.
  * 1. Show the overflow in Edge.
  */

button,
input { /* 1 */
  overflow: visible;
}

/**
  * Remove the inheritance of text transform in Edge, Firefox, and IE.
  * 1. Remove the inheritance of text transform in Firefox.
  */

button,
select { /* 1 */
  text-transform: none;
}

/**
  * Correct the inability to style clickable types in iOS and Safari.
  */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
  * Remove the inner border and padding in Firefox.
  */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
  * Restore the focus styles unset by the previous rule.
  */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
  * Correct the padding in Firefox.
  */

fieldset {
    padding: 0;
    border: none;
}

/**
  * 1. Correct the text wrapping in Edge and IE.
  * 2. Correct the color inheritance from `fieldset` elements in IE.
  * 3. Remove the padding so developers are not caught out when they zero out
  *    `fieldset` elements in all browsers.
  */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
  * Add the correct vertical alignment in Chrome, Firefox, and Opera.
  */

progress {
  vertical-align: baseline;
}

/**
  * Remove the default vertical scrollbar in IE 10+.
  */

textarea {
  overflow: auto;
}

/**
  * 1. Add the correct box sizing in IE 10.
  * 2. Remove the padding in IE 10.
  */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
  * Correct the cursor style of increment and decrement buttons in Chrome.
  */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
  * 1. Correct the odd appearance in Chrome and Safari.
  * 2. Correct the outline style in Safari.
  */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
  * Remove the inner padding in Chrome and Safari on macOS.
  */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
  * 1. Correct the inability to style clickable types in iOS and Safari.
  * 2. Change font properties to `inherit` in Safari.
  */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
    ========================================================================== */

/*
  * Add the correct display in Edge, IE 10+, and Firefox.
  */

details {
  display: block;
}

/*
  * Add the correct display in all browsers.
  */

summary {
  display: list-item;
}

/* Misc
    ========================================================================== */

/**
  * Add the correct display in IE 10+.
  */

template {
  display: none;
}

/**
  * Add the correct display in IE 10.
  */

[hidden] {
  display: none;
}

h1,h2,h3,h4,h5,h6 {
  margin-top: 0;
}

.desktop-only {
  @media (max-width: 991px) {
    display: none !important;
  }
}
.mobile-only {
  @media (min-width: 992px) {
    display: none !important;
  }
}

scss 原子类

在codepen写演示时候能用

scss.scss

@each $height in 10,20,30,40,50,100,200{
  height#{$height}{
    height:$height;
  }
}

@each $borderColor in red,blue,yellow,orange,black{
  border-#{$borderColor}{
    border:1px solid $borderColor;
  }
}

scss SCSS Triangle

trienle.scss

/*Triangle mixin*/
@mixin css-triangle($direction, $color, $height, $width) {
    // Base styles for all triangles
    border-style: solid;
    height: 0;
    width: 0;
    // Cardinal Directions - can't be scalene this way
    @if($direction == 'top') {
        border-color: transparent transparent $color transparent;
        border-width: 0 ($width/2) $height ($width/2);
        }
    @if ($direction == 'bottom') {
        border-color: $color transparent transparent transparent;
        border-width: $height ($width/2) 0 ($width/2);
        }
    @if ($direction == 'right') {
        border-color: transparent transparent transparent $color;
        border-width: ($height/2) 0 ($height/2) $width;
        }
    @if ($direction == 'left') {
        border-color: transparent $color transparent transparent;
        border-width: ($height/2) $width ($height/2) 0;
        }
    // Ordinal Directions - can be scalene this way!
    @if ($direction == 'top-left') {
        border-color: $color transparent transparent transparent;
        border-width: $height $width 0 0;
        }
    @if ($direction == 'top-right') {
        border-color: transparent $color transparent transparent;
        border-width: 0 $width $height 0;
        }
    @if ($direction == 'bottom-left') {
        border-color: transparent transparent transparent $color;
        border-width: $height 0 0 $width;
        }
    @if ($direction == 'bottom-right') {
        border-color: transparent transparent $color transparent;
        border-width: 0 0 $height $width;
        }
    }

scss 断点

断点

breakpoint.markdown

Breakpoint
----------


A [Pen](https://codepen.io/tak-dcxi/pen/xoWedg) by [tak-dcxi](https://codepen.io/tak-dcxi) on [CodePen](https://codepen.io).

[License](https://codepen.io/tak-dcxi/pen/xoWedg/license).

style.scss

$break-point: (
  sp: 767px,
  tb: 991px,
  smpc: 1200px
);

@mixin mq($key) {
  @media screen and (max-width: map-get($break-point, $key)) {
    @content;
  }
}

scss CSS过渡

transitions.scss

.box {
    height: 10rem;
    width: 10rem;
    background: #4a9bb1;
    // muutuse kestus, soovitatav märkida millisekundites, kuna JS ühikuks vaikimisi on millisekund
    // transition-duration: 500ms;
    // mis muutub, saab kasutada väärtusi all, mis rakendab transitioni kõigile elementidele, või siis nimetada neid ükshaaval komaga eraldades
    // transition-property: background, transform;
    // muutuse ajamäär, vb linear, ease-in, ease-out ja ease-in-out
    // transition-timing-function: ease-in-out;
    // alguse viide, ehk kaua animatsiooni algusega viideteakse
    // transition-delay: none;
    // Kõik need saab kirjutada ka ühele reale
    transition: 500ms all ease-in-out;
    &:hover {
        background: #62a769;
        transform: rotate(45deg);
    }

scss 粘滞的社交媒体按钮漂浮在页面的一侧

我为PRC设置了这个，这是一个Drupal 8站点。但是，这也适用于WordPress。

Howto.md

How they look/act:

1. The socialsharing buttons live inside the main content area, but outside the content container.
2. On smaller screens they are oriented horizontally above the title and scroll with the content.
3. On larger screens they are oriented vertically and are "sticky" They stay centered at 50% until the main content slides off the screen and then they slide offscreen with the main content (not floating over the footer).

Things of note:
1.   The main content block has `position: relative;`
2.   The socialsharing icons are double wrapped. 
      * On smaller screens, the outside wrapper has the same max-widths as a `.container` so it matches the width & margins of the content.
      * On larger screens, the outside wrapper has `position: absolute;` and `height: 100%;`. This makes the wrapper actually fill 100% of the height of the main content area, giving a "track" that the social media icons can slide around inside. 
3.   On smaller screens, the inner container is a horizontally oriented flexbox.
4.   On larger screens, the inner container is a vertically oriented flexbox.
5.   In order to be in the main content area but outside the container, the socialsharing twig template is included in the base.twig template, with a 'sticky-left' modifier:
 ```
{% if not homepage %}
  {% include "@molecules/15-social-media/10-sharing-buttons/10-sharing-buttons.twig" with {
    socialsharing_modifiers: ['sticky-left'],
    facebook: true,
    twitter: true,
    sharethis: true
  } only %}
{% endif %}
```

10-sharing-buttons.twig

{% set wrapper_mods = '' %}

{% set mods = '' %}
{% for mod in socialsharing_modifiers %}
  {% set mods = mods ~ " socialsharing--" ~ mod %}
{% endfor %}

<div class="socialsharing__wrapper">
  <div class="socialsharing {{ mods }}">
    {% if twitter %}
      <div class="socialsharing__button st-custom-button" data-network="twitter">
        <i class="icon icon-twitter" title="{{ 'Share on Twitter'|trans }}"></i>
      </div>
    {% endif %}

    {% if facebook %}
      <div class="socialsharing__button st-custom-button" data-network="facebook">
        <i class="icon icon-facebook" title="{{ 'Share on Faceook'|trans }}"></i>
      </div>
    {% endif %}

    {% if sharethis %}
      <div class="socialsharing__button st-custom-button" data-network="sharethis">
        <i class="icon icon-sharethis" title="{{ 'Share with ShareThis'|trans }}"></i>
      </div>
    {% endif %}
  </div>
</div>

_10-sharing-buttons.scss

@import "../../../variables";
@import "../00-social-link/00-social-link";


.socialsharing__wrapper {
  $socialsharing-breakpoint: 1020px;
  $socialsharing-max-widths:
    ($breakpoint-sm: 540px,
    $breakpoint-md: 720px,
    $breakpoint-lg: 960px);

  margin-right: auto;
  margin-left: auto;
  @include rem('padding-left', $gutter-width);
  @include rem('padding-right', $gutter-width);
  position: relative;

  @each $breakpoint,
  $max-width in $socialsharing-max-widths {
    @include breakpoint($breakpoint) {
      max-width: $max-width;
    }
  }

  @include breakpoint($socialsharing-breakpoint) {
    height: 100%;
    margin: 0;
    max-width: unset;
    padding: 0;
    position: absolute;
    top: 0;
  }

  .socialsharing {
    display: flex;
    position: relative;
    @include socialmedia(40px, 17px, $color--marine-blue, white, false);

    @media (min-width: $socialsharing-breakpoint) {
      display: block;
      padding-bottom: 0;
      padding-left: 0;
      position: absolute;
      @include rem('top', 100px);
    }

    &--sticky-left {
      @include rem('padding-bottom', 20px);

      @media (min-width: $socialsharing-breakpoint) {
        position: sticky;
        // 132px is the height of the header
        top: calc(50% + 132px);
        transform: translateY(-50%);
      }

      .socialsharing__button {

        @media (min-width: $socialsharing-breakpoint) {
          @include rem('margin-bottom', 7px);
        }
      }
    }
  }

  .socialsharing__button {
    cursor: pointer;
  }
}

scss 使用CSS搜索自定义员工目录

你需要一个团队中的一些工作人员能够进行整理吗？别再看了。这将允许按部门（标签），名字（第一个字母）和过滤（通过css）作为用户类型的搜索字段进行搜索。 ie- http://cloud.madebyspeak.com/227cf4

html.html

<style id="search_style"></style>
<div id="team-wrapper">
   
   <div class="search-wrapper">
      <div class="letter-search">
         <a href="#">A</a><a href="#">B</a><a href="#">c</a><a href="#">d</a><a href="#">e</a><a href="#">f</a><a href="#">g</a><a href="#">h</a><a href="#">i</a><a href="#">j</a><a href="#">k</a><a href="#">l</a><a href="#">m</a><a href="#">n</a><a href="#">o</a><a href="#">p</a><a href="#">q</a><a href="#">r</a><a href="#">s</a><a href="#">t</a><a href="#">u</a><a href="#">v</a><a href="#">w</a><a href="#">x</a><a href="#">y</a><a href="#">z</a>
      </div>
      <div class="advanced-search">
         <div class="dropdown-search">
            <select name="department-tag" id="departmentTag">
               <option value="clear" class="clear-filter">Filter By Department</option>
               {% assign tags = List.Items | MapMany: "FieldValues.Department" %}
               {% assign uniqTags = tags | Uniq %}
               {% for tag in uniqTags -%}
                  <option value="{{ tag.Label | Downcase | Remove: ' ' }}" class="filter-tag">{{ tag.Label }}</option>
               {% endfor -%}
            </select>
         </div>
         <div class="input-search">
            <input type="text" placeholder="Search here..." id="TeamSearch">
         </div>
         <div class="clear-all">
            <a href="#" id="clearAll" class="hiding">Clear</a>
         </div>
      </div>
   </div>


   <div class="team-members">
      <ul>
         {% assign sorted = List.Items | OrderBy:'FieldValues.FirstName' %}  
         {% for Item in sorted -%}
         <li class="searchable" data-index="{{ Item.FieldValues.FirstName | Downcase }}{{ Item.FieldValues.LastName | Downcase }}{{ Item.FieldValues.JobTitle | Downcase }}{{ Item.FieldValues.EmailAddress | Downcase }}{{ Item.FieldValues.JobTitle | Downcase }}
         {% if Item.FieldValues.Department -%}{% for tag in Item.FieldValues.Department -%}{{ tag.Label | Downcase | Remove: ' ' }}{% endfor -%}{% endif -%}" name="{% if Item.FieldValues.Department -%}{% for tag in Item.FieldValues.Department -%}{{ tag.Label | Downcase | Remove: ' ' }}{% endfor -%}{% endif -%}">
            <dl>           
               <div class="image-wrapper bg-image-js">
                  <img src="{{ Item.FieldValues.ProfileImage }}" alt="{{ Item.FieldValues.FirstName }} ">
               </div>
               
               <div class="name">
                  <a href="//{{ Item.FieldValues.LinkedinProfile }}" target="_blank">{{ Item.FieldValues.FirstName }} {{ Item.FieldValues.LastName }}</a>
               </div>
               <span class="job-title">{{ Item.FieldValues.JobTitle }}</span>
               <span class="email"><a href="mailto:{{ Item.FieldValues.EmailAddress }}">{{ Item.FieldValues.EmailAddress }}</a></span>
            </dl>
         </li>
         {% endfor -%}
      </ul>
   </div>
</div>

js.js

$("#team-wrapper").each(function() {

  
   jQ171(document).ready(function($) {
      var searchStyle = $("#search_style");

       // input text quick search filter
      $("input#TeamSearch").on("keyup", function() {
         if (!this.value) {
            searchStyle.html("");
            $("#clearAll").addClass("hiding");
            return;
         }
         searchStyle.html(".searchable:not([data-index*=\"" + this.value.toLowerCase() + "\"]) { display: none!important; }");
         $("#clearAll").removeClass("hiding");
      })

      // department dropdown filter
      $("#departmentTag").on("change", function() {
         var currentTag = $("#departmentTag").find(":selected").val();
              
         $("#team-wrapper li.searchable").each(function() {
            var itemTag = $(this).attr("name");

            if (itemTag == currentTag) {
               $(this).show();
               $("#clearAll").removeClass("hiding");
            } else {
               $(this).hide();
               $("#clearAll").removeClass("hiding");
            }

            if (currentTag == "clear" ) {
               $("#team-wrapper .searchable").show();
               $("#clearAll").addClass("hiding");
            }
         })
      })

      // alphabet soup search

     
      $(".letter-search a").on("click", function() {
         var theLetter = $(this).text().toLowerCase();
                  
         $("li.searchable").each(function() {
            if ($(this).find(".name a").text().toLowerCase().startsWith(theLetter)) {
               $(this).show();
            } else {
               $(this).hide();
            }
         })
         $("#clearAll").removeClass("hiding");
         return false;  
      });
      
      //clear button

      $("#clearAll").click(function() {
         $("#departmentTag").val('clear');
         $("#TeamSearch").val("");
         $("li.searchable").css("display", "block");
         $("#clearAll").addClass("hiding");
         searchStyle.html("");
         return false;
      })
     
   });
})

style.scss

$blue: #002F6C;
$lightBlue: #A7C6ED;

#team-wrapper {
	width: 100vw;
	
	.search-wrapper {
		overflow: hidden;
		width: 900px;
		max-width: 100%;
		margin: 0 auto;
		margin-bottom: 25px;
		background: #eee;
		box-shadow: 0 5px 10px rgba(0,0,0,.2);
		padding: 40px 25px ;
		.letter-search {
			text-align: center;
			display: flex;
			flex-direction: row;
			justify-content: center;
			flex-wrap: wrap;
			a {
				margin: 0 5px;
				font-size: 21px;
				text-transform: uppercase;
			}
		}
		.advanced-search {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;
			width: 100%;
			position: relative;
			> div {
				flex-basis: 45%;
				margin: 25px auto;
				margin-bottom: 0;
				@media (max-width: 767px) {
					flex-basis: 100%;
				}
				select, 
				input {
					background: white;
					margin: 0;
					width: 100%;
					padding: 5px;
					height: 35px;
					outline: none;
					border-radius: 0!important;
					border: 1px solid rgba(0,0,0,.5);
				}
				&.clear-all {
					flex-basis: 100%;
					text-align: center;
					position: relative;
					a {
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -30%);
						display: inline-block;
						padding: 5px 15px;
						background-color: #BA0C2F;
						color: white;
						border-radius: 5px;
						box-shadow: 0 5px 6px rgba(0,0,0,0);
						transition: all .33s ease;
						&.hiding {
							transform: translate(-50%, 130%);
						}
						&:hover {
							background-color: lighten(#BA0C2F, 10%);
							box-shadow: 0 5px 8px rgba(0,0,0,.2);
						}
					}
				}
			}
		}
	}
	.team-members {
		position: relative;
		margin: 0 auto;
		width: 1200px;
		max-width: 100%;
		ul {
			list-style: none;
			padding-left: 0;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-evenly;
			li.searchable {
				text-align: center;
				flex-basis: 19%;
				padding: 2%;
				@media (max-width: 1100px) {
					flex-basis: 23%;
				}
				@media (max-width: 767px) {
					flex-basis: 30%;
				}
				@media (max-width: 550px) {
					flex-basis: 45%;
				}
				@media (max-width: 400px) {
					flex-basis: 100%;
				}
				dl {
					.image-wrapper {
						margin: 0 auto;
						width: 100%;
						height: 190px;
						background-size: cover;
						background-position: center;
						background-repeat: no-repeat;
					}
					span {
						display: block;
						font-size: 2rem;
					}
					.name {
						a {
							color: $blue;
						}
					}
					.job-title {
						font-size: 12px;
						color: $lightBlue;
						margin: 2px auto;
					}
					.email {
						word-break: break-all;
						font-size: 1.5rem;
						a {
							color: $blue;
						}
					}
				}
			}
		}
	}
}

scss Matrix YouTube API视频轮播

使用Tiny Slider [1]和YouTube Data API v3 [2]，此代码片段将搜索用户的频道ID，抓取您指定的许多视频，并将其旋转到您的dom旋转木马中。 1 - https://github.com/ganlanyuan/tiny-slider 2 - https://developers.google.com/youtube/v3/ ie - http://cloud.madebyspeak.com/eec7b1

matrix-template.html

<div id="recent-videos">
    <div class="left-side">
        <div class="video-placeholder">
            <iframe src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
    </div>
    <div class="right-side">
        {{ Module.FieldValues.SectionText }}
        <ul class="video-list"></ul>
    </div>
</div>

matrix-body-template.html

<script src="https://apis.google.com/js/api.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.8.8/min/tiny-slider.js"></script>  
<script>
    function loadClient() {
        return gapi.client.load("https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest")
            .then(function () {
                    console.log("GAPI client loaded for API");
                    gapi.client.setApiKey("{{ Module.FieldValues.ApiKey }}");
                    execute();
                },
                function (err) {
                    console.error("Error loading GAPI client for API", err);
                });
    }
    // Make sure the client is loaded before calling this method.
    function execute() {
        return gapi.client.youtube.search.list({
                "part": "snippet",
                "channelId": "{{ Module.FieldValues.YtChannelId }}",
                "maxResults": {{ Module.FieldValues.MaxNumberOfVideosToPull }},
                "order": "date",
                "safeSearch": "none",
                "type": "video",
                "alt": "json",
                "prettyPrint": true
            })
            .then(function (response) {
                    // Handle the results here (response.result has the parsed body).
                    console.log("Response", response);

                    // we connected, now let's use that json

                    var theList = document.querySelector("ul.video-list");


                    for (var i = 0, l = response.result.items.length; i < l; i++) {
                        var item = response.result.items[i];
                        // console.log(item);
                        var vidTitle = document.createElement("span"),
                            vidListItem = document.createElement("li")
                            vidID = document.createElement("a"),
                            vidThumb = document.createElement("img");

                        vidTitle.textContent = item.snippet.title;
                        vidID.setAttribute("href", "https://www.youtube.com/embed/" + item.id.videoId + "?autoplay=1");
                        vidThumb.setAttribute("src", item.snippet.thumbnails.high.url);

                        // put things in the li tag
                        vidListItem.appendChild(vidID);

                        //put things into li > a
                        vidID.appendChild(vidThumb);
                        vidID.appendChild(vidTitle);

                        // add that item to the html list
                        theList.appendChild(vidListItem);

                    }

                    // cleanup 
                    $(".video-list li").each(function () {
                        var theTitle = $(this).find("span"),
                            theImage = $(this).find("img");

                        theTitle.text($(this).text().replace(/&amp;/g, "&"));
                        theImage.wrap("<div class='img-wrapper' />");
                    });
                    
                    // background that image
                    $(".img-wrapper").each(function () {
                        var img = $(this).find("img");
                        if (img.attr("src") !== undefined) {
                            $(this).css({
                                "background-image": "url(" + img.attr("src") + ")",
                            });
                            img.remove();
                        }
                    });
                    
                    // make the most recent vid the one to display a preview of
                    var theFirstLink = $(".video-list li:nth-child(1)").find("a").attr("href"),
                        newLink = theFirstLink.replace(/autoplay=1/g, "");
                    $("#recent-videos .video-placeholder iframe").attr("src", newLink);

                    // placing into carousel
                    jQ171(document).ready(function ($) {
                        var vidslider = tns({
                            container: '.video-list',
                            items: 2,
                            slideBy: 'page',
                            nav: 'true',
                            gutter: 0,
                            mouseDrag: true,
                            controlsText: ['&#XF053;', '&#XF054;'],
                            controlsPosition: 'bottom',
                            nav: false,
                            loop: false,
                            responsive: {
                                768: {
                                    items: 2,
                                    gutter: "25"
                                },
                                1300: {
                                    items: 4,
                                    gutter: "50",

                                }
                            }

                        });

                    });


                    //    click video to load on left for desktop
                    if ($(window).width() > 767) {
                        $('.video-list li a').click(function () {
                            $('#recent-videos .video-placeholder iframe').attr('src', $(this).attr('href'));
                            return false;
                        });

                    }



                },
                function (err) {
                    console.error("Execute error", err);
                });
    }
    gapi.load("client");
    setTimeout(loadClient, 3000);
</script>

style.scss

$white: #e3e3e3;
$grey: #707070;
$black: #141414;


#recent-videos {
	width: 100%;
	display: flex;
	position: relative;
	flex-direction: row;
	justify-content: space-between;
	padding: 75px 0;
	@media (max-width: 767px) {
		display: block;
		padding: 50px 15px;
	}
	.left-side {
		position: relative;
		width: 50%;
		flex-basis: 50%;
		@media (max-width: 767px) {
			display: none;
		}
		.video-placeholder {
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			min-height: 500px;
			.embed-container {
				height: 100%;
			}
		}
	}
	.right-side {
		flex-basis: 45%;
		width: 45%;
		@media (max-width: 767px) {
			width: 100%;
			text-align: center;
		}
		ul {
			padding-left: 0;
			margin-top: 50px;
			li {
				a {
					bottom: 0;
					position: relative;
					.img-wrapper {
						width: 150px;
						height: 150px;
						border-radius: 5px;
						background-size: cover;
						background-repeat: no-repeat;
						background-position: center;
						position: relative;
						overflow: hidden;
						@media (max-width: 767px) {
							margin: 0 auto;
						}
						&:before {
							transition: all .33s ease;
							opacity: 1;
							content: "\f04b";
							left: 50%;
							top: 50%;
							line-height: 150px;
							text-align: center;
							transform: translate(-50%, -50%);
							font-size: 40px;
							font-family: fontawesome;
							color: rgba(white, .5);
							background: rgba($black, .1);
							width: 150px;
							height: 150px;
							position: absolute;

						}

					}
					span {
						padding: 10px 0;
						width: 150px;
						font-size: 15px;
						line-height: 1.2;
						display: block;
						color: lighten($black, 30%);
						font-weight: 400;
						transition: all .33s ease;
						@media (max-width: 767px) {
							margin: 0 auto;
							width: 150px;
						}

					}
					&:hover {
						bottom: 5px;
						.img-wrapper:before {
							background: rgba($black, 0);
							opacity: 0;
						}
						span {
							color: $black;
						}
					}
				}
			}
		}
		.tns-controls {
			button {
				-webkit-appearance: none;
				border: none;
				font-family: fontawesome;
				background: none;
				color: $grey;
				font-size: 25px;
				margin: 10px;
				@media (max-width: 767px) {}
				&[disabled] {
					color: lighten($grey, 30%);
				}
				&[data-controls="prev"] {
					@media (min-width: 768px) {
						margin-left: 0;
					}
				}
			}
		}
	}
}