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

scss Matrix Hero Image（基于下拉的样式）

基于下拉列表和模块值的英雄样式。字符串，即使是空的，也是真实的|| https://shopify.github.io/liquid/basics/truthy-and-falsy/ 即http://cloud.madebyspeak.com/cfc359

html.html

<div id="default-hero" class="{{ Module.FieldValues.LinesColor }} {{ Module.FieldValues.BackgroundColor }}">
   <div class="the-filter"></div>
   <div class="the-image bg-img">
      <img src="{{ Module.FieldValues.BackgroundImage }}" alt="">
   </div>

   <svg class="freeline" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
      x="0px" y="0px" width="819px" height="15" viewBox="0 0 819 6" style="enable-background:new 0 0 819 6;"
      xml:space="preserve">
      <line class="the-line" x1="0" y1="3" x2="819" y2="3" />
   </svg>
   <svg class="freeline" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
      x="0px" y="0px" width="819px" height="15" viewBox="0 0 819 6" style="enable-background:new 0 0 819 6;"
      xml:space="preserve">
      <line class="the-line" x1="0" y1="3" x2="819" y2="3" />
   </svg>


   {% if Module.FieldValues.PageTitle != nil and Module.FieldValues.PageTitle != ""  %}
   <h1 class="custom-title">{{ Module.FieldValues.PageTitle }}</h1>
   {% else %}
   <h1 class='page-title'></h1>
   {% endif %}
</div>

<script>
   if ($("h1.page-title").length) {
      $("h1.page-title").text($("title").text());
   }
</script>

css.scss

$black: #272f32;
$green: #2f5d67;
$olive: #b0b2a4;
$salmon: #e9bda3;
$white: #f7f0ea;

section.hero {
	margin-bottom: 15px;
	#default-hero {
		position: relative;
		height: 100%;
		min-height: 500px;
		.the-filter {
			width: 100%;
			height: 100%;
			content: "";
			position: absolute;
			left: 0;
			top: 0;
			opacity: 1;
		}
		.the-image {
			position: absolute;
			background-position: center;
			background-size: cover;
			width: 100%;
			height: 100%;
			filter: grayscale(95%);
			opacity: .3;
			&:after {
				content: "";
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
				position: absolute;
				background: rgb(255,255,255);
				background: linear-gradient(180deg, rgba(255,255,255,0) 60%, rgba(255,255,255,1) 100%);
			}
		}
		&.bg-black .the-filter {
			background: $black;
			background: linear-gradient(180deg, rgba($black,1) 0%, rgba(white,1) 80%);
		}
		&.bg-green .the-filter {
			background: $green;
			background: linear-gradient(180deg, rgba($green,1) 0%, rgba(white,1) 80%);
		}
		&.bg-gray .the-filter {
			background: $olive;
			background: linear-gradient(180deg, rgba($olive,1) 0%, rgba(white,1) 80%);
		}
		&.bg-pink .the-filter {
			background: $salmon;
			background: linear-gradient(180deg, rgba($salmon,1) 0%, rgba(white,1) 80%);
		}
		&.bg-white .the-filter {
			background: $white;
			background: linear-gradient(180deg, rgba($white,1) 0%, rgba(white,1) 80%);
		}
		&.color-black .the-line {
			stroke: $black;
		}
		&.color-green .the-line {
			stroke: $green;
		}
		&.color-gray .the-line {
			stroke: $olive;
		}
		&.color-pink .the-line {
			stroke: $salmon;
		}
		&.color-white .the-line {
			stroke: $white;
		}
	}
	.page-title,
	.custom-title {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
}

scss Matrix Hero Image（基于下拉的样式）

基于下拉列表和模块值的英雄样式。字符串，即使是空的，也是真实的|| 即http://cloud.madebyspeak.com/cfc359

html.html

<div id="default-hero" class="{{ Module.FieldValues.LinesColor }} {{ Module.FieldValues.BackgroundColor }}">
   <div class="the-filter"></div>
   <div class="the-image bg-img">
      <img src="{{ Module.FieldValues.BackgroundImage }}" alt="">
   </div>

   <svg class="freeline" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
      x="0px" y="0px" width="819px" height="15" viewBox="0 0 819 6" style="enable-background:new 0 0 819 6;"
      xml:space="preserve">
      <line class="the-line" x1="0" y1="3" x2="819" y2="3" />
   </svg>
   <svg class="freeline" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
      x="0px" y="0px" width="819px" height="15" viewBox="0 0 819 6" style="enable-background:new 0 0 819 6;"
      xml:space="preserve">
      <line class="the-line" x1="0" y1="3" x2="819" y2="3" />
   </svg>


   {% if Module.FieldValues.PageTitle != nil and Module.FieldValues.PageTitle != ""  %}
   <h1 class="custom-title">{{ Module.FieldValues.PageTitle }}</h1>
   {% else %}
   <h1 class='page-title'></h1>
   {% endif %}
</div>

<script>
   if ($("h1.page-title").length) {
      $("h1.page-title").text($("title").text());
   }
</script>

css.scss

$black: #272f32;
$green: #2f5d67;
$olive: #b0b2a4;
$salmon: #e9bda3;
$white: #f7f0ea;

section.hero {
	margin-bottom: 15px;
	#default-hero {
		position: relative;
		height: 100%;
		min-height: 500px;
		.the-filter {
			width: 100%;
			height: 100%;
			content: "";
			position: absolute;
			left: 0;
			top: 0;
			opacity: 1;
		}
		.the-image {
			position: absolute;
			background-position: center;
			background-size: cover;
			width: 100%;
			height: 100%;
			filter: grayscale(95%);
			opacity: .3;
			&:after {
				content: "";
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
				position: absolute;
				background: rgb(255,255,255);
				background: linear-gradient(180deg, rgba(255,255,255,0) 60%, rgba(255,255,255,1) 100%);
			}
		}
		&.bg-black .the-filter {
			background: $black;
			background: linear-gradient(180deg, rgba($black,1) 0%, rgba(white,1) 80%);
		}
		&.bg-green .the-filter {
			background: $green;
			background: linear-gradient(180deg, rgba($green,1) 0%, rgba(white,1) 80%);
		}
		&.bg-gray .the-filter {
			background: $olive;
			background: linear-gradient(180deg, rgba($olive,1) 0%, rgba(white,1) 80%);
		}
		&.bg-pink .the-filter {
			background: $salmon;
			background: linear-gradient(180deg, rgba($salmon,1) 0%, rgba(white,1) 80%);
		}
		&.bg-white .the-filter {
			background: $white;
			background: linear-gradient(180deg, rgba($white,1) 0%, rgba(white,1) 80%);
		}
		&.color-black .the-line {
			stroke: $black;
		}
		&.color-green .the-line {
			stroke: $green;
		}
		&.color-gray .the-line {
			stroke: $olive;
		}
		&.color-pink .the-line {
			stroke: $salmon;
		}
		&.color-white .the-line {
			stroke: $white;
		}
	}
	.page-title,
	.custom-title {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
}

scss 用css删除滚动条

styles.scss

div {
  scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE 10+ */

    /* Chrome Safari */
    &::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
}

scss Flex卡

工作示例：https：//codepen.io/reggs/pen/KKPNbMr

HTML

<div class="container">
  <div class="cards">
    <div class="card">
      <div class="card-inner">Hello there</div>
    </div>
    <div class="card">
      <div class="card-inner">Hello there</div>
    </div>
    <div class="card">
      <div class="card-inner">Hello there</div>
    </div>
    <div class="card">
      <div class="card-inner">Hello there</div>
    </div>
    <div class="card">
      <div class="card-inner">Hello there</div>
    </div>
  </div>
</div>

SCSS

/* Grid will not work without this */
*,* :before, *:after {
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
}

body {
  color: white;
  font-family: sans-serif;
  font-weight: bold;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  border: 1px solid red;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% + 30px);
  
  margin: -15px;
}

.card {
  width:50%;
  @media(max-width:400px) {
    width: 50%;
  }
  padding: 15px;
}

.card-inner{
  background:blue;
}

scss 英雄部分 - 顶部填充

工作示例：https：//codepen.io/reggs/pen/oNvWNzM

HTML

<div class="slider" style="background-image: url(https://www.fillmurray.com/640/360);">
  <div class="text-container">
    <h1 class="header1">This is a Header</h1>
    <p class="paragraph">Regular Body Text</p>
  </div>
</div>

SCSS

.slider {
  background: url('../../images/hero-bg.jpg');
  background-color: blue;
  position: relative;
  display: flex;
  align-items: center;
  background-position: center 66%;
  background-repeat: no-repeat;
  background-size: cover;
  padding-left: 5rem;
  padding-right: 5rem;
  &:before {
    display: block;
    content: "";
    padding-top: 47%;
  }
}

scss CSSで三角形

CSSで三角形

css.markdown

CSSで三角形
-------


A [Pen](https://codepen.io/anonie/pen/NWKXYxv) by [anonie](https://codepen.io/anonie) on [CodePen](https://codepen.io).

[License](https://codepen.io/anonie/pen/NWKXYxv/license).

index.html

<div class="inner">
	<div class="c-triangle">
		<div class="item01">
			item01
		</div>
	</div>
</div>

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

style.scss

*, *::before, *::after {  box-sizing: border-box; }
body { background: #eee; }
.flex { display: flex; }
.inner {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}
.inner { background: #fff; margin: 3rem auto; padding: 3rem 0;} // 視認性用

.item01 {  // 視認性用
	border: 3px solid #aaa;
}
.item02 {  // 視認性用
	border: 3px solid #ccc;
}
$breakpoints: (
	sp: "only screen and (max-width: 559px)",
	tb: "only screen and (max-width: 959px)",
	pc: "only screen and (min-width: 960px)"
);
@mixin media($breakpoint) {
  @media #{map-get($breakpoints, $breakpoint)} {
    @content;
  }
}
.pc {
  @include media(sp) {
    display: none !important;
  }
}
.sp {
  @include media(pc) {
    display: none !important;
  }
}
/// 以下モジュール ---------------------------------

.c-triangle::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	border: 15px solid transparent;
	border-top: 15px solid #ccc;
	margin-top: 1em;
}

scss CSSで斜线

CSSで斜线

css.markdown

cssで斜線
------


A [Pen](https://codepen.io/anonie/pen/ZEzrRxK) by [anonie](https://codepen.io/anonie) on [CodePen](https://codepen.io).

[License](https://codepen.io/anonie/pen/ZEzrRxK/license).
  
  
  
- [MDN:linear-gradient()
](https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient)  
- [linear-gradient() で斜線を表現する際のアンチエイリアス](https://www.will3in.co.jp/frontend-blog/article/antialiasing-linear-gradient-oblique-line/)

index.html

<div class="inner">
	<div class="c-ruled-line">
		<div class="item02">
			item02
		</div>
	</div>
</div>

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

style.scss

*, *::before, *::after {  box-sizing: border-box; }
body { background: #eee; }
.flex { display: flex; }
.inner {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}
.inner { background: #fff; margin: 3rem auto; padding: 3rem 0;} // 視認性用

.item01 {  // 視認性用
	border: 3px solid #aaa;
}
.item02 {  // 視認性用
	border: 3px solid #ccc;
}
$breakpoints: (
	sp: "only screen and (max-width: 559px)",
	tb: "only screen and (max-width: 959px)",
	pc: "only screen and (min-width: 960px)"
);
@mixin media($breakpoint) {
  @media #{map-get($breakpoints, $breakpoint)} {
    @content;
  }
}
.pc {
  @include media(sp) {
    display: none !important;
  }
}
.sp {
  @include media(pc) {
    display: none !important;
  }
}
/// 以下モジュール ---------------------------------

.c-ruled-line::after {
	content: "";
	position: relative;
	display: block;
	height: 200px; // project側で定義
	background: linear-gradient(60deg, transparent 49.35%, black 49.5%, black 51%, transparent 51.15%, transparent); // project側で定義
}

scss CSS重置

CSS Reset

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html,
body {
	background-color: #fff;
	color: #555;
	font-family: "Lato", "Arial", sans-serif; /* replace Lato with your font */
	font-weight: 400;
	font-size: 62.5%;
	line-height: 1.7;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

scss アコーディオン：リスト型：アニメーション

アコーディオン：リスト型：アニメーション

.markdown

アコーディオン：リスト型：アニメーション
--------------------


A [Pen](https://codepen.io/anonie/pen/dybZEyQ) by [anonie](https://codepen.io/anonie) on [CodePen](https://codepen.io).

[License](https://codepen.io/anonie/pen/dybZEyQ/license).

index.html

<div class="inner">
	<div class="item01">
    <ul class="c-accordionL">
      <dl class="c-accordionL-item">
        <dt class="c-accordionL-item__ttl">アコーディオンitem01-title<p class="c-accordionL-item__arrow">＋</p></dt>
        <dd class="c-accordionL-item__txt">
          ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
        </dd>
      </dl>
      <dl class="c-accordionL-item">
        <dt class="c-accordionL-item__ttl">アコーディオンitem01-title<p class="c-accordionL-item__arrow">＋</p></dt>
        <dd class="c-accordionL-item__txt">
          ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
        </dd>
      </dl>
    </ul>
  </div>
</div>

script.js

$(function(){
  $('.c-accordionL-item').click(function(){
    if( $(this).hasClass('is_active') ) {
      $(this).removeClass('is_active'); 
			$(this).find('.c-accordionL-item__txt').slideUp();
      $(this).find('.c-accordionL-item__arrow').text('＋');
    } else {
      $(this).addClass('is_active');
			$(this).find('.c-accordionL-item__txt').slideDown('fast');
      $(this).find('.c-accordionL-item__arrow').text('－');
    }
  });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

style.scss

*, *::before, *::after {  box-sizing: border-box; }
body { background: #eee; }
.flex { display: flex; }
.inner {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}
.inner { background: #fff; margin: 3rem auto; padding: 3rem 0;} // 視認性用

.item01 {  // 視認性用
	border: 3px solid #aaa;
}
.item02 {  // 視認性用
	border: 3px solid #ccc;
}
@mixin media($breakpoint) {
  @media #{map-get($breakpoints, $breakpoint)} {
    @content;
  }
}

/// 以下モジュール ---------------------------------

.c-accordionL {
  transition: 0.2s;
  &-item {
    margin-bottom: 1em; // 視認性用
    &__ttl {
      background: #eee; // 視認性用
    }
    &__ttl {
      position: relative;
      cursor: pointer;
    }
    &__txt {
      transition: .2s;
      display: none;
      .is_active & {
        // display: block;
      }
    }
    &__arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 1em;
    }
  }
}

scss アコーディオン：リスト型

アコーディオン：リスト型

.markdown

アコーディオン：リスト型
------------


A [Pen](https://codepen.io/anonie/pen/XWrzOWz) by [anonie](https://codepen.io/anonie) on [CodePen](https://codepen.io).

[License](https://codepen.io/anonie/pen/XWrzOWz/license).

index.html

<div class="inner">
	<div class="item01">
    <ul class="c-accordion">
      <dl class="c-accordion-item">
        <dt class="c-accordion-item__ttl">アコーディオンitem01-title<p class="c-accordion-item__arrow">＋</p></dt>
        <dd class="c-accordion-item__txt">
          ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
        </dd>
      </dl>
      <dl class="c-accordion-item">
        <dt class="c-accordion-item__ttl">アコーディオンitem01-title<p class="c-accordion-item__arrow">＋</p></dt>
        <dd class="c-accordion-item__txt">
          ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
        </dd>
      </dl>
    </ul>
  </div>
</div>

script.js

$(function(){
  $('.c-accordion-item').click(function(){
    if( $(this).hasClass('is_active') ) {
      $(this).removeClass('is_active'); 
      $(this).find('.c-accordion-item__arrow').text('＋');
    } else {
      $(this).addClass('is_active'); 
      $(this).find('.c-accordion-item__arrow').text('－');
    }
  });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

style.scss

*, *::before, *::after {  box-sizing: border-box; }
body { background: #eee; }
.flex { display: flex; }
.inner {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}
.inner { background: #fff; margin: 3rem auto; padding: 3rem 0;} // 視認性用

.item01 {  // 視認性用
	border: 3px solid #aaa;
}
.item02 {  // 視認性用
	border: 3px solid #ccc;
}
@mixin media($breakpoint) {
  @media #{map-get($breakpoints, $breakpoint)} {
    @content;
  }
}

/// 以下モジュール ---------------------------------

.c-accordion {
  transition: 0.2s;
  &-item {
    margin-bottom: 1em; // 視認性用
    &__ttl {
      background: #eee; // 視認性用
    }
    &__ttl {
      position: relative;
      cursor: pointer;
    }
    &__txt {
      transition: .2s;
      display: none;
      .is_active & {
        display: block;
      }
    }
    &__arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 1em;
    }
  }
}