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

scss アコーディオン：モバイル时のみ「続きを表示する」

アコーディオン：モバイル时のみ「続きを表示する」

.markdown

アコーディオン：モバイル時のみ「続きを表示する」
------------------------


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

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

index.html

<div class="inner">
	<div class="item01">
    <ul class="c-accordionM">
      <li class="c-accordionM-item">
				<div>
					<p class="c-accordionM-item__txt">
						テキストA
					</p>
					<p class="c-accordionM-item__txt">
					 テキストB
					</p>
					<div class="c-accordionM-item__trigger sp">
						<p class="c-accordionM-item__trigger__text">続きを表示する</p>
						<p class="c-accordionM-item__stts-icon">＋</p>
					</div>
				</div>
				<div>
					<p class="c-accordionM-item__txt --hide">
					 テキストB
					</p>
					<p class="c-accordionM-item__txt --hide">
						テキストC
					</p>
					<p class="c-accordionM-item__txt --hide">
						テキストD
					</p>
				</div>
			</li>

      <li class="c-accordionM-item">
        <p class="c-accordionM-item__txt">
					ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
				</p>
        <p class="c-accordionM-item__txt">
         ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
				</p>
				<p class="c-accordionM-item__txt --hide">
					隠す文章がここに入ります。隠す文章がここに入ります。隠す文章がここに入ります。隠す文章がここに入ります。隠す文章がここに入ります。隠す文章がここに入ります。
				</p>
				<p class="c-accordionM-item__txt --hide">
					隠す文章がここに入ります。隠す文章がここに入ります。隠す文章がここに入ります。隠す文章がここに入ります。隠す文章がここに入ります。
							<p class="c-accordionM-item__txt --hide">
					これも出てたら成功
					
				</p>		
				</p>
				<div class="c-accordionM-item__trigger sp">
					<p class="c-accordionM-item__trigger__text">続きを表示する</p>
					<p class="c-accordionM-item__stts-icon">＋</p>
				</div>
			</li>

    </ul>
  </div>
</div>

script.js

$(function(){
  $('.c-accordionM-item__trigger').click(function(){
		let $cAccordionMItem = $(this).closest('.c-accordionM-item');
    if( $cAccordionMItem.hasClass('is_active') ) {
      $cAccordionMItem.removeClass('is_active');
			$(this).find('.c-accordionM-item__trigger__text').text('続きを表示する');
      $(this).find('.c-accordionM-item__stts-icon').text('＋');
			$cAccordionMItem.find('.c-accordionM-item__txt.--hide').css('display', 'none');
    } else {
      $cAccordionMItem.addClass('is_active'); 
			$(this).find('.c-accordionM-item__trigger__text').text('続きを隠す');
      $(this).find('.c-accordionM-item__stts-icon').text('－');
			$cAccordionMItem.find('.c-accordionM-item__txt.--hide').css('display', 'block');
    }
  });
});

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 (min-width: 560px) 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;
  }
  @include media(tb) {
    display: none !important;
  }
}
/// 以下モジュール ---------------------------------

.c-accordionM {
  transition: 0.2s;
  &-item {
    margin-bottom: 1em; // 視認性用
    &__ttl {
      background: #eee; // 視認性用
    }
    &__ttl {
      position: relative;
      cursor: pointer;
    }
    &__txt {
      transition: .2s;
      .is_active & {
        display: block;
      }
			&.--hide {
				@include media(sp) {
					display: none;
				}
				// @media (max-width:767px) {
				// 	display: none;
				// }
			}
    }
		&__trigger {
			background: #eee; // 視認性用
			position: relative;
			&:hover {
				cursor: pointer;
			}
		}
    &__stts-icon {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 1em;
    }
  }
}

scss CSS仅限手风琴和下拉菜单

为Megamenu

index

.accordion.dropdown
  input.accordion_toggle(id="item01", type="checkbox")
  label.accordion_label.dropdown_btn(for="item01") Item Label
  .accordion_body
    p Accordion Body
  .dropdown_overlay
  .dropdown_body
    p Dropdown Body

style

.accordion_toggle {
  display: none;
}

.accordion_label {
  .accordion_toggle:checked ~ & {
    font-weight: bold;
  }
}

.accordion_body {
  * {
    opacity: 0;
    overflow: hidden;
    padding: 0;
    line-height: 0;
    transition: opacity .2s ease-out, overflow .2s ease, padding .2s ease-out, line-height .2s ease-out;
  }
  .accordion_toggle:checked ~ & {
    * {
      opacity: initial;
      overflow: initial;
      padding: initial;
      line-height: 1.5;
    }
  }
}

.dropdown_btn {
  cursor: pointer;
  position: relative;
  z-index: 1001;
}

.dropdown_body {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  right: 0;
  background-color: #ffffff;
  transition: opacity .2s .2s ease-out, visibility .2s .2s ease;
  z-index: 1001;
  @include media() {
    .dropdown:hover & {
      opacity: 1;
      visibility: visible;
    }
  }
}

.dropdown_overlay {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.5);
  z-index: 1000;
  transition: opacity .2s .2s ease-out, visibility .2s .2s ease;
  pointer-events: none;
  @include media() {
    .dropdown:hover & {
      opacity: 1;
      visibility: visible;
    }
  }
}

scss CSS Only Dropdown

index

.dropdown
  button.dropdown_btn Item Label
  .dropdown_overlay
  .dropdown_body
    p body

style

.dropdown_btn {
  cursor: pointer;
  position: relative;
  z-index: 1001;
}

.dropdown_body {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  right: 0;
  background-color: #ffffff;
  transition: opacity .2s .2s ease-out, visibility .2s .2s ease;
  z-index: 1001;
  @include media() {
    .dropdown:hover & {
      opacity: 1;
      visibility: visible;
    }
  }
}

.dropdown_overlay {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.5);
  z-index: 1000;
  transition: opacity .2s .2s ease-out, visibility .2s .2s ease;
  pointer-events: none;
  @include media() {
    .dropdown:hover & {
      opacity: 1;
      visibility: visible;
    }
  }
}

scss CSS只有手风琴

index

.accordion
  input.accordion_toggle(id='item01', type="checkbox")
  label.accordion_label(for='item01') Item Label
  .accordion_body
    p body

style

.accordion_toggle {
  display: none;
}

.accordion_label {
  .accordion_toggle:checked ~ & {
    font-weight: bold;
  }
}

.accordion_body {
  * {
    opacity: 0;
    overflow: hidden;
    padding: 0;
    line-height: 0;
    transition: opacity .2s ease-out, overflow .2s ease, padding .2s ease-out, line-height .2s ease-out;
  }
  .accordion_toggle:checked ~ & {
    * {
      opacity: initial;
      overflow: initial;
      padding: initial;
      line-height: 1.5;
    }
  }
}

scss BigCommerce Cornerstone CSS Triangle

内置于Cornerstone 4.0中的CSS三角形创建。

triangle.scss

@include css-triangle(
    $triangle-direction: "bottom",
    $triangle-size: 10px,
    $triangle-color: stencilColor("navUser-dropdown-borderColor")
);

scss SCSS SVG图标

style.scss

@mixin svg-icon($icon_name) {
  width: 16px;
  display: inline-block;
  &:before {
    background: url('/assets/svg/#{$icon_name}');
    content: '';
    background-size: contain;
    padding-bottom: 100%;
    display: block;
  }
}

.svg-m-react {
  @include svg-icon('react-native.svg');
}

scss 中央寄せ色々

中央寄せ色々

.markdown

中央寄せ色々
------


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

[License](https://codepen.io/anonie/pen/QWLqqJr/license).
  
  
  
### [CSSで要素を上下や左右から中央寄せする7つの方法](https://www.granfairs.com/blog/staff/centering-by-css)

index.html

<div class="inner">
	<div class="item item01">
		item01：天地左右中央
	</div>
	<div class="item item02">
		item02：左右中央
	</div>
	<div class="item item03">
		<p>
		item03：コンテンツ幅依存左右中央
		</p>
	</div>
	<div class="item item04">
		<p>
		item04：天地中央tablecell<br>
		内容物よりも高さがあるブロックに有効
		</p>
	</div>
</div>

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; } // 視認性用

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

/// 以下モジュール ---------------------------------
.inner {
	min-height: 300px;
	position: relative;
}
.item01 {
	width: 50%;
	height: 50%;
	
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
}
.item02 {
	max-width: 50%;
	width: 50%;
	height: 50%;
	margin: 0 auto;
}
.item03 {
	margin-top: 2rem; // 視認性用
  text-align: center;
	& > p {
		background: #eee; // 視認性用
		display: inline-block;
		text-align: left;
	}
}
.item04 {
	margin-top: 300px; // 視認性用
  display: table;
  width: 100%;
	height: 100px;
	& > p {
		display: table-cell;
		vertical-align: middle;
	}
}

scss 00_ColorManagementWithMap.md

00_ColorManagementWithMap.md

mapを使って色を管理する

https://codepen.io/mo4_9/pen/oeQyKN

cf. [Sass 3.3で追加された新しいデータタイプ「マップ」まとめ解説](https://html5experts.jp/kosei27/3727/)

ColorManagementWithMap.scss

$colors: (
    1: (
        main1: #ff0000,
        main2: #F96565,
        sub1: #FFBC00,
        sub2: #FFD564,
    ),
    2: (
        main1: #39FF00,
        main2: #82FF5F,
        sub1: #00F1FF,
        sub2: #64F6FF,
    ),
    3: (
        main1: #1500FF,
        main2: #6355FF,
        sub1: #FF00AC,
        sub2: #FF5DCA,
    ),
);

// data-week の値を変更すると全体の色が変わる
@each $key, $color in $colors {
    .wrapper[data-week="#{$key}"]{
        $main1-color: map-get(map-get($colors,$key),main1);
        $main2-color: map-get(map-get($colors,$key),main2);
        $sub1-color: map-get(map-get($colors,$key),sub1);
        $sub2-color: map-get(map-get($colors,$key),sub2);
        // color
        .wc_c_m1{ color: $main1-color; }
        .wc_c_m2{ color: $main2-color; }
        .wc_c_s1{ color: $sub1-color; }
        .wc_c_s2{ color: $sub2-color; }
        // background-color
        .wc_b_m1{ background-color: $main1-color; }
        .wc_b_m2{ background-color: $main2-color; }
        .wc_b_s1{ background-color: $sub1-color; }
        .wc_b_s2{ background-color: $sub2-color; }
        // linear-gradient
        .wc_lg_m1{ background-image: linear-gradient($main1-color, $main2-color); }
        .wc_lg_m2{ background-image: linear-gradient($main2-color, $main1-color); }
        .wc_lg_s1{ background-image: linear-gradient($sub1-color, $sub2-color); }
        .wc_lg_s2{ background-image: linear-gradient($sub2-color, $sub1-color); }
    }
}

scss テキスト溢出部分を三点リーダーで

テキスト溢出部分を三点リーダーで

index.html

<div class="inner">
	<div class="item01 txtarea">
		ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
	</div>
</div>

overflow.markdown

[意外と知られていない、CSSで文末を3点リーダーで省略表示するline-clampプロパティの効果的な実装方法](https://coliss.com/articles/build-websites/operation/css/css-line-clamp-property.html)

style.scss

*, *::before, *::after {  box-sizing: border-box; }
body { background: #eee; }
.flex { display: flex; }
.inner {
  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;
  }
}

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

.txtarea {
	// width: 100px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

scss 语气

只需修改'modal_id'数据属性，使用'modal_wrapper'类来定位div的ID。

HTML

<!--Trigger-->
<div class="modal_open" data-modal_id="modal_id">Open Modal</div>

<!--Modal-->
<div class="modal_wrapper" id="modal_id">
    <div class="modal_content">
        <div class="modal_close"></div>
        <div class="modal_inner_content">
            <p>Modal Content</p>
        </div>
    </div>
</div>

JavaScript

jQuery(document).ready(function ($) {

  $('body').on('click', '.modal_open', function (event) {
      event.preventDefault();
      var modal_id = $(this).data("modal_id");
      $('#'+modal_id).show();

  });

  $('body').on('click', '.modal_close', function (event) {
      $(this).closest('.modal_wrapper').hide();
  });
    
}); //End Document Ready

SCSS

// Optional
.modal_open {
  cursor: pointer;
}

//Global Defaults
.modal_wrapper {
  background: rgba(21, 27, 35, 0.8);
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  margin: 0;
  transition: all .2s ease;

  .modal_content {
    position: relative;
    top: 10%;
    left: 10%;
    height: auto;
    width: 80%;
    max-width: 1500px;
    background-color: #ffffff;

    .modal_close {
      position: absolute;
      right: 10px;
      top: 10px;
      width: 30px;
      height: 30px;
      opacity: 0.3;

      &:hover {
        opacity: 1;
        cursor: pointer;
      }

      &:before, &:after {
        position: absolute;
        left: 15px;
        content: ' ';
        height: 33px;
        width: 2px;
        background-color: #333;
      }

      &:before {
        transform: rotate(45deg);
      }

      &:after {
        transform: rotate(-45deg);
      }

    }

    .modal_inner_content {
      width: 100%;
      height: 100%;
      padding: 40px;
    }

  }

}