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

scss Sass变量颜色

settings.colors.scss

// Names
$color-black: #000;
$color-red: #a30101;

// Roles title
$color-title: $color-black;
$color-title-win: $color-red;

scss Mixins Sass

mixins.scss

/* Margin bottom ranges .mb-1, .mb-2, ... */

$iphone5: 'screen and (device-aspect-ratio: 40/71)';

@mixin mb($number) {
  margin-bottom: calc(#{$number}vh * 2);

  @media #{$iphone5} {
    margin-bottom: calc(#{$number}vh * 1.5);
  }
}

@for $numbers from 1 through 7 {
  @each $number in $numbers {
    .mb-#{$number} {
      @include mb($number);
    }
  }
}

/* Another way */
@mixin mb {
  @for $numbers from 1 through 7 {
    @each $number in $numbers {
      &-#{$number} {
        margin-bottom: calc(#{$number}vh * 1.5);

        @media #{$iphone5} {
          margin-bottom: calc(#{$number}vh * 0.7);
        }
      }
    }
  }
}

.mb {
  @include mb();
}

scss 内部计算中的Sass变量

sass-variable-calc.scss

margin-bottom: calc(#{$number}rem * 2);

scss 盖住微调器

资源：http：//www.menucool.com/9499/CSS-loading-spinner-with-a-semi-transparent-background

cover-spinner.html

<div
  class="cover-spin"
  :class="{show: showSpinner}"
/>

cover-spinner.scss

.cover-spin {
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 9999;
  display: none;

  &.show {
    display: block;
  }

  &::after {
    content: '';
    display: block;
    position: absolute;
    left: 48%;
    top: 40%;
    width: 40px;
    height: 40px;
    border-style: solid;
    border-color: black;
    border-top-color: transparent;
    border-width: 4px;
    border-radius: 50%;
    -webkit-animation: spin 0.8s linear infinite;
    animation: spin 0.8s linear infinite;
  }
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

scss 随着过渡而扩展

保存自https://css-tricks.com/snippets/css/scale-on-hover-with-webkit-transition/

scale-transition.css

.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1.1); }

scale-outline.scss

.photo {
  transition: all .2s .2s;
  
  // Also could be added translate to add more transitions
  &:hover {
    outline: 1.5rem solid #000;
    transform: translate(-50%,-50%) scale(1.05);
    box-shadow: 0 2.5rem 4rem rgba(#000, .5);
    z-index: 1;
  }
}

scss 媒体查询Sass

media-query-sass.scss

$min-width-tablet: 768px;
$screen-min-width-tablet: 'only screen and (min-width: #{$min-width-tablet})';

@media #{$screen-min-width-tablet} {
}

several-media-queries.scss

$iphone5: 'screen and (device-aspect-ratio: 40/71)';
$iphone6-7-8: 'screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 2)';

.mb-10 {
  @media #{$iphone5}, #{$iphone6-7-8} {
    margin-bottom: calc(10vh * 1.2);
  }
}

scss Benkoletter＃5：单人混音（进球）

Benkoletter＃5：单人混音（进球）

styles.scss

@mixin typography($which) {
	// magia potagia
}

.page__heading {
	@include typography(title-40);
}

.page__subheading {
	@include typography(title-30);
}

// etc.

scss Benkoletter＃5：最终实施

Benkoletter＃5：最终实施

styles.scss

// typography
$typos: (
  display-20-size: 36px,
  display-20-weight: 100,
  title-20-size: 17px,
  title-20-weight: 600,
  body-20-size: 15px,
  body-20-weight: 400,
  body-20-weight-bold: 700,
  body-10-size: 13px,
  body-10-weight: 400,
  body-10-weight-bold: 700,
  // etc
);

@mixin typography($which) {
  $size: map-get($typos, #{$which}-size);
  $weight: map-get($typos, #{$which}-weight);
  $weight-bold: map-get($typos, #{$which}-weight-bold);

  font-size: #{$size};
  font-weight: #{$weight};

  @if $weight-bold {
    & b,
    & strong {
      font-weight: #{$weight-bold};
    }
  }
}

scss 创建响应方块

markup.html

<div class="square">
	<span>Lorem ipsum</span>
</div>

square-responsive.scss

.square {
	width: 100%;
	
	&.option_1 {
		height: 0;
		padding-bottom: 100%;
	}
	
	&.option_2 {
		position: relative;
		
		&:after {
		    content: "";
		    display: block;
		    padding-bottom: 100%;
		}
		
		.content {
			position: absolute;
		    height: 100%;
		    width: 100%;
		}
	}
}

scss Css代码中的中心项目

center-css

.center {
    display: flex;
    justify-content: center; // flex-end
    align-items: center;
}