├── generator ├── template │ ├── src │ │ ├── scss │ │ │ ├── animations │ │ │ │ ├── __animations.scss │ │ │ │ └── __fade.scss │ │ │ ├── utilities │ │ │ │ ├── __utilities.scss │ │ │ │ └── __u-visually-hidden.scss │ │ │ ├── mixins │ │ │ │ ├── __mixins.scss │ │ │ │ ├── __font-sizes.scss │ │ │ │ └── __helpers.scss │ │ │ ├── variables │ │ │ │ ├── __animation.scss │ │ │ │ ├── __breakpoints.scss │ │ │ │ ├── __layout.scss │ │ │ │ ├── __colors.scss │ │ │ │ ├── __fonts.scss │ │ │ │ └── __hamburger.scss │ │ │ ├── functions │ │ │ │ └── __functions.scss │ │ │ ├── base.scss │ │ │ ├── settings.scss │ │ │ └── base │ │ │ │ ├── __reset.scss │ │ │ │ ├── __general.scss │ │ │ │ └── __form.scss │ │ └── App.vue │ └── config │ │ └── storybook │ │ └── style.scss └── index.js ├── index.js ├── prompts.js ├── package.json ├── LICENSE └── README.md /generator/template/src/scss/animations/__animations.scss: -------------------------------------------------------------------------------- 1 | @import 'fade'; 2 | -------------------------------------------------------------------------------- /generator/template/src/scss/utilities/__utilities.scss: -------------------------------------------------------------------------------- 1 | @import 'u-visually-hidden'; 2 | -------------------------------------------------------------------------------- /generator/template/src/scss/mixins/__mixins.scss: -------------------------------------------------------------------------------- 1 | @import 'helpers'; 2 | @import 'font-sizes'; 3 | -------------------------------------------------------------------------------- /generator/template/config/storybook/style.scss: -------------------------------------------------------------------------------- 1 | @import '@/scss/base.scss'; 2 | 3 | body { 4 | padding: 2rem; 5 | } 6 | -------------------------------------------------------------------------------- /generator/template/src/scss/variables/__animation.scss: -------------------------------------------------------------------------------- 1 | $animation-speed: .4s; 2 | $animation-easing: cubic-bezier(0.37, 0.96, 0.22, 1.01); 3 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | // eslint-disable-next-line no-unused-vars 4 | module.exports = (api, projectOptions) => {}; 5 | -------------------------------------------------------------------------------- /generator/template/src/scss/functions/__functions.scss: -------------------------------------------------------------------------------- 1 | // Create border 2 | @function border($width: 2px, $color: red) { 3 | @return $width solid $color; 4 | } 5 | -------------------------------------------------------------------------------- /generator/template/src/scss/base.scss: -------------------------------------------------------------------------------- 1 | @import 'base/reset'; 2 | @import 'base/form'; 3 | @import 'base/general'; 4 | @import 'utilities/utilities'; 5 | @import 'animations/animations'; 6 | -------------------------------------------------------------------------------- /generator/template/src/scss/variables/__breakpoints.scss: -------------------------------------------------------------------------------- 1 | // Breakpoint values 2 | 3 | $small: 540px; 4 | $medium: 768px; 5 | $large: 1024px; 6 | $x-large: 1280px; 7 | $xx-large: 1600px; 8 | -------------------------------------------------------------------------------- /generator/template/src/App.vue: -------------------------------------------------------------------------------- 1 | --- 2 | extend: '@vue/cli-service/generator/template/src/App.vue' 3 | replace: !!js/regexp // 4 | --- 5 | 6 | 9 | -------------------------------------------------------------------------------- /prompts.js: -------------------------------------------------------------------------------- 1 | module.exports = [ 2 | { 3 | name: 'type', 4 | type: 'confirm', 5 | message: 'WARNING! This plugin will alter your existing project structure. please commit your files before continuing and when ready press "Y"?', 6 | default: true 7 | }, 8 | ]; 9 | -------------------------------------------------------------------------------- /generator/template/src/scss/settings.scss: -------------------------------------------------------------------------------- 1 | @import 'variables/breakpoints'; 2 | @import 'variables/colors'; 3 | @import 'variables/layout'; 4 | @import 'variables/fonts'; 5 | @import 'variables/hamburger'; 6 | @import 'variables/animation'; 7 | @import 'mixins/mixins'; 8 | @import 'functions/functions'; 9 | -------------------------------------------------------------------------------- /generator/template/src/scss/variables/__layout.scss: -------------------------------------------------------------------------------- 1 | // Grid 2 | $max-width: 1200px; 3 | $max-width-narrow: 720px; 4 | 5 | // Spacing 6 | $horizontal-padding-small: 30px; 7 | $horizontal-padding-medium: 60px; 8 | 9 | // Containers 10 | $limit-width: $max-width + ($horizontal-padding-medium * 2); 11 | -------------------------------------------------------------------------------- /generator/template/src/scss/variables/__colors.scss: -------------------------------------------------------------------------------- 1 | $black: #000; 2 | $white: #fff; 3 | $grey-darker: #111; 4 | $grey-dark: #333; 5 | $grey: #999; 6 | $grey-light: #ccc; 7 | $grey-lighter: #f5f5f5; 8 | $gold: #ac955f; 9 | $blue: #2196f3; 10 | $success: #4caf50; 11 | $error: #ff5252; 12 | $warning: #ffc105; 13 | $disabled: #aaa; 14 | -------------------------------------------------------------------------------- /generator/template/src/scss/variables/__fonts.scss: -------------------------------------------------------------------------------- 1 | // Typefaces 2 | $arial: 'Arial', sans-serif; 3 | 4 | // text sizes 5 | $text-x-large: 3.4rem; 6 | $text-large: 2.4rem; 7 | $text-medium: 2rem; 8 | $text-small: 1.8rem; 9 | $text-x-small: 1.5rem; 10 | 11 | // Global 12 | $primary-font: $arial; 13 | $primary-font-color: $black; 14 | $primary-link-color: $gold; 15 | -------------------------------------------------------------------------------- /generator/template/src/scss/utilities/__u-visually-hidden.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Visually hide the element but keep it available to screen readers. 3 | */ 4 | 5 | .u-visually-hidden { 6 | border: 0; 7 | clip: rect(0 0 0 0); 8 | height: 1px; 9 | margin: -1px; 10 | overflow: hidden; 11 | padding: 0; 12 | position: absolute !important; 13 | width: 1px; 14 | } 15 | -------------------------------------------------------------------------------- /generator/template/src/scss/animations/__fade.scss: -------------------------------------------------------------------------------- 1 | .fade-enter-active, 2 | .fade-leave-active { 3 | transition: opacity .3s; 4 | } 5 | 6 | .fade-enter, 7 | .fade-leave-to { 8 | opacity: 0; 9 | } 10 | 11 | .fade-long-enter-active, 12 | .fade-long-leave-active { 13 | transition: opacity 1s; 14 | } 15 | 16 | .fade-long-enter, 17 | .fade-long-leave-to { 18 | opacity: 0; 19 | } 20 | -------------------------------------------------------------------------------- /generator/index.js: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line no-unused-vars 2 | module.exports = (api, options, rootOptions) => { 3 | api.extendPackage({ 4 | vue: { 5 | css: { 6 | loaderOptions: { 7 | sass: { 8 | data: '@import "@/scss/settings.scss";' 9 | } 10 | } 11 | } 12 | } 13 | }); 14 | 15 | api.render('./template'); 16 | }; 17 | -------------------------------------------------------------------------------- /generator/template/src/scss/variables/__hamburger.scss: -------------------------------------------------------------------------------- 1 | // Hamburger menu setup 2 | 3 | $hamburger-color: $black; 4 | $hamburger-background-color: transparent; 5 | // The width of the button area 6 | $hamburger-width: 2.8rem; 7 | // The height of the button area 8 | $hamburger-height: 2.2rem; 9 | // The thickness of the button bars 10 | $hamburger-bar-thickness: .3rem; 11 | // The spacing between button bars 12 | $hamburger-bar-space: .4rem; 13 | // border radius 14 | $hamburger-bar-border-radius: 1rem; 15 | // The left/right padding between button area and bars. 16 | $hamburger-pad: 0; 17 | // The transition duration 18 | $hamburger-transistion-duration: .3s; 19 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-cli-plugin-scss-base", 3 | "version": "0.2.2", 4 | "description": "An opinionated Vue CLI plugin to include base SCSS structure and files such as variables, mixins and reset", 5 | "main": "index.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "git+https://github.com/milad-alizadeh/vue-cli-plugin-scss-base.git" 9 | }, 10 | "keywords": [ 11 | "vue", 12 | "vue-cli", 13 | "scss base" 14 | ], 15 | "author": "Milad Alizadeh (miladalizadeh.com)", 16 | "license": "MIT", 17 | "bugs": { 18 | "url": "https://github.com/milad-alizadeh/vue-cli-plugin-scss-base/issues" 19 | }, 20 | "homepage": "https://github.com/milad-alizadeh/vue-cli-plugin-scss-base#readme" 21 | } 22 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Milad Alizadeh 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /generator/template/src/scss/base/__reset.scss: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ */ 2 | /* v1.0 | 20080212 */ 3 | 4 | html, body, div, span, applet, object, iframe, 5 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 6 | a, abbr, acronym, address, big, cite, code, 7 | del, dfn, em, font, img, ins, kbd, q, s, samp, 8 | small, strike, strong, sub, sup, tt, var, 9 | b, u, i, center, 10 | dl, dt, dd, ol, ul, li, 11 | fieldset, form, label, legend, 12 | table, caption, tbody, tfoot, thead, tr, th, td { 13 | margin: 0; 14 | padding: 0; 15 | border: 0; 16 | outline: 0; 17 | font-size: 100%; 18 | vertical-align: baseline; 19 | background: transparent; 20 | } 21 | body { 22 | line-height: 1; 23 | } 24 | ol, ul { 25 | list-style: none; 26 | } 27 | blockquote, q { 28 | quotes: none; 29 | } 30 | blockquote:before, blockquote:after, 31 | q:before, q:after { 32 | content: ''; 33 | content: none; 34 | } 35 | 36 | /* remember to define focus styles! */ 37 | :focus { 38 | outline: 0; 39 | } 40 | 41 | /* remember to highlight inserts somehow! */ 42 | ins { 43 | text-decoration: none; 44 | } 45 | del { 46 | text-decoration: line-through; 47 | } 48 | 49 | /* tables still need 'cellspacing="0"' in the markup */ 50 | table { 51 | border-collapse: collapse; 52 | border-spacing: 0; 53 | } 54 | -------------------------------------------------------------------------------- /generator/template/src/scss/base/__general.scss: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | font-size: 62.5%; 4 | -webkit-text-size-adjust: 100%; 5 | } 6 | 7 | body { 8 | color: $primary-font-color; 9 | font-family: $primary-font; 10 | font-size: 1.6rem; 11 | -moz-font-smoothing: antialiased; 12 | -moz-osx-font-smoothing: grayscale; 13 | -webkit-font-smoothing: antialiased; 14 | font-weight: 400; 15 | line-height: 1.4; 16 | text-rendering: optimizeLegibility; 17 | } 18 | 19 | html, 20 | body { 21 | width: 100%; 22 | height: 100%; 23 | } 24 | 25 | *, 26 | *::after, 27 | *::before { 28 | box-sizing: inherit; 29 | } 30 | 31 | * { 32 | -webkit-tap-highlight-color: transparent; 33 | 34 | ::selection { 35 | background: $primary-font-color; 36 | color: $white; 37 | text-shadow: none; 38 | } 39 | } 40 | 41 | strong { 42 | font-weight: bold; 43 | } 44 | 45 | em { 46 | font-style: italic; 47 | } 48 | 49 | img { 50 | display: block; 51 | max-width: 100%; 52 | } 53 | 54 | a { 55 | text-decoration: none; 56 | } 57 | 58 | blockquote, 59 | figure { 60 | margin: 0; 61 | } 62 | 63 | blockquote { 64 | .quote { 65 | quotes: '“' '”' '‘' '’'; 66 | 67 | &::before { 68 | content: open-quote; 69 | } 70 | 71 | &::after { 72 | content: close-quote; 73 | } 74 | } 75 | } 76 | 77 | table { 78 | padding: 0; 79 | } 80 | -------------------------------------------------------------------------------- /generator/template/src/scss/mixins/__font-sizes.scss: -------------------------------------------------------------------------------- 1 | @mixin text-small() { 2 | font-size: 1.2rem; 3 | line-height: 1.25; 4 | 5 | @include breakpoint($medium) { 6 | line-height: 1.375; 7 | } 8 | } 9 | 10 | @mixin text-medium() { 11 | font-size: 1.6rem; 12 | line-height: 1.25; 13 | 14 | @include breakpoint($medium) { 15 | line-height: 1.375; 16 | } 17 | } 18 | 19 | @mixin heading-small() { 20 | font-size: 1.8rem; 21 | line-height: 1.1; 22 | 23 | @include breakpoint($medium) { 24 | line-height: 1.22; 25 | } 26 | } 27 | 28 | @mixin heading-medium() { 29 | font-size: 2.2rem; 30 | line-height: 1.13636364; 31 | 32 | @include breakpoint($medium) { 33 | font-size: 2.4rem; 34 | line-height: 1.25; 35 | } 36 | 37 | @include breakpoint($x-large) { 38 | font-size: 2.8rem; 39 | } 40 | } 41 | 42 | @mixin heading-large() { 43 | font-size: 2.6rem; 44 | line-height: 1.15384615; 45 | 46 | @include breakpoint($medium) { 47 | font-size: 3.2rem; 48 | line-height: 1.25; 49 | } 50 | 51 | @include breakpoint($x-large) { 52 | font-size: 3.6rem; 53 | } 54 | } 55 | 56 | @mixin heading-x-large() { 57 | font-size: 3.2rem; 58 | line-height: 1.25; 59 | 60 | @include breakpoint($medium) { 61 | font-size: 4rem; 62 | } 63 | 64 | @include breakpoint($x-large) { 65 | font-size: 4.8rem; 66 | line-height: 1.05; 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /generator/template/src/scss/base/__form.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Reset default form styling for browser consistency 3 | */ 4 | [type='color'], 5 | [type='date'], 6 | [type='datetime'], 7 | [type='datetime-local'], 8 | [type='email'], 9 | [type='month'], 10 | [type='number'], 11 | [type='password'], 12 | [type='search'], 13 | [type='tel'], 14 | [type='text'], 15 | [type='time'], 16 | [type='url'], 17 | [type='week'], 18 | textarea, 19 | select { 20 | -moz-appearance: none; 21 | -webkit-appearance: none; 22 | border: 1px solid grey; 23 | border-radius: 0; 24 | box-shadow: none; 25 | max-width: 100%; 26 | 27 | &:focus { 28 | box-shadow: none; 29 | outline: 0; 30 | } 31 | } 32 | 33 | [type='button'], 34 | [type='reset'], 35 | [type='submit'], 36 | button { 37 | -moz-appearance: none; 38 | -webkit-appearance: none; 39 | border: 0; 40 | border-radius: 0; 41 | box-shadow: 0; 42 | background: #ccc; 43 | padding: .5rem; 44 | line-height: 1; 45 | cursor: pointer; 46 | } 47 | 48 | textarea { 49 | resize: none; 50 | width: 100%; 51 | } 52 | 53 | input:disabled, 54 | input[readonly], 55 | select:disabled, 56 | textarea:disabled, 57 | textarea[readonly] { 58 | cursor: default; 59 | } 60 | 61 | [type='checkbox'], 62 | [type='file'], 63 | [type='radio'] { 64 | margin: 0 0 1rem; 65 | } 66 | 67 | [type='checkbox'], 68 | [type='radio'] { 69 | display: inline-block; 70 | margin-right: 5px; 71 | vertical-align: baseline; 72 | } 73 | 74 | [type='checkbox'] + label, 75 | [type='radio'] + label { 76 | display: inline-block; 77 | margin: 0; 78 | vertical-align: middle; 79 | } 80 | 81 | [type='file'] { 82 | width: 100%; 83 | } 84 | 85 | fieldset { 86 | border: 0; 87 | margin: 0; 88 | padding: 0; 89 | } 90 | 91 | legend { 92 | margin-bottom: 0; 93 | max-width: 100%; 94 | } 95 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-cli-plugin-scss-base 2 | 3 | SCSS Base is an opinionated plugin that includes globally used SCSS files to your project. This includes CSS reset, mixins, variables, base styling, animation and utility classes. 4 | 5 | All the files are added under `src/scss` in your view project. 6 | 7 | The structure is as follows: 8 | 9 | * scss 10 | * animation 11 | * base 12 | * mixins 13 | * utilities 14 | * variables 15 | 16 | The main file `settings.scss` is automatically included in your project using the following config in your `vue.config.js` or the `"vue"` section of your `package.json`. This file includes all the variables and mixins. 17 | 18 | ``` 19 | vue: { 20 | css: { 21 | loaderOptions: { 22 | sass: { 23 | data: '@import "@/scss/settings.scss";' 24 | } 25 | } 26 | } 27 | } 28 | ``` 29 | 30 | All the basic CSS files such as reset, animation etc are added to App.vue with the line `@import '@/scss/base.scss';` 31 | 32 | Once you install this plugin you can immediately use your SCSS files such as variables and mixins within your project. 33 | 34 | ``` 35 | 40 | 41 | 48 | 49 | 55 | ``` 56 | 57 | ## Notes 58 | 59 | ### Using REM 60 | The plugin sets the `` font-size to `62.5%` and `` font-size to `1.6rem`. This enables you to use `rem` unit with easy math so `1rem` will equal to `10px`. You can still use `pixels` or `em` as you normally would. For more information on `rem` you can refer to [this article](https://www.sitepoint.com/understanding-and-using-rem-units-in-css/) 61 | 62 | 63 | ### Media Queries 64 | We recommend taking a mobile first approach in writing your media queries. That means to favour `min-width` over `max-width`. here is an [article](https://zellwk.com/blog/how-to-write-mobile-first-css/) on benefits of this approach. 65 | There's a useful mixin called `breakpoints` already included in this plugin which makes writing media queries less verbos. Here's an example: 66 | 67 | ``` 68 | 83 | ``` 84 | 85 | the above code is equivalent to this: 86 | 87 | ``` 88 | 101 | ``` 102 | 103 | ### Utility Classes 104 | 105 | Sometime you need share styling within your components and you don't want to repeat the the code. This where utility classes come in. You can write your own utility classes `scss/utilities` folder. Once you have include in the `scss/utilities/_utilities.scss` file and you can use it throughout your project. You can either use `@extend` or add it directly to your template 106 | 107 | 108 | ``` 109 | 119 | ``` 120 | or 121 | 122 | ``` 123 | 128 | ``` 129 | 130 | ## LICENSE 131 | [MIT](https://raw.githubusercontent.com/milad-alizadeh/vue-cli-plugin-scss-base/master/LICENSE) 132 | -------------------------------------------------------------------------------- /generator/template/src/scss/mixins/__helpers.scss: -------------------------------------------------------------------------------- 1 | // Media Queries 2 | @mixin breakpoint($min-width: null, $min-height: null, $medium: screen) { 3 | @if ($min-width != null and $min-height != null) { 4 | @media #{$medium} and (min-width: $min-width) and (min-height: $min-height) { 5 | @content; 6 | } 7 | } @else 8 | if ($min-width != null and $min-height == null) { 9 | @media #{$medium} and (min-width: $min-width) { 10 | @content; 11 | } 12 | } @else 13 | if ($min-width == null and $min-height != null) { 14 | @media #{$medium} and (min-height: $min-height) { 15 | @content; 16 | } 17 | } 18 | } 19 | 20 | // Creating triangles 21 | @mixin triangle ($size, $color, $direction) { 22 | height: 0; 23 | width: 0; 24 | $width: nth($size, 1); 25 | $height: nth($size, length($size)); 26 | $foreground-color: nth($color, 1); 27 | $background-color: if(length($color) == 2, nth($color, 2), transparent); 28 | @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) { 29 | $width: $width / 2; 30 | $height: if(length($size) > 1, $height, $height/2); 31 | @if $direction == up { 32 | border-bottom: $height solid $foreground-color; 33 | border-left: $width solid $background-color; 34 | border-right: $width solid $background-color; 35 | } @else 36 | if $direction == right { 37 | border-bottom: $width solid $background-color; 38 | border-left: $height solid $foreground-color; 39 | border-top: $width solid $background-color; 40 | } @else 41 | if $direction == down { 42 | border-left: $width solid $background-color; 43 | border-right: $width solid $background-color; 44 | border-top: $height solid $foreground-color; 45 | } @else 46 | if $direction == left { 47 | border-bottom: $width solid $background-color; 48 | border-right: $height solid $foreground-color; 49 | border-top: $width solid $background-color; 50 | } 51 | } @else 52 | if ($direction == up-right) or ($direction == up-left) { 53 | border-top: $height solid $foreground-color; 54 | @if $direction == up-right { 55 | border-left: $width solid $background-color; 56 | } @else 57 | if $direction == up-left { 58 | border-right: $width solid $background-color; 59 | } 60 | } @else 61 | if ($direction == down-right) or ($direction == down-left) { 62 | border-bottom: $height solid $foreground-color; 63 | @if $direction == down-right { 64 | border-left: $width solid $background-color; 65 | } @else 66 | if $direction == down-left { 67 | border-right: $width solid $background-color; 68 | } 69 | } @else 70 | if ($direction == inset-up) { 71 | border-color: $background-color $background-color $foreground-color; 72 | border-style: solid; 73 | border-width: $height $width; 74 | } @else 75 | if ($direction == inset-down) { 76 | border-color: $foreground-color $background-color $background-color; 77 | border-style: solid; 78 | border-width: $height $width; 79 | } @else 80 | if ($direction == inset-right) { 81 | border-color: $background-color $background-color $background-color $foreground-color; 82 | border-style: solid; 83 | border-width: $width $height; 84 | } @else 85 | if ($direction == inset-left) { 86 | border-color: $background-color $foreground-color $background-color $background-color; 87 | border-style: solid; 88 | border-width: $width $height; 89 | } 90 | } 91 | 92 | 93 | // Breakpoint-loop 94 | // @include breakpoint-loop(width, (($medium, 80%), ($large, 50%))); 95 | @mixin breakpoint-loop($element, $properties) { 96 | @each $property in $properties { 97 | $size: nth($property, 1); 98 | $value: nth($property, 2); 99 | 100 | @include breakpoint($size) { 101 | #{$element}: $value; 102 | } 103 | } 104 | } 105 | 106 | 107 | // Full stretching an item the size of it's parent. 108 | // Remmeber that the parent can't have the position: static. 109 | // otherwise this mixin won't work 110 | 111 | @mixin full-absolute() { 112 | position: absolute; 113 | width: 100%; 114 | height: 100%; 115 | left: 0; 116 | top: 0; 117 | }; 118 | --------------------------------------------------------------------------------