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

scss 使用Breakpoint +指南针/支持处理IE8及更低版本

使用Breakpoint +指南针/支持处理IE8及更低版本

styles.scss

/* Import Sass mixins, variables, Compass modules, etc. */
@import "init";

/* HTML element (SMACSS base) rules */
@import "normalize"; // I <3 Normalize.

/* Layout rules */
@import "layout-general";

/* Components */

styles-ie8.scss

// Styles for IE 8 and lower.

// Set the legacy IE support variables. These override the !default values set
// in _init.scss.
$legacy-support-for-ie6 : false;
$legacy-support-for-ie7 : false;
$legacy-support-for-ie8 : true;

// Force the breakpoint mixin to discard all media queries except ones with
// $no-query set to true. Since we use the default values in styles.scss,
// we don't need to set these in _init.scss.
$breakpoint-no-queries  : true;
$breakpoint-no-query-fallbacks : true;

@import "styles";

head.html

<!--[if (lt IE 9)]>
<link rel="stylesheet" href="/css/styles-ie8.css" media="all" />
<![endif]-->

<!--[if (gte IE 9)|(IEMobile)|(!IE)]><!-->
<link rel="stylesheet" href="/css/styles.css" media="all" />
<!--<![endif]-->

The first bit of code is only read by IE 8 and lower. Other browsers do not
load the styles-ie8.css stylesheet.

The second bit of code is read by all browsers, except IE 8 and lower. IE 8 and
lower do not load the styles.css stylesheet.

The funky comment syntax is required. For details, see
http://en.wikipedia.org/wiki/Conditional_comment#Downlevel-revealed_conditional_comment

_layout-general.scss

.l-general__main {
  /* Mobile layout. */

  @include breakpoint(555px, $no-query: true) {
    /* Tablet layout. */
  }

  @include breakpoint(888px, $no-query: true) {
    /* Desktop layout. */
  }

  @include breakpoint(1111px, $no-query: false) {
    /* Large desktop layout. */
  }

  @if $legacy-support-for-ie8 {
    /* Any extra IE8 only styles. */
  }
}

_init.scss

// Initialize the Sass variables and partials used in this project.

// Set the legacy IE support variables. We override the default values set by
// the compass/support partial, but let styles-ie8.scss override these values.
$legacy-support-for-ie6 : false !default;
$legacy-support-for-ie7 : false !default; // Note the use of !default.
$legacy-support-for-ie8 : false !default;


// Partials to be shared with all .scss files.

// Add Compass' IE and vendor prefix support variables.
// Docs at http://compass-style.org/reference/compass/support/
@import "compass/support";
// Add the Breakpoint mixin for media query support.
// Docs at http://breakpoint-sass.com/
@import "breakpoint";

scss 使用Breakpoint +指南针/支持处理IE8及更低版本

使用Breakpoint +指南针/支持处理IE8及更低版本

styles.scss

/* Import Sass mixins, variables, Compass modules, etc. */
@import "init";

/* HTML element (SMACSS base) rules */
@import "normalize"; // I <3 Normalize.

/* Layout rules */
@import "layout-general";

/* Components */

styles-ie8.scss

// Styles for IE 8 and lower.

// Set the legacy IE support variables. These override the !default values set
// in _init.scss.
$legacy-support-for-ie6 : false;
$legacy-support-for-ie7 : false;
$legacy-support-for-ie8 : true;

// Force the breakpoint mixin to discard all media queries except ones with
// $no-query set to true. Since we use the default values in styles.scss,
// we don't need to set these in _init.scss.
$breakpoint-no-queries  : true;
$breakpoint-no-query-fallbacks : true;

@import "styles";

head.html

<!--[if (lt IE 9)]>
<link rel="stylesheet" href="/css/styles-ie8.css" media="all" />
<![endif]-->

<!--[if (gte IE 9)|(IEMobile)|(!IE)]><!-->
<link rel="stylesheet" href="/css/styles.css" media="all" />
<!--<![endif]-->

The first bit of code is only read by IE 8 and lower. Other browsers do not
load the styles-ie8.css stylesheet.

The second bit of code is read by all browsers, except IE 8 and lower. IE 8 and
lower do not load the styles.css stylesheet.

The funky comment syntax is required. For details, see
http://en.wikipedia.org/wiki/Conditional_comment#Downlevel-revealed_conditional_comment

_layout-general.scss

.l-general__main {
  /* Mobile layout. */

  @include breakpoint(555px, $no-query: true) {
    /* Tablet layout. */
  }

  @include breakpoint(888px, $no-query: true) {
    /* Desktop layout. */
  }

  @include breakpoint(1111px, $no-query: false) {
    /* Large desktop layout. */
  }

  @if $legacy-support-for-ie8 {
    /* Any extra IE8 only styles. */
  }
}

_init.scss

// Initialize the Sass variables and partials used in this project.

// Set the legacy IE support variables. We override the default values set by
// the compass/support partial, but let styles-ie8.scss override these values.
$legacy-support-for-ie6 : false !default;
$legacy-support-for-ie7 : false !default; // Note the use of !default.
$legacy-support-for-ie8 : false !default;


// Partials to be shared with all .scss files.

// Add Compass' IE and vendor prefix support variables.
// Docs at http://compass-style.org/reference/compass/support/
@import "compass/support";
// Add the Breakpoint mixin for media query support.
// Docs at http://breakpoint-sass.com/
@import "breakpoint";

scss 上から明→暗グラデーション/上から暗→明グラデーション

上から明→暗グラデーション/上から暗→明グラデーション

mixin-gradient-top-.scss

// # gradient-top-lighten （上から明→暗グラデーション）
// # gradient-top-darken （上-から暗→明グラデーション）
// @https://github.com/mahm/zurui-sass-rails
// ========================================================
// $color: hex, rgb , rbga
// $lighten: %
// ========================================================

// [e.g.]
// @include gradient-top-lighten(#666, 10%);
@mixin gradient-top-lighten($color:#666, $lighten:10%){
	@if $legacy-support-for-ie {
		background-color: $color;
		@include filter-gradient(lighten($color, $lighten), $color, vertical);
	}
	@include background-image(linear-gradient(lighten($color, $lighten) 0%, $color 100%));
}


// [e.g.]
// @include gradient-top-darken(#666, 10%);
@mixin gradient-top-darken($color:#666, $darken:10%){
	@if $legacy-support-for-ie {
		background-color: $color;
		@include filter-gradient(darken($color, $darken), $color, vertical);
	}
	@include background-image(linear-gradient(darken($color, $darken) 0%, $color 100%));
}

scss 选择随机div

选择随机div

scripts.js

  $(document).ready(function() {
    var list = $(".testimonial > div").toArray();
    var elemlength = list.length;
    var randomnum = Math.floor(Math.random()*elemlength);
    var randomitem = list[randomnum];

    $(randomitem).css("display", "block");

  });

_block.scss

.testimonial > div {
  display: none;
}

scss Gradient Mixin

Gradient Mixin

example.css.scss

.my_div {
  @include gradient($background_color, white);
}

_gradients.css.scss

@mixin gradient($from, $to) {
  /* fallback/image non-cover color */
  background-color: $from;

  /* Firefox 3.6+ */
  background-image: -moz-linear-gradient($from, $to);

  /* Safari 4+, Chrome 1+ */
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to));

  /* Safari 5.1+, Chrome 10+ */
  background-image: -webkit-linear-gradient($from, $to);

  /* Opera 11.10+ */
  background-image: -o-linear-gradient($from, $to);
}

scss Bennett Feely的钢笔。

Bennett Feely的钢笔。

Navicon-Transformicons.markdown

Navicon Transformicons
----------------------


A [Pen](http://codepen.io/bennettfeely/pen/twbyA) by [Bennett Feely](http://codepen.io/bennettfeely) on [CodePen](http://codepen.io/).

[License](http://codepen.io/bennettfeely/pen/twbyA/license).

index.html

<section>
  <nav>
    <a class="navicon-button loading">
      <div class="navicon"></div>
    </a>
    <a class="navicon-button larr">
      <div class="navicon"></div>
    </a>
    <a class="navicon-button uarr">
      <div class="navicon"></div>
    </a>    
    <a class="navicon-button x">
      <div class="navicon"></div>
    </a>
    <a class="navicon-button plus">
      <div class="navicon"></div>
    </a>
    <a class="navicon-button">
      <div class="navicon"></div>
    </a>
  </nav>
  <h1>Click the icons!</h1>
</section>

script.js

$("a").click(function(){
  $(this).toggleClass("open");
  $("h1").addClass("fade");
});

style.scss

@import "compass";
/* Change this to watch in slo-mo */
$transition-duration: .5s;

$size : 100%;
$toggled-size : .75;

$bodybg : #449a88;
$navbg : #2a2a2a;
$pagebg : #e7e6dd;

.navicon-button {
  display: inline-block;
  position: relative;
  padding: 2.0625rem 1.5rem;
  transition: $transition-duration;
  cursor: pointer;
  user-select: none;
  opacity: .8;
  
  &:hover {
    opacity: 1;
    
    .navicon:before, .navicon:after {
      transition: $transition-duration/2;
    }
    
    .navicon:after { top: -.825rem; }
    .navicon:before { top: .825rem; }
  }
}

.navicon {
  position: relative;
  width: 2.5em;
  height: .3125rem;
  background: $pagebg;
  transition: $transition-duration;
  border-radius: 2.5rem;
  
  &:after, &:before {
    display: block;
    content: "";
    height: .3125rem;
    width: 2.5rem;
    background: $pagebg;
    position: absolute;
    z-index: -1;
    transition: $transition-duration ($transition-duration/2);
    border-radius: 1rem;
  }

  &:after { top: -.625rem; }
  &:before { top: .625rem; }
}

.open:not(.steps) .navicon:before,
.open:not(.steps) .navicon:after {
  top: 0 !important;
}

.open .navicon:before,
.open .navicon:after {
  transition: $transition-duration;
}

/* Minus */
.open { transform: scale($toggled-size); }

/* Arrows */
.open.larr .navicon,
.open.uarr .navicon {   
    &:before, &:after {
      width: 1.5rem;
    }
    
    &:before { transform: rotate(35deg); transform-origin: left top; }
    &:after { transform: rotate(-35deg); transform-origin: left bottom; }
}
.open.uarr { transform: scale($toggled-size) rotate(90deg); }

/* × and + */
.open.plus,
.open.x {
  .navicon {
    background: transparent;
    
    &:after { transform: rotate(45deg); }  
    &:before { transform: rotate(-45deg); }  
  }
}
.open.plus { transform: scale($toggled-size) rotate(45deg) }

.loading .navicon {
  color: dodgerblue;
  box-shadow: inset 0 0;
  transition: $transition-duration, box-shadow 0;
}

.loading .navicon { transition: 0; }

.open.loading {
  transform: none;

  .navicon {
    box-shadow: inset 2.5rem 0;
    transition: $transition-duration, box-shadow $transition-duration*5;

    
    &:before, &:after { opacity: 0; }
  }
}



/* Base ================== */
* { box-sizing: border-box; }

html { font-size: $size; }
html, body, section { position: relative; height: 100%; }

body {
  background: $bodybg;
  padding: 1.5rem 1.5rem 0;
  -webkit-backface-visibility: hidden;
}

section {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: .5rem .5rem 0 0;  
  background: $pagebg;
  overflow: hidden;
  
  /* Smoother animations */
  & *,
  & *:before,
  & *:after {
   transform: translate3d(0,0,0); 
  }
}

nav {
  height: 4.5rem;
  background: $navbg;
  text-align: right;
  border-radius: .5rem .5rem 0 0;
  
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

h1 {
  text-align: right;
  font: 2rem/4.5rem "Kite One";
  padding: 0 1.5rem;
  opacity: .5;
  transition: $transition-duration*2;
  pointer-events: none;
  
  &.fade {
    opacity: 0;    
  }
}

@font-face {
  font-family: 'Kite One';
  font-style: normal;
  font-weight: 400;
  src: local('Kite One'), local('KiteOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/kiteone/v1/VNHoD96LpZ9rGZTwjozAOnYhjbSpvc47ee6xR_80Hnw.woff) format('woff');
}

scss 对于zurb基金会问题＃2789来说，这是一种快速而又肮脏的解决方案。它没有经过很好的测试，但我认为它可能会节省一些时间

对于zurb基金会问题＃2789来说，这是一种快速而又肮脏的解决方案。它的测试不是很好，但我认为它可能会节省一些时间。

fix.no-js.section.scss

.no-js{
@media only screen and (min-width: 768px) {
  [data-section=''], [data-section='auto'], .section-container.auto {
    width: 100%;
    position: relative;
    display: block;
    margin-bottom: 1.25em; }
    [data-section='']:not([data-section-resized]):not([data-section-small-style]), [data-section='auto']:not([data-section-resized]):not([data-section-small-style]), .section-container.auto:not([data-section-resized]):not([data-section-small-style]) {
      visibility: visible; }
    [data-section=''] > section > [data-section-title], [data-section=''] > section > .title, [data-section=''] > .section > [data-section-title], [data-section=''] > .section > .title, [data-section=''] > [data-section-region] > [data-section-title], [data-section=''] > [data-section-region] > .title, [data-section='auto'] > section > [data-section-title], [data-section='auto'] > section > .title, [data-section='auto'] > .section > [data-section-title], [data-section='auto'] > .section > .title, [data-section='auto'] > [data-section-region] > [data-section-title], [data-section='auto'] > [data-section-region] > .title, .section-container.auto > section > [data-section-title], .section-container.auto > section > .title, .section-container.auto > .section > [data-section-title], .section-container.auto > .section > .title, .section-container.auto > [data-section-region] > [data-section-title], .section-container.auto > [data-section-region] > .title {
      margin-bottom: 0; }
      [data-section=''] > section > [data-section-title] a, [data-section=''] > section > .title a, [data-section=''] > .section > [data-section-title] a, [data-section=''] > .section > .title a, [data-section=''] > [data-section-region] > [data-section-title] a, [data-section=''] > [data-section-region] > .title a, [data-section='auto'] > section > [data-section-title] a, [data-section='auto'] > section > .title a, [data-section='auto'] > .section > [data-section-title] a, [data-section='auto'] > .section > .title a, [data-section='auto'] > [data-section-region] > [data-section-title] a, [data-section='auto'] > [data-section-region] > .title a, .section-container.auto > section > [data-section-title] a, .section-container.auto > section > .title a, .section-container.auto > .section > [data-section-title] a, .section-container.auto > .section > .title a, .section-container.auto > [data-section-region] > [data-section-title] a, .section-container.auto > [data-section-region] > .title a {
        width: 100%;
        display: inline-block;
        white-space: nowrap; }
    [data-section=''] > section > [data-section-content], [data-section=''] > section > .content, [data-section=''] > .section > [data-section-content], [data-section=''] > .section > .content, [data-section=''] > [data-section-region] > [data-section-content], [data-section=''] > [data-section-region] > .content, [data-section='auto'] > section > [data-section-content], [data-section='auto'] > section > .content, [data-section='auto'] > .section > [data-section-content], [data-section='auto'] > .section > .content, [data-section='auto'] > [data-section-region] > [data-section-content], [data-section='auto'] > [data-section-region] > .content, .section-container.auto > section > [data-section-content], .section-container.auto > section > .content, .section-container.auto > .section > [data-section-content], .section-container.auto > .section > .content, .section-container.auto > [data-section-region] > [data-section-content], .section-container.auto > [data-section-region] > .content {
      display: block; }
    [data-section=''] > section.active > [data-section-content], [data-section=''] > section.active > .content, [data-section=''] > .section.active > [data-section-content], [data-section=''] > .section.active > .content, [data-section=''] > [data-section-region].active > [data-section-content], [data-section=''] > [data-section-region].active > .content, [data-section='auto'] > section.active > [data-section-content], [data-section='auto'] > section.active > .content, [data-section='auto'] > .section.active > [data-section-content], [data-section='auto'] > .section.active > .content, [data-section='auto'] > [data-section-region].active > [data-section-content], [data-section='auto'] > [data-section-region].active > .content, .section-container.auto > section.active > [data-section-content], .section-container.auto > section.active > .content, .section-container.auto > .section.active > [data-section-content], .section-container.auto > .section.active > .content, .section-container.auto > [data-section-region].active > [data-section-content], .section-container.auto > [data-section-region].active > .content {
      display: block; }
    [data-section=''] > section:not(.active), [data-section=''] > .section:not(.active), [data-section=''] > [data-section-region]:not(.active), [data-section='auto'] > section:not(.active), [data-section='auto'] > .section:not(.active), [data-section='auto'] > [data-section-region]:not(.active), .section-container.auto > section:not(.active), .section-container.auto > .section:not(.active), .section-container.auto > [data-section-region]:not(.active) {
      padding: 0 !important; }
    [data-section=''] > section > [data-section-title], [data-section=''] > section > .title, [data-section=''] > .section > [data-section-title], [data-section=''] > .section > .title, [data-section=''] > [data-section-region] > [data-section-title], [data-section=''] > [data-section-region] > .title, [data-section='auto'] > section > [data-section-title], [data-section='auto'] > section > .title, [data-section='auto'] > .section > [data-section-title], [data-section='auto'] > .section > .title, [data-section='auto'] > [data-section-region] > [data-section-title], [data-section='auto'] > [data-section-region] > .title, .section-container.auto > section > [data-section-title], .section-container.auto > section > .title, .section-container.auto > .section > [data-section-title], .section-container.auto > .section > .title, .section-container.auto > [data-section-region] > [data-section-title], .section-container.auto > [data-section-region] > .title {
      width: auto;
      position: static;
      top: 0;
      left: 0; }
      }
}
.no-js [data-section] > section > [data-section-content], .no-js [data-section] > section > .content, .no-js [data-section] > .section > [data-section-content], .no-js [data-section] > .section > .content, .no-js [data-section] > [data-section-region] > [data-section-content], .no-js [data-section] > [data-section-region] > .content, .no-js .section-container > section > [data-section-content], .no-js .section-container > section > .content, .no-js .section-container > .section > [data-section-content], .no-js .section-container > .section > .content, .no-js .section-container > [data-section-region] > [data-section-content], .no-js .section-container > [data-section-region] > .content {
      display: block; }

scss CSS3 calc Sass mixin。资料来源：https：//coderwall.com/p/qac-og

CSS3 calc Sass mixin。资料来源：https：//coderwall.com/p/qac-og

calc.scss

@mixin calc($property, $expression) {
  #{$property}: -moz-calc(#{$expression});
  #{$property}: -webkit-calc(#{$expression});
  #{$property}: calc(#{$expression});
}

scss Clearfix CSS基于David Walsh的代码：http：//davidwalsh.name/css-clear-fix

Clearfix CSS基于David Walsh的代码：http：//davidwalsh.name/css-clear-fix

clearfix.scss

//Clearfix - http://davidwalsh.name/css-clear-fix

//Vanilla CSS
.clear:before, .clear:after { display:table; content:''; }
.clear:after { clear:both; }

//Nested sytle - Sass
.clear {
	&:after,
	&:after {
		display: table;
		content: '';
	}
	&:after { clear: both; }
}

scss 列萨斯

列萨斯

_column.scss

@mixin column($number, $gap) {
  -webkit-column-count:$number;
	-webkit-column-gap: $gap;
	-moz-column-count:$number;
	-moz-column-gap: $gap;
	column-count:$number;
	column-gap: $gap;
}