3.2.12 (Media Mark) b847f200463d9d45d1863415d567ed73e9018d3f o:Sass::Tree::RootNode : @linei:@has_childrenT:@template"8// Flexible grid @function flex-grid($columns, $container-columns: $fg-max-columns) { $width: $columns * $fg-column + ($columns - 1) * $fg-gutter; $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; @return percentage($width / $container-width); } // Flexible gutter @function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) { $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; @return percentage($gutter / $container-width); } // The $fg-column, $fg-gutter and $fg-max-columns variables must be defined in your base stylesheet to properly use the flex-grid function. // This function takes the fluid grid equation (target / context = result) and uses columns to help define each. // // The calculation presumes that your column structure will be missing the last gutter: // // -- column -- gutter -- column -- gutter -- column // // $fg-column: 60px; // Column Width // $fg-gutter: 25px; // Gutter Width // $fg-max-columns: 12; // Total Columns For Main Container // // div { // width: flex-grid(4); // returns (315px / 995px) = 31.65829%; // margin-left: flex-gutter(); // returns (25px / 995px) = 2.51256%; // // p { // width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%; // float: left; // margin: flex-gutter(4); // returns (25px / 315px) = 7.936508%; // } // // blockquote { // float: left; // width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%; // } // }:@children[ o:Sass::Tree::CommentNode ;i: @type: silent; [: @value["/* Flexible grid */: @options{o:Sass::Tree::FunctionNode ;i: @name"flex-grid;T: @splat0; [o:Sass::Tree::VariableNode : @expro:Sass::Script::Operation ;i:@operand2o; ;i;o:Sass::Script::Variable ;i;"fg-gutter:@underscored_name"fg_gutter;@ ;@ :@operator: times:@operand1o; ;i;o:Sass::Script::Number ;i:@denominator_units[:@numerator_units[:@original"1; i;@ ;@ ;: minus;o; ;i;" columns;" columns;@ ;@ ;: plus;o; ;i;o; ;i;"fg-column;"fg_column;@ ;@ ;;;o; ;i;" columns;" columns;@ ;i;" width; [: @guarded0;@ o; ;o; ;i ;o; ;i ;o; ;i ;"fg-gutter;"fg_gutter;@ ;@ ;;;o; ;i ;o; ;i ;@;[;"1; i;@ ;@ ;;;o; ;i ;"container-columns;"container_columns;@ ;@ ;; ;o; ;i ;o; ;i ;"fg-column;"fg_column;@ ;@ ;;;o; ;i ;"container-columns;"container_columns;@ ;i ;"container-width; [;!0;@ o:Sass::Tree::ReturnNode ;o:Sass::Script::Funcall ;i ;"percentage;0;@ :@keywords{: @args[o; ;i ;o; ;i ;"container-width;"container_width;@ ;@ ;:div;o; ;i ;" width;" width;@ ;i ; [;@ ;@ ;%[[o;;" columns;" columns;@ 0[o;;"container-columns;"container_columns;@ o; ;i;"fg-max-columns;"fg_max_columns;@ o; ;i ; ; ; [; ["/* Flexible gutter */;@ o; ;i;"flex-gutter;T;0; [o; ;o; ;i;o; ;i;o; ;i;"fg-gutter;"fg_gutter;@ ;@ ;;;o; ;i;o; ;i;@;[;"1; i;@ ;@ ;;;o; ;i;"container-columns;"container_columns;@ ;@ ;; ;o; ;i;o; ;i;"fg-column;"fg_column;@ ;@ ;;;o; ;i;"container-columns;"container_columns;@ ;i;"container-width; [;!0;@ o;" ;o;# ;i;"percentage;0;@ ;${;%[o; ;i;o; ;i;"container-width;"container_width;@ ;@ ;;&;o; ;i;" gutter;" gutter;@ ;i; [;@ ;@ ;%[[o;;"container-columns;"container_columns;@ o; ;i;"fg-max-columns;"fg_max_columns;@ [o;;" gutter;" gutter;@ o; ;i;"fg-gutter;"fg_gutter;@ o; ;i; ; ; [; ["/* The $fg-column, $fg-gutter and $fg-max-columns variables must be defined in your base stylesheet to properly use the flex-grid function. * This function takes the fluid grid equation (target / context = result) and uses columns to help define each. * * The calculation presumes that your column structure will be missing the last gutter: * * -- column -- gutter -- column -- gutter -- column * * $fg-column: 60px; // Column Width * $fg-gutter: 25px; // Gutter Width * $fg-max-columns: 12; // Total Columns For Main Container * * div { * width: flex-grid(4); // returns (315px / 995px) = 31.65829%; * margin-left: flex-gutter(); // returns (25px / 995px) = 2.51256%; * * p { * width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%; * float: left; * margin: flex-gutter(4); // returns (25px / 315px) = 7.936508%; * } * * blockquote { * float: left; * width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%; * } * } */;@ ;@