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

scss 实用程序mixin轻松设置元素的宽度和高度。来自：http：//codepen.io/jackiebackwards/pen/vlrsq

实用程序mixin轻松设置元素的宽度和高度。来自：http：//codepen.io/jackiebackwards/pen/vlrsq

width-n-height-mixin.scss

/**
  * Utility mixin to easily set the width and height of an element.
  * Makes perfect squares easier to create and maintain.
  *
  * http://codepen.io/jackiebackwards/pen/vlrsq
  */

@mixin size( $width, $height: false ) {
  width: $width;
  
  @if( $height ) {
    height: $height;
  }
  @else {
    height: $width;
  }  
}

//Usage
.selector {
  @include size(10px);
}

.selector2 {
  @include size(10px,50px);
}

scss 列出颜色变化

列出颜色变化

li_color_variation.css.scss

@for $i from 1 through 4 {
	&:nth-child(#{$i}) { 
		background-color: $color_secondary;
	}
	$color_secondary: lighten( $color_secondary, 10% );
}

scss 表格布局：固定zet de breedtes gelijk。

表格布局：固定zet de breedtes gelijk。

style.scss

ul.menu {
  display: table;
  table-layout: fixed;
}
ul.menu li {
	display: table-cell;
}

scss 使用Bourbon Neat和选择器调整网格大小。需要http://bourbon.io和http://neat.bourbon.io

使用Bourbon Neat和选择器调整网格大小。需要http://bourbon.io和http://neat.bourbon.io

grid.scss

// 481 and up
.gallery {
	li {
		@include span-columns(6);

		&:nth-child(2n) {
			margin-right: 0;
		}
	}
}

// 768 and up
.gallery {
	li {
		@include span-columns(4);

		&:nth-child(2n) {
			margin-right: 2.35765% !important;
		}

		&:nth-child(3n) {
			margin-right: 0 !important;
		}
	}
}

scss 性感迷你browsehappy

性感迷你browsehappy

_browsehappy.scss

.browsehappy {
    margin: 0.0em 0;
    background: #232323;
    color: #CCC;
    padding: 1em 0;
    text-transform: uppercase;
    font-size: 10px;
    text-align: center;
    font-weight: bold;
    font-family: sans-serif;
    a {
        color: #FFF;
    }
}

scss Transparante悬停效应

Transparante悬停效应

_site.scss

.div{
  @include span-columns($total-columns omega, $total-columns);
  position: relative;
  top: -80px;
  left: 0;
  z-index: 0;

  a{
    cursor: pointer;
    border-bottom: none;
    cursor: pointer;
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;

    &:before{
      content:"";
      display: block;
      position: absolute;
      top: 0;
      bottom:0;
      right:0;
      bottom: 7px;
      background: none;
      width: 100%;
      background: url(../img/blank.gif);
      zoom: 1;
      -webkit-transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out;
      -ms-transition: all 0.2s ease-in-out;

      &:hover:nth-child(n) {
        filter: none;
      }
    }
    &:hover:before{
      background:rgb(17,46,134);
      background: transparent\9;
      background:rgba(17,46,134,0.5);
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f424242,endColorstr=#7f424242);
      zoom: 1;
    }
    img{
      margin: 0;
      padding:0;
    }
  }
}

scss 全屏图像背景

全屏图像背景

_site.scss

img.fullsizebackground{
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;
  @include opacity(.3);

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
  z-index: -9999;
}

scss 我重新调整了Zurb 4.3 / 5（主要是添加'medium'）网格和块网格以激活相应的媒体查询断点。看到我的全部

我重新调整了Zurb 4.3 / 5（主要是添加'medium'）网格和块网格以激活相应的媒体查询断点。请参阅https://github.com/zurb/foundation/issues/3261上的完整帖子

_grid-5-custom.scss

// I've updated the Zurb4.3/5 Grid/block-grid systems to be in line with my suggestions at https://github.com/zurb/foundation/issues/3261
// http://github.com/replete
// Taken from https://github.com/kenips/foundation/commit/d038a4335714197d76ff357e01077b8163aefcda

//
// @version
//   4.3.0
//
// @title
//   Grid
//
// @description
//   With a default "small-#" grid, a 640-1024px "medium-#" grid, and a 1024+ "large-#" grid, we've got you covered for any layout you can think of.
//   Please note that to use the above values in Foundation 4, you will need to change $small-screen to 640px and $medium-screen to 1024px in variables.scss
//

//
// Grid Variables
//
$include-html-grid-classes: true !default;
$row-width: emCalc(1000) !default;
$column-gutter: emCalc(30) !default;
$total-columns: 12 !default;

//
// Grid Calc Function
//
@function gridCalc($colNumber, $totalColumns) {
  @return percentage(($colNumber / $totalColumns));
}

// Right and Left "auto" for grid
%right-auto { #{$opposite-direction}: auto; }
%left-auto { #{$default-float}: auto; }

//
// Grid Mixins
//

// Create default, nested, and collapsed rows
@mixin grid-row($behavior: false) {

  // use @include grid-row(nest); to include a nested row
  @if $behavior == nest {
    margin-#{$default-float}: -($column-gutter/2);
    margin-#{$opposite-direction}: -($column-gutter/2);
    max-width: none;
    width: auto;
  }

  // use @include grid-row(collapse); to collapsed a container row margins
  @else if $behavior == collapse {
    margin-#{$default-float}: 0;
    margin-#{$opposite-direction}: 0;
    max-width: $row-width;
    width: 100%;
  }

  // use @include grid-row(nest-collapse); to collapse outer margins on a nested row
  @else if $behavior == nest-collapse {
    margin-#{$default-float}: 0;
    margin-#{$opposite-direction}: 0;
    max-width: none;
    width: auto;
  }

  // use @include grid-row; to use a container row
  @else {
    margin-#{$default-float}: auto;
    margin-#{$opposite-direction}: auto;
    margin-top: 0;
    margin-bottom: 0;
    max-width: $row-width;
    width: 100%;
  }

  @include clearfix;
}


// For creating columns - @include these inside a media query to control small vs. large grid layouts
@mixin grid-column($columns:false, $last-column:false, $center:false, $offset:false, $push:false, $pull:false, $collapse:false, $float:true, $include-position-relative: false) {

  // If collapsed, get rid of gutter padding
  @if $collapse {
    padding-left: 0;
    padding-right: 0;
  }

  // Gutter padding whenever a column isn't set to collapse
  // (use $collapse:null to do nothing)
  @else if $collapse == false {
    padding-left: $column-gutter / 2;
    padding-right: $column-gutter / 2;
  }

  // If a column number is given, calculate width
  @if $columns {
    width: gridCalc($columns, $total-columns);

    // If last column, float naturally instead of to the right
    @if $last-column { float: $opposite-direction; }
  }

  // If offset, calculate appropriate margins
  @if $offset { margin-#{$default-float}: gridCalc($offset, $total-columns); }

  // Source Ordering, adds left/right depending on which you use.
  @if $push { #{$default-float}: gridCalc($push, $total-columns); #{$opposite-direction}: auto; }
  @if $pull { #{$opposite-direction}: gridCalc($pull, $total-columns); #{$default-float}: auto; }

  // If centered, get rid of float and add appropriate margins
  @if $center {
    margin-#{$default-float}: auto;
    margin-#{$opposite-direction}: auto;
    float: none !important;
  }

  @if $float {
    @if $float == left or $float == true { float: $default-float; }
    @else if $float == right { float: $opposite-direction; }
    @else { float: none; }
  }

  // This helps us not need to repeat "position:relative" everywehere
  @if $include-position-relative { position: relative; }
}


@if $include-html-grid-classes != false {
  /* Grid HTML Classes */
  .row {
    @include grid-row;

    &.collapse {
      .column,
      .columns { @include grid-column($collapse:true); }
    }

    .row { @include grid-row($behavior:nest);
      &.collapse { @include grid-row($behavior:nest-collapse); }
    }
  }

  .column,
  .columns { @include grid-column($columns:$total-columns, $include-position-relative: true); }

  @media #{$screen} {

    @for $i from 1 through $total-columns {
      .default#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
    }

    @for $i from 0 through $total-columns - 2 {
      .default-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
    }

    [class*="column"] + [class*="column"]:last-child { float: $opposite-direction; }
    [class*="column"] + [class*="column"].end { float: $default-float; }

    .column.default-centered,
    .columns.default-centered { @include grid-column($center:true, $collapse:null, $float:false); }
  }

  @media #{$small} {

    @for $i from 1 through $total-columns {
      .small#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
    }

    @for $i from 0 through $total-columns - 1 {
      .small-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
    }

    @for $i from 1 through $total-columns - 1 {
      .small-push#{-$i} { @include grid-column($push:$i, $collapse:null, $float:false); }
      .small-pull#{-$i} { @include grid-column($pull:$i, $collapse:null, $float:false); }
    }

    .column.small-centered,
    .columns.small-centered { @include grid-column($center:true, $collapse:null, $float:false); }

    .column.small-uncentered,
    .columns.small-uncentered {
      margin-#{$default-float}: 0;
      margin-#{$opposite-direction}: 0;
      float: $default-float !important;
    }

  }

  @media #{$medium} {

    @for $i from 1 through $total-columns {
      .medium#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
    }

    @for $i from 0 through $total-columns - 1 {
      .medium-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
    }

    @for $i from 1 through $total-columns - 1 {
      .medium-push#{-$i} { @include grid-column($push:$i, $collapse:null, $float:false); }
      .medium-pull#{-$i} { @include grid-column($pull:$i, $collapse:null, $float:false); }
    }

    .column.medium-centered,
    .columns.medium-centered { @include grid-column($center:true, $collapse:null, $float:false); }

    .column.medium-uncentered,
    .columns.medium-uncentered {
      margin-#{$default-float}: 0;
      margin-#{$opposite-direction}: 0;
      float: $default-float !important;
    }

  }

  @media #{$large} {

    @for $i from 1 through $total-columns {
      .large#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
    }

    @for $i from 0 through $total-columns - 1 {
      .large-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
    }

    @for $i from 1 through $total-columns - 1 {
      .large-push#{-$i} { @include grid-column($push:$i, $collapse:null, $float:false); }
      .large-pull#{-$i} { @include grid-column($pull:$i, $collapse:null, $float:false); }
    }

    .column.large-centered,
    .columns.large-centered { @include grid-column($center:true, $collapse:null, $float:false); }

    .column.large-uncentered,
    .columns.large-uncentered {
      margin-#{$default-float}: 0;
      margin-#{$opposite-direction}: 0;
      float: $default-float !important;
    }

  }

}

_block-grid-5-custom.scss

// I've updated the Zurb4.3/5 Grid/block-grid systems to be in line with my suggestions at https://github.com/zurb/foundation/issues/3261
// http://github.com/replete

//
// Block Grid Variables
//
$include-html-grid-classes: $include-html-classes !default;

// We use this to control the maximum number of block grid elements per row
$block-grid-elements: 12 !default;
$block-grid-default-spacing: emCalc(20) !default;

// Enables media queries for block-grid classes. Set to false if writing semantic HTML.
$block-grid-media-queries: true !default;

//
// Block Grid Mixins
//

// We use this mixin to create different block-grids. You can apply per-row and spacing options.
// Setting $base-style to false will ommit default styles.
@mixin block-grid($per-row:false, $spacing:$block-grid-default-spacing, $base-style:true) {

  @if $base-style {
    display: block;
    padding: 0;
    margin: 0 (-$spacing/2);
    @include clearfix;

    &>li {
      display: inline;
      height: auto;
      float: $default-float;
      padding: 0 ($spacing/2) $spacing;
    }
  }

  @if $per-row {
    &>li {
      width: 100%/$per-row;
      padding: 0 ($spacing/2) $spacing;

      &:nth-of-type(n) { clear: none; }
      &:nth-of-type(#{$per-row}n+1) { clear: both; }
    }
  }

}

@if $include-html-grid-classes {
  /* Foundation Block Grids for below small breakpoint */
  @media #{$screen} {
    [class*="block-grid-"] { @include block-grid; }

    @for $i from 1 through $block-grid-elements {
      .default-block-grid-#{($i)} {
        @include block-grid($i,$block-grid-default-spacing,false);
      }
    }
  }

  /* Foundation Block Grids for above small breakpoint */
  @media #{$small} {
    /* Remove smaller grid clearing */
    @for $i from 1 through $block-grid-elements {
      .default-block-grid-#{($i)} > li:nth-of-type(#{$i}n+1) { clear: none; }
    }
    @for $i from 1 through $block-grid-elements {
      .small-block-grid-#{($i)} {
        @include block-grid($i,$block-grid-default-spacing,false);
      }
    }
  }

  /* Foundation Block Grids for above medium breakpoint */
  @media #{$medium} {
    /* Remove smaller grid clearing */
    @for $i from 1 through $block-grid-elements {
      .default-block-grid-#{($i)} > li:nth-of-type(#{$i}n+1) { clear: none; }
    }
    @for $i from 1 through $block-grid-elements {
      .small-block-grid-#{($i)} > li:nth-of-type(#{$i}n+1) { clear: none; }
    }
    @for $i from 1 through $block-grid-elements {
      .medium-block-grid-#{($i)} {
        @include block-grid($i,$block-grid-default-spacing,false);
      }
    }
  }

/* Foundation Block Grids for above large breakpoint */
  @media #{$large} {
    /* Remove small grid clearing */
    @for $i from 1 through $block-grid-elements {
      .default-block-grid-#{($i)} > li:nth-of-type(#{$i}n+1) { clear: none; }
    }
    @for $i from 1 through $block-grid-elements {
      .small-block-grid-#{($i)} > li:nth-of-type(#{$i}n+1) { clear: none; }
    }
    @for $i from 1 through $block-grid-elements {
      .medium-block-grid-#{($i)} > li:nth-of-type(#{$i}n+1) { clear: none; }
    }
    @for $i from 1 through $block-grid-elements {
      .large-block-grid-#{($i)} {
        @include block-grid($i,$block-grid-default-spacing,false);
      }
    }
  }

}

scss 我重新调整了Zurb 4.3 / 5（主要是添加'medium'）网格和块网格以激活相应的媒体查询断点。看到我的全部

我重新调整了Zurb 4.3 / 5（主要是添加'medium'）网格和块网格以激活相应的媒体查询断点。请参阅https://github.com/zurb/foundation/issues/3261上的完整帖子

_grid-5-custom.scss

// I've updated the Zurb4.3/5 Grid/block-grid systems to be in line with my suggestions at https://github.com/zurb/foundation/issues/3261
// http://github.com/replete
// Taken from https://github.com/kenips/foundation/commit/d038a4335714197d76ff357e01077b8163aefcda

//
// @version
//   4.3.0
//
// @title
//   Grid
//
// @description
//   With a default "small-#" grid, a 640-1024px "medium-#" grid, and a 1024+ "large-#" grid, we've got you covered for any layout you can think of.
//   Please note that to use the above values in Foundation 4, you will need to change $small-screen to 640px and $medium-screen to 1024px in variables.scss
//

//
// Grid Variables
//
$include-html-grid-classes: true !default;
$row-width: emCalc(1000) !default;
$column-gutter: emCalc(30) !default;
$total-columns: 12 !default;

//
// Grid Calc Function
//
@function gridCalc($colNumber, $totalColumns) {
  @return percentage(($colNumber / $totalColumns));
}

// Right and Left "auto" for grid
%right-auto { #{$opposite-direction}: auto; }
%left-auto { #{$default-float}: auto; }

//
// Grid Mixins
//

// Create default, nested, and collapsed rows
@mixin grid-row($behavior: false) {

  // use @include grid-row(nest); to include a nested row
  @if $behavior == nest {
    margin-#{$default-float}: -($column-gutter/2);
    margin-#{$opposite-direction}: -($column-gutter/2);
    max-width: none;
    width: auto;
  }

  // use @include grid-row(collapse); to collapsed a container row margins
  @else if $behavior == collapse {
    margin-#{$default-float}: 0;
    margin-#{$opposite-direction}: 0;
    max-width: $row-width;
    width: 100%;
  }

  // use @include grid-row(nest-collapse); to collapse outer margins on a nested row
  @else if $behavior == nest-collapse {
    margin-#{$default-float}: 0;
    margin-#{$opposite-direction}: 0;
    max-width: none;
    width: auto;
  }

  // use @include grid-row; to use a container row
  @else {
    margin-#{$default-float}: auto;
    margin-#{$opposite-direction}: auto;
    margin-top: 0;
    margin-bottom: 0;
    max-width: $row-width;
    width: 100%;
  }

  @include clearfix;
}


// For creating columns - @include these inside a media query to control small vs. large grid layouts
@mixin grid-column($columns:false, $last-column:false, $center:false, $offset:false, $push:false, $pull:false, $collapse:false, $float:true, $include-position-relative: false) {

  // If collapsed, get rid of gutter padding
  @if $collapse {
    padding-left: 0;
    padding-right: 0;
  }

  // Gutter padding whenever a column isn't set to collapse
  // (use $collapse:null to do nothing)
  @else if $collapse == false {
    padding-left: $column-gutter / 2;
    padding-right: $column-gutter / 2;
  }

  // If a column number is given, calculate width
  @if $columns {
    width: gridCalc($columns, $total-columns);

    // If last column, float naturally instead of to the right
    @if $last-column { float: $opposite-direction; }
  }

  // If offset, calculate appropriate margins
  @if $offset { margin-#{$default-float}: gridCalc($offset, $total-columns); }

  // Source Ordering, adds left/right depending on which you use.
  @if $push { #{$default-float}: gridCalc($push, $total-columns); #{$opposite-direction}: auto; }
  @if $pull { #{$opposite-direction}: gridCalc($pull, $total-columns); #{$default-float}: auto; }

  // If centered, get rid of float and add appropriate margins
  @if $center {
    margin-#{$default-float}: auto;
    margin-#{$opposite-direction}: auto;
    float: none !important;
  }

  @if $float {
    @if $float == left or $float == true { float: $default-float; }
    @else if $float == right { float: $opposite-direction; }
    @else { float: none; }
  }

  // This helps us not need to repeat "position:relative" everywehere
  @if $include-position-relative { position: relative; }
}


@if $include-html-grid-classes != false {
  /* Grid HTML Classes */
  .row {
    @include grid-row;

    &.collapse {
      .column,
      .columns { @include grid-column($collapse:true); }
    }

    .row { @include grid-row($behavior:nest);
      &.collapse { @include grid-row($behavior:nest-collapse); }
    }
  }

  .column,
  .columns { @include grid-column($columns:$total-columns, $include-position-relative: true); }

  @media #{$screen} {

    @for $i from 1 through $total-columns {
      .default#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
    }

    @for $i from 0 through $total-columns - 2 {
      .default-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
    }

    [class*="column"] + [class*="column"]:last-child { float: $opposite-direction; }
    [class*="column"] + [class*="column"].end { float: $default-float; }

    .column.default-centered,
    .columns.default-centered { @include grid-column($center:true, $collapse:null, $float:false); }
  }

  @media #{$small} {

    @for $i from 1 through $total-columns {
      .small#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
    }

    @for $i from 0 through $total-columns - 1 {
      .small-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
    }

    @for $i from 1 through $total-columns - 1 {
      .small-push#{-$i} { @include grid-column($push:$i, $collapse:null, $float:false); }
      .small-pull#{-$i} { @include grid-column($pull:$i, $collapse:null, $float:false); }
    }

    .column.small-centered,
    .columns.small-centered { @include grid-column($center:true, $collapse:null, $float:false); }

    .column.small-uncentered,
    .columns.small-uncentered {
      margin-#{$default-float}: 0;
      margin-#{$opposite-direction}: 0;
      float: $default-float !important;
    }

  }

  @media #{$medium} {

    @for $i from 1 through $total-columns {
      .medium#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
    }

    @for $i from 0 through $total-columns - 1 {
      .medium-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
    }

    @for $i from 1 through $total-columns - 1 {
      .medium-push#{-$i} { @include grid-column($push:$i, $collapse:null, $float:false); }
      .medium-pull#{-$i} { @include grid-column($pull:$i, $collapse:null, $float:false); }
    }

    .column.medium-centered,
    .columns.medium-centered { @include grid-column($center:true, $collapse:null, $float:false); }

    .column.medium-uncentered,
    .columns.medium-uncentered {
      margin-#{$default-float}: 0;
      margin-#{$opposite-direction}: 0;
      float: $default-float !important;
    }

  }

  @media #{$large} {

    @for $i from 1 through $total-columns {
      .large#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
    }

    @for $i from 0 through $total-columns - 1 {
      .large-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
    }

    @for $i from 1 through $total-columns - 1 {
      .large-push#{-$i} { @include grid-column($push:$i, $collapse:null, $float:false); }
      .large-pull#{-$i} { @include grid-column($pull:$i, $collapse:null, $float:false); }
    }

    .column.large-centered,
    .columns.large-centered { @include grid-column($center:true, $collapse:null, $float:false); }

    .column.large-uncentered,
    .columns.large-uncentered {
      margin-#{$default-float}: 0;
      margin-#{$opposite-direction}: 0;
      float: $default-float !important;
    }

  }

}

_block-grid-5-custom.scss

// I've updated the Zurb4.3/5 Grid/block-grid systems to be in line with my suggestions at https://github.com/zurb/foundation/issues/3261
// http://github.com/replete

//
// Block Grid Variables
//
$include-html-grid-classes: $include-html-classes !default;

// We use this to control the maximum number of block grid elements per row
$block-grid-elements: 12 !default;
$block-grid-default-spacing: emCalc(20) !default;

// Enables media queries for block-grid classes. Set to false if writing semantic HTML.
$block-grid-media-queries: true !default;

//
// Block Grid Mixins
//

// We use this mixin to create different block-grids. You can apply per-row and spacing options.
// Setting $base-style to false will ommit default styles.
@mixin block-grid($per-row:false, $spacing:$block-grid-default-spacing, $base-style:true) {

  @if $base-style {
    display: block;
    padding: 0;
    margin: 0 (-$spacing/2);
    @include clearfix;

    &>li {
      display: inline;
      height: auto;
      float: $default-float;
      padding: 0 ($spacing/2) $spacing;
    }
  }

  @if $per-row {
    &>li {
      width: 100%/$per-row;
      padding: 0 ($spacing/2) $spacing;

      &:nth-of-type(n) { clear: none; }
      &:nth-of-type(#{$per-row}n+1) { clear: both; }
    }
  }

}

@if $include-html-grid-classes {
  /* Foundation Block Grids for below small breakpoint */
  @media #{$screen} {
    [class*="block-grid-"] { @include block-grid; }

    @for $i from 1 through $block-grid-elements {
      .default-block-grid-#{($i)} {
        @include block-grid($i,$block-grid-default-spacing,false);
      }
    }
  }

  /* Foundation Block Grids for above small breakpoint */
  @media #{$small} {
    /* Remove smaller grid clearing */
    @for $i from 1 through $block-grid-elements {
      .default-block-grid-#{($i)} > li:nth-of-type(#{$i}n+1) { clear: none; }
    }
    @for $i from 1 through $block-grid-elements {
      .small-block-grid-#{($i)} {
        @include block-grid($i,$block-grid-default-spacing,false);
      }
    }
  }

  /* Foundation Block Grids for above medium breakpoint */
  @media #{$medium} {
    /* Remove smaller grid clearing */
    @for $i from 1 through $block-grid-elements {
      .default-block-grid-#{($i)} > li:nth-of-type(#{$i}n+1) { clear: none; }
    }
    @for $i from 1 through $block-grid-elements {
      .small-block-grid-#{($i)} > li:nth-of-type(#{$i}n+1) { clear: none; }
    }
    @for $i from 1 through $block-grid-elements {
      .medium-block-grid-#{($i)} {
        @include block-grid($i,$block-grid-default-spacing,false);
      }
    }
  }

/* Foundation Block Grids for above large breakpoint */
  @media #{$large} {
    /* Remove small grid clearing */
    @for $i from 1 through $block-grid-elements {
      .default-block-grid-#{($i)} > li:nth-of-type(#{$i}n+1) { clear: none; }
    }
    @for $i from 1 through $block-grid-elements {
      .small-block-grid-#{($i)} > li:nth-of-type(#{$i}n+1) { clear: none; }
    }
    @for $i from 1 through $block-grid-elements {
      .medium-block-grid-#{($i)} > li:nth-of-type(#{$i}n+1) { clear: none; }
    }
    @for $i from 1 through $block-grid-elements {
      .large-block-grid-#{($i)} {
        @include block-grid($i,$block-grid-default-spacing,false);
      }
    }
  }

}

scss 我重新调整了Zurb 4.3 / 5（主要是添加'medium'）网格和块网格以激活相应的媒体查询断点。看到我的全部

我重新调整了Zurb 4.3 / 5（主要是添加'medium'）网格和块网格以激活相应的媒体查询断点。请参阅https://github.com/zurb/foundation/issues/3261上的完整帖子

_grid-5-custom.scss

// I've updated the Zurb4.3/5 Grid/block-grid systems to be in line with my suggestions at https://github.com/zurb/foundation/issues/3261
// http://github.com/replete
// Taken from https://github.com/kenips/foundation/commit/d038a4335714197d76ff357e01077b8163aefcda

//
// @version
//   4.3.0
//
// @title
//   Grid
//
// @description
//   With a default "small-#" grid, a 640-1024px "medium-#" grid, and a 1024+ "large-#" grid, we've got you covered for any layout you can think of.
//   Please note that to use the above values in Foundation 4, you will need to change $small-screen to 640px and $medium-screen to 1024px in variables.scss
//

//
// Grid Variables
//
$include-html-grid-classes: true !default;
$row-width: emCalc(1000) !default;
$column-gutter: emCalc(30) !default;
$total-columns: 12 !default;

//
// Grid Calc Function
//
@function gridCalc($colNumber, $totalColumns) {
  @return percentage(($colNumber / $totalColumns));
}

// Right and Left "auto" for grid
%right-auto { #{$opposite-direction}: auto; }
%left-auto { #{$default-float}: auto; }

//
// Grid Mixins
//

// Create default, nested, and collapsed rows
@mixin grid-row($behavior: false) {

  // use @include grid-row(nest); to include a nested row
  @if $behavior == nest {
    margin-#{$default-float}: -($column-gutter/2);
    margin-#{$opposite-direction}: -($column-gutter/2);
    max-width: none;
    width: auto;
  }

  // use @include grid-row(collapse); to collapsed a container row margins
  @else if $behavior == collapse {
    margin-#{$default-float}: 0;
    margin-#{$opposite-direction}: 0;
    max-width: $row-width;
    width: 100%;
  }

  // use @include grid-row(nest-collapse); to collapse outer margins on a nested row
  @else if $behavior == nest-collapse {
    margin-#{$default-float}: 0;
    margin-#{$opposite-direction}: 0;
    max-width: none;
    width: auto;
  }

  // use @include grid-row; to use a container row
  @else {
    margin-#{$default-float}: auto;
    margin-#{$opposite-direction}: auto;
    margin-top: 0;
    margin-bottom: 0;
    max-width: $row-width;
    width: 100%;
  }

  @include clearfix;
}


// For creating columns - @include these inside a media query to control small vs. large grid layouts
@mixin grid-column($columns:false, $last-column:false, $center:false, $offset:false, $push:false, $pull:false, $collapse:false, $float:true, $include-position-relative: false) {

  // If collapsed, get rid of gutter padding
  @if $collapse {
    padding-left: 0;
    padding-right: 0;
  }

  // Gutter padding whenever a column isn't set to collapse
  // (use $collapse:null to do nothing)
  @else if $collapse == false {
    padding-left: $column-gutter / 2;
    padding-right: $column-gutter / 2;
  }

  // If a column number is given, calculate width
  @if $columns {
    width: gridCalc($columns, $total-columns);

    // If last column, float naturally instead of to the right
    @if $last-column { float: $opposite-direction; }
  }

  // If offset, calculate appropriate margins
  @if $offset { margin-#{$default-float}: gridCalc($offset, $total-columns); }

  // Source Ordering, adds left/right depending on which you use.
  @if $push { #{$default-float}: gridCalc($push, $total-columns); #{$opposite-direction}: auto; }
  @if $pull { #{$opposite-direction}: gridCalc($pull, $total-columns); #{$default-float}: auto; }

  // If centered, get rid of float and add appropriate margins
  @if $center {
    margin-#{$default-float}: auto;
    margin-#{$opposite-direction}: auto;
    float: none !important;
  }

  @if $float {
    @if $float == left or $float == true { float: $default-float; }
    @else if $float == right { float: $opposite-direction; }
    @else { float: none; }
  }

  // This helps us not need to repeat "position:relative" everywehere
  @if $include-position-relative { position: relative; }
}


@if $include-html-grid-classes != false {
  /* Grid HTML Classes */
  .row {
    @include grid-row;

    &.collapse {
      .column,
      .columns { @include grid-column($collapse:true); }
    }

    .row { @include grid-row($behavior:nest);
      &.collapse { @include grid-row($behavior:nest-collapse); }
    }
  }

  .column,
  .columns { @include grid-column($columns:$total-columns, $include-position-relative: true); }

  @media #{$screen} {

    @for $i from 1 through $total-columns {
      .default#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
    }

    @for $i from 0 through $total-columns - 2 {
      .default-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
    }

    [class*="column"] + [class*="column"]:last-child { float: $opposite-direction; }
    [class*="column"] + [class*="column"].end { float: $default-float; }

    .column.default-centered,
    .columns.default-centered { @include grid-column($center:true, $collapse:null, $float:false); }
  }

  @media #{$small} {

    @for $i from 1 through $total-columns {
      .small#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
    }

    @for $i from 0 through $total-columns - 1 {
      .small-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
    }

    @for $i from 1 through $total-columns - 1 {
      .small-push#{-$i} { @include grid-column($push:$i, $collapse:null, $float:false); }
      .small-pull#{-$i} { @include grid-column($pull:$i, $collapse:null, $float:false); }
    }

    .column.small-centered,
    .columns.small-centered { @include grid-column($center:true, $collapse:null, $float:false); }

    .column.small-uncentered,
    .columns.small-uncentered {
      margin-#{$default-float}: 0;
      margin-#{$opposite-direction}: 0;
      float: $default-float !important;
    }

  }

  @media #{$medium} {

    @for $i from 1 through $total-columns {
      .medium#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
    }

    @for $i from 0 through $total-columns - 1 {
      .medium-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
    }

    @for $i from 1 through $total-columns - 1 {
      .medium-push#{-$i} { @include grid-column($push:$i, $collapse:null, $float:false); }
      .medium-pull#{-$i} { @include grid-column($pull:$i, $collapse:null, $float:false); }
    }

    .column.medium-centered,
    .columns.medium-centered { @include grid-column($center:true, $collapse:null, $float:false); }

    .column.medium-uncentered,
    .columns.medium-uncentered {
      margin-#{$default-float}: 0;
      margin-#{$opposite-direction}: 0;
      float: $default-float !important;
    }

  }

  @media #{$large} {

    @for $i from 1 through $total-columns {
      .large#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
    }

    @for $i from 0 through $total-columns - 1 {
      .large-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
    }

    @for $i from 1 through $total-columns - 1 {
      .large-push#{-$i} { @include grid-column($push:$i, $collapse:null, $float:false); }
      .large-pull#{-$i} { @include grid-column($pull:$i, $collapse:null, $float:false); }
    }

    .column.large-centered,
    .columns.large-centered { @include grid-column($center:true, $collapse:null, $float:false); }

    .column.large-uncentered,
    .columns.large-uncentered {
      margin-#{$default-float}: 0;
      margin-#{$opposite-direction}: 0;
      float: $default-float !important;
    }

  }

}

_block-grid-5-custom.scss

// I've updated the Zurb4.3/5 Grid/block-grid systems to be in line with my suggestions at https://github.com/zurb/foundation/issues/3261
// http://github.com/replete

//
// Block Grid Variables
//
$include-html-grid-classes: $include-html-classes !default;

// We use this to control the maximum number of block grid elements per row
$block-grid-elements: 12 !default;
$block-grid-default-spacing: emCalc(20) !default;

// Enables media queries for block-grid classes. Set to false if writing semantic HTML.
$block-grid-media-queries: true !default;

//
// Block Grid Mixins
//

// We use this mixin to create different block-grids. You can apply per-row and spacing options.
// Setting $base-style to false will ommit default styles.
@mixin block-grid($per-row:false, $spacing:$block-grid-default-spacing, $base-style:true) {

  @if $base-style {
    display: block;
    padding: 0;
    margin: 0 (-$spacing/2);
    @include clearfix;

    &>li {
      display: inline;
      height: auto;
      float: $default-float;
      padding: 0 ($spacing/2) $spacing;
    }
  }

  @if $per-row {
    &>li {
      width: 100%/$per-row;
      padding: 0 ($spacing/2) $spacing;

      &:nth-of-type(n) { clear: none; }
      &:nth-of-type(#{$per-row}n+1) { clear: both; }
    }
  }

}

@if $include-html-grid-classes {
  /* Foundation Block Grids for below small breakpoint */
  @media #{$screen} {
    [class*="block-grid-"] { @include block-grid; }

    @for $i from 1 through $block-grid-elements {
      .default-block-grid-#{($i)} {
        @include block-grid($i,$block-grid-default-spacing,false);
      }
    }
  }

  /* Foundation Block Grids for above small breakpoint */
  @media #{$small} {
    /* Remove smaller grid clearing */
    @for $i from 1 through $block-grid-elements {
      .default-block-grid-#{($i)} > li:nth-of-type(#{$i}n+1) { clear: none; }
    }
    @for $i from 1 through $block-grid-elements {
      .small-block-grid-#{($i)} {
        @include block-grid($i,$block-grid-default-spacing,false);
      }
    }
  }

  /* Foundation Block Grids for above medium breakpoint */
  @media #{$medium} {
    /* Remove smaller grid clearing */
    @for $i from 1 through $block-grid-elements {
      .default-block-grid-#{($i)} > li:nth-of-type(#{$i}n+1) { clear: none; }
    }
    @for $i from 1 through $block-grid-elements {
      .small-block-grid-#{($i)} > li:nth-of-type(#{$i}n+1) { clear: none; }
    }
    @for $i from 1 through $block-grid-elements {
      .medium-block-grid-#{($i)} {
        @include block-grid($i,$block-grid-default-spacing,false);
      }
    }
  }

/* Foundation Block Grids for above large breakpoint */
  @media #{$large} {
    /* Remove small grid clearing */
    @for $i from 1 through $block-grid-elements {
      .default-block-grid-#{($i)} > li:nth-of-type(#{$i}n+1) { clear: none; }
    }
    @for $i from 1 through $block-grid-elements {
      .small-block-grid-#{($i)} > li:nth-of-type(#{$i}n+1) { clear: none; }
    }
    @for $i from 1 through $block-grid-elements {
      .medium-block-grid-#{($i)} > li:nth-of-type(#{$i}n+1) { clear: none; }
    }
    @for $i from 1 through $block-grid-elements {
      .large-block-grid-#{($i)} {
        @include block-grid($i,$block-grid-default-spacing,false);
      }
    }
  }

}