1
如果sass函數未編譯會發生什麼？未編譯的Sass函數
例如，下面的文件，應該產生一個基礎網格，但如果我推出的「看」它不會產生錯誤或輸出。
同一個文件，如果在另一個項目上馬但是工作。
@import "global";
//
// @variables
//
$include-html-grid-classes: $include-html-classes !default;
$row-width: rem-calc(1000) !default;
$column-gutter: rem-calc(30) !default;
$total-columns: 12 !default;
//
// Grid Functions
//
// Deprecated: We'll drop support for this in 5.1, use grid-calc()
@function gridCalc($colNumber, $totalColumns) {
@warn "gridCalc() is deprecated, use grid-calc()";
@return grid-calc($colNumber, $totalColumns);
}
// @FUNCTION
// $colNumber - Found in settings file
// $totalColumns - Found in settings file
@function grid-calc($colNumber, $totalColumns) {
@return percentage(($colNumber/$totalColumns));
}
//
// @mixins
//
// For creating container, nested, and collapsed rows.
//
//
// $behavior - Any special beavior for this row? Default: false. Options: nest, collapse, nest-collapse, false.
@mixin grid-row($behavior: false) {
// use @include grid-row(nest); to include a nested row
@if $behavior == nest {
width: auto;
margin-#{$default-float}: -($column-gutter/2);
margin-#{$opposite-direction}: -($column-gutter/2);
margin-top: 0;
margin-bottom: 0;
max-width: none;
}
// use @include grid-row(collapse); to collapsed a container row margins
@else if $behavior == collapse {
width: 100%;
margin: 0;
max-width: $row-width;
}
// use @include grid-row(nest-collapse); to collapse outer margins on a nested row
@else if $behavior == nest-collapse {
width: auto;
margin: 0;
max-width: none;
}
// use @include grid-row; to use a container row
@else {
width: 100%;
margin-#{$default-float}: auto;
margin-#{$opposite-direction}: auto;
margin-top: 0;
margin-bottom: 0;
max-width: $row-width;
}
// Clearfix for all rows
@include clearfix();
}
// Creates a column, should be used inside of a media query to control layouts
//
// $columns - The number of columns this should be
// $last-column - Is this the last column? Default: false.
// $center - Center these columns? Default: false.
// $offset - # of columns to offset. Default: false.
// $push - # of columns to push. Default: false.
// $pull - # of columns to pull. Default: false.
// $collapse - Get rid of gutter padding on column? Default: false.
// $float - Should this float? Default: true. Options: true, false, left, right.
@mixin grid-column(
$columns:false,
$last-column:false,
$center:false,
$offset:false,
$push:false,
$pull:false,
$collapse:false,
$float:true) {
position: relative;
// 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: grid-calc($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}: grid-calc($offset, $total-columns); }
// Source Ordering, adds left/right depending on which you use.
@if $push { #{$default-float}: grid-calc($push, $total-columns); #{$opposite-direction}: auto; }
@if $pull { #{$opposite-direction}: grid-calc($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; }
}
}
// Create presentational classes for grid
//
// $size - Name of class to use, i.e. "large" will generate .large-1, .large-2, etc.
@mixin grid-html-classes($size) {
@for $i from 1 through $total-columns - 1 {
.#{$size}-push#{-$i} {
@include grid-column($push:$i, $collapse:null, $float:false);
}
.#{$size}-pull#{-$i} {
@include grid-column($pull:$i, $collapse:null, $float:false);
}
}
.column,
.columns { @include grid-column($columns:false); }
@for $i from 1 through $total-columns {
.#{$size}#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
}
@for $i from 0 through $total-columns - 2 {
.#{$size}-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.#{$size}-centered,
.columns.#{$size}-centered { @include grid-column($center:true, $collapse:null, $float:false); }
.column.#{$size}-uncentered,
.columns.#{$size}-uncentered {
margin-#{$default-float}: 0;
margin-#{$opposite-direction}: 0;
float: $default-float !important;
}
.column.#{$size}-uncentered.opposite,
.columns.#{$size}-uncentered.opposite {
float: $opposite-direction !important;
}
}
@include exports("grid") {
@if $include-html-grid-classes {
.row {
@include grid-row;
&.collapse {
> .column,
> .columns { @include grid-column($collapse:true); }
.row {margin-left:0; margin-right:0;}
}
.row { @include grid-row($behavior:nest);
&.collapse { @include grid-row($behavior:nest-collapse); }
}
}
.column,
.columns { @include grid-column($columns:$total-columns); }
@media #{$small-up} {
@include grid-html-classes($size:small);
}
@media #{$medium-up} {
@include grid-html-classes($size:medium);
// Old push and pull classes
@for $i from 1 through $total-columns - 1 {
.push#{-$i} {
@include grid-column($push:$i, $collapse:null, $float:false);
}
.pull#{-$i} {
@include grid-column($pull:$i, $collapse:null, $float:false);
}
}
}
@media #{$large-up} {
@include grid-html-classes($size:large);
}
@media #{$xlarge-up} {
@include grid-html-classes($size:xlarge);
}
@media #{$xxlarge-up} {
@include grid-html-classes($size:xxlarge);
}
}
}