├── .editorconfig ├── .gitignore ├── .scss-lint ├── LICENSE ├── README.md ├── _sscss.scss ├── example ├── _core.scss ├── general │ └── _global.scss ├── settings │ ├── _breakpoints.scss │ ├── _core.scss │ ├── _dimensions.scss │ └── _fonts.scss └── styles.scss ├── package.json ├── src ├── generator │ ├── _dimensions.scss │ └── _fonts.scss └── mixins │ └── _mixins.scss └── sscss.png /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | index.html 2 | styles.css 3 | styles.css.map 4 | .sass-cache 5 | .DS_Store 6 | -------------------------------------------------------------------------------- /.scss-lint: -------------------------------------------------------------------------------- 1 | scss_files: "**/*.scss" 2 | 3 | linters: 4 | Comment: 5 | enablet: true, 6 | allowed: '^[/* ]*' 7 | 8 | HexLength: 9 | style: long 10 | 11 | Indentation: 12 | enabled: true 13 | allow_non_nested_indentation: false 14 | character: space 15 | width: 2 16 | 17 | NestingDepth: 18 | max_depth: 3 19 | 20 | PropertySortOrder: 21 | enabled: true 22 | order: ["content", "display", "position", "top", "right", "bottom", "left", "width", "min-width", "max-width", "height", "min-height", "max-height", "margin", "margin-top", "margin-right", "margin-bottom", "margin-left", "padding", "padding-top", "padding-right", "padding-bottom", "padding-left", "float", "clear", "columns", "column-gap", "column-fill", "column-rule", "column-span", "column-count", "column-width", "transform", "transition", "border", "border-top", "border-right", "border-bottom", "border-left", "border-width", "border-top-width", "border-right-width", "border-bottom-width", "border-left-width", "border-style", "border-top-style", "border-right-style", "border-bottom-style", "border-left-style", "border-radius", "border-top-left-radius", "border-top-right-radius", "border-bottom-left-radius", "border-bottom-right-radius", "border-color", "border-top-color", "border-right-color", "border-bottom-color", "border-left-color", "outline", "outline-color", "outline-offset", "outline-style", "outline-width", "background", "background-color", "background-image", "background-repeat", "background-position", "background-size", "color", "font", "font-family", "font-size", "font-smoothing", "font-style", "font-variant", "font-weight", "letter-spacing", "line-height", "list-style", "text-align", "text-decoration", "text-indent", "text-overflow", "text-rendering", "text-shadow", "text-transform", "text-wrap", "white-space", "word-spacing", "border-collapse", "border-spacing", "box-shadow", "caption-side", "cursor", "empty-cells", "opacity", "overflow", "quotes", "speak", "table-layout", "vertical-align", "visibility", "z-index"] 23 | ignore_unspecified: true 24 | min_properties: 2 25 | separate_groups: false 26 | 27 | SelectorFormat: 28 | convention: hyphenated_BEM -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Sebastian Musiał 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | SSCSS logo 4 | 5 |

6 |

7 | The light Sass library for managing your sizes and dimensions across breakpoints. 8 |

9 | 10 |

11 | @Articles:
12 | How to style modern applications in a simple way? 13 |

14 | 15 | ## Installation 16 | 17 | `npm i sscss` 18 | 19 | Create your own `_core.scss` file with imports: 20 | ``` 21 | @import 'your-own-variables-and-settings'; 22 | @import '~sscss/sscss'; 23 | ``` 24 | The file should be imported in all components where you will use Sass inheritances (@extend). 25 | 26 | ## Settings 27 | 28 | In the settings, you can use your own breakpoints in the `px` unit.
29 | The `interpolation` key (boolean) in the map is optional and allows overwriting your global settings. 30 | 31 | Example of breakpoints: 32 | 33 | ``` 34 | $mobile: 320px; 35 | $tablet: 768px; 36 | $desktop: 1024px; 37 | ``` 38 | 39 | Example of required settings: 40 | ``` 41 | $sscss-font-size: ( 42 | 'small': ($mobile: 12px, $tablet: 14px, $desktop: 16px, 'interpolation': true), 43 | 'medium': ($mobile: 14px, $tablet: 18px), 44 | 'big': ($mobile: 24px), 45 | ); 46 | 47 | $sscss-dimension: ( 48 | 'small': ($mobile: 4px, $tablet: 8px, $desktop: 16px, 'interpolation': true), 49 | 'medium': ($mobile: 8px, $desktop: 32px), 50 | 'big': ($mobile: 16px, $tablet: 32px, 'interpolation': false), 51 | ); 52 | ``` 53 | 54 | --- 55 | In the app you can use: 56 | 57 | * the `@extend` approach allows you avoid styles generated outside your components. 58 | * the `.class` approach allows you to generate small global utility classes. 59 | * the linear interpolation or standard breakpoint behaviors. 60 | 61 | Example of optional global settings: 62 | ``` 63 | $sscss-font-interpolation: false; 64 | $sscss-font-as-class: false; 65 | 66 | $sscss-dimension-interpolation: false; 67 | $sscss-dimension-as-class: false; 68 | ``` 69 | 70 | | Variable | Description | Default | 71 | | --- | --- | --- | 72 | | `$sscss-font-interpolation` | Settings for linear interpolation. | `false` | 73 | | `$sscss-font-as-class` | Settings for `.class` or `@extend` approach. | `false` | 74 | | `$sscss-dimension-interpolation` | Settings for linear interpolation. | `false` | 75 | | `$sscss-dimension-as-class` | Settings for `.class` or `@extend` approach. | `false` | 76 | 77 | ## Usage 78 | 79 |
Fonts 80 | 81 | Name is generated based on a `$sscss-font-size` variable. 82 | 83 | | Extensions | Class | 84 | | --- | --- | 85 | | `@extend %u-font-size--{name}` | `.u-font-size--{name}` | `.%u-font-size--{name}` | 86 |
87 | 88 |
Paddings 89 | 90 | Name is generated based on a `$sscss-dimension` variable. 91 | 92 | | Extension | Class | Description | 93 | | --- | --- | --- | 94 | | `@extend %u-padding--{name}` | `.u-padding--{name}` | Padding top, right, bottom, left | 95 | | `@extend %u-padding--top-{name}` | `.u-padding--top-{name}` | Padding top | 96 | | `@extend %u-padding--right-{name}` | `.u-padding--right-{name}` | Padding right | 97 | | `@extend %u-padding--bottom-{name}` | `.u-padding--bottom-{name}` | Padding bottom | 98 | | `@extend %u-padding--left-{name}` | `.u-padding--left-{name}` | Padding left | 99 | | `@extend %u-padding--v-{name}` | `.u-padding--v-{name}` | Padding top, bottom (vertical) | 100 | | `@extend %u-padding--h-{name}` | `.u-padding--h-{name}` | Padding right, left (horizontal) | 101 |
102 | 103 |
Margins 104 | 105 | Name is generated based on a `$sscss-dimension` variable. 106 | 107 | | Extension | Class | Description | 108 | | --- | --- | --- | 109 | | `@extend %u-margin--{name}` | `.u-margin--{name}` | Margin top, right, bottom, left | 110 | | `@extend %u-margin--top-{name}` | `.u-margin--top-{name}` | Margin top | 111 | | `@extend %u-margin--right-{name}` | `.u-margin--right-{name}` | Margin right | 112 | | `@extend %u-margin--bottom-{name}` | `.u-margin--bottom-{name}` | Margin bottom | 113 | | `@extend %u-margin--left-{name}` | `.u-margin--left-{name}` | Margin left | 114 | | `@extend %u-margin--v-{name}` | `.u-margin--v-{name}` | Margin top, bottom (vertical) | 115 | | `@extend %u-margin--h-{name}` | `.u-margin--h-{name}` | Margin right, left (horizontal) | 116 | | `@extend %u--margin--{name}` | `.u--margin--{name}` | Negative value of margin top, right, bottom, left | 117 | | `@extend %u--margin--top-{name}` | `.u--margin--top-{name}` | Negative value of margin top | 118 | | `@extend %u--margin--right-{name}` | `.u--margin--right-{name}` | Negative value of margin right | 119 | | `@extend %u--margin--bottom-{name}` | `.u--margin--bottom-{name}` | Negative value of margin bottom | 120 | | `@extend %u--margin--left-{name}` | `.u--margin--left-{name}` | Negative value of margin left | 121 | | `@extend %u--margin--v-{name}` | `.u--margin--v-{name}` | Negative value of margin top, bottom (vertical) | 122 | | `@extend %u--margin--h-{name}` | `.u--margin--h-{name}` | Negative value of margin right, left (horizontal) | 123 |
124 | 125 |
Positions 126 | 127 | Name is generated based on a `$sscss-dimension` variable. 128 | 129 | | Extension | Class | Description | 130 | | --- | --- | --- | 131 | | `@extend %u-position--{name}` | `.u-position--{name}` | Position top, right, bottom, left | 132 | | `@extend %u-position--top-{name}` | `.u-position--top-{name}` | Position top | 133 | | `@extend %u-position--right-{name}` | `.u-position--right-{name}` | Position right | 134 | | `@extend %u-position--bottom-{name}` | `.u-position--bottom-{name}` | Position bottom | 135 | | `@extend %u-position--left-{name}` | `.u-position--left-{name}` | Position left | 136 | | `@extend %u-position--v-{name}` | `.u-position--v-{name}` | Position top, bottom (vertical) | 137 | | `@extend %u-position--h-{name}` | `.u-position--h-{name}` | Position right, left (horizontal) | 138 | | `@extend %u--position--{name}` | `.u--position--{name}` | Negative value of position top, right, bottom, left | 139 | | `@extend %u--position--top-{name}` | `.u--position--top-{name}` | Negative value of position top | 140 | | `@extend %u--position--right-{name}` | `.u--position--right-{name}` | Negative value of position right | 141 | | `@extend %u--position--bottom-{name}` | `.u--position--bottom-{name}` | Negative value of position bottom | 142 | | `@extend %u--position--left-{name}` | `.u--position--left-{name}` | Negative value of position left | 143 | | `@extend %u--position--v-{name}` | `.u--position--v-{name}` | Negative value of position top, bottom (vertical) | 144 | | `@extend %u--position--h-{name}` | `.u--position--h-{name}` | Negative value of position right, left (horizontal) | 145 |
146 | 147 | ## Author 148 | 149 | 150 | 151 | 156 | 161 | 162 |
152 | 153 | 154 | 155 | 157 |

Sebastian Musiał

158 |

kontakt@sebastianmusial.pl

159 |

@sebamusial

160 |
163 | -------------------------------------------------------------------------------- /_sscss.scss: -------------------------------------------------------------------------------- 1 | @import 'src/mixins/mixins'; 2 | @import 'src/generator/fonts'; 3 | @import 'src/generator/dimensions'; 4 | -------------------------------------------------------------------------------- /example/_core.scss: -------------------------------------------------------------------------------- 1 | // This File should be imported in all components 2 | @import 'settings/core'; 3 | @import '../sscss'; 4 | -------------------------------------------------------------------------------- /example/general/_global.scss: -------------------------------------------------------------------------------- 1 | // Global styles 2 | // ------------------------------------------ 3 | body { 4 | // @extend %u-font-size--small; 5 | @extend %u-font--small; 6 | @extend %u-padding--small; 7 | } 8 | -------------------------------------------------------------------------------- /example/settings/_breakpoints.scss: -------------------------------------------------------------------------------- 1 | // Breakpoints 2 | // ------------------------------------------ 3 | // * device 4 | // * device-small 5 | // * device-medium 6 | // * device-big 7 | // ------------------------------------------ 8 | $mobile: 320px; 9 | $tablet: 768px; 10 | $desktop: 1024px; 11 | $full-hd: 1920px; 12 | 13 | // Breakpoints map 14 | // ------------------------------------------ 15 | $breakpoints: ( 16 | 'mobile': $mobile, 17 | 'tablet': $tablet, 18 | 'desktop': $desktop, 19 | 'full-hd': $full-hd, 20 | ); 21 | -------------------------------------------------------------------------------- /example/settings/_core.scss: -------------------------------------------------------------------------------- 1 | // Settings 2 | // ------------------------------------------ 3 | @import 'breakpoints'; 4 | @import 'dimensions'; 5 | @import 'fonts'; 6 | -------------------------------------------------------------------------------- /example/settings/_dimensions.scss: -------------------------------------------------------------------------------- 1 | // Dimensions 2 | // ------------------------------------------ 3 | $sscss-dimension: ( 4 | 'small': ($mobile: 4px, $tablet: 8px, $desktop: 16px, 'interpolation': true), 5 | 'medium': ($mobile: 8px, $desktop: 32px), 6 | 'big': ($mobile: 16px, $tablet: 32px, 'interpolation': true), 7 | ); 8 | 9 | // Optional global settings 10 | $sscss-dimension-interpolation: false; 11 | $sscss-dimension-as-class: false; 12 | -------------------------------------------------------------------------------- /example/settings/_fonts.scss: -------------------------------------------------------------------------------- 1 | // Fonts 2 | // ------------------------------------------ 3 | $sscss-font-size: ( 4 | 'small': ($mobile: 12px, $tablet: 14px, $desktop: 16px, 'interpolation': true), 5 | 'medium': ($mobile: 14px, $tablet: 18px), 6 | 'big': ($mobile: 24px), 7 | ); 8 | 9 | $sscss-font: ( 10 | 'small': ( 11 | $mobile: ( 12 | 'font-size': 7px, 13 | 'line-height': 7px, 14 | ), 15 | $tablet: ( 16 | 'font-size': 14px, 17 | ), 18 | $desktop: ( 19 | 'font-size': 28px, 20 | 'line-height': 28px, 21 | ), 22 | ), 23 | 'medium': ( 24 | $mobile: ( 25 | 'font-size': 16px, 26 | 'letter-spacing': 0.1em, 27 | 'line-height': 1.4, 28 | ), 29 | $tablet: ( 30 | 'font-size': 18px, 31 | 'letter-spacing': 0.15em, 32 | 'line-height': 2.4, 33 | ), 34 | ), 35 | 'big': ( 36 | $mobile: ( 37 | 'font-size': 25px, 38 | 'letter-spacing': 0.15em, 39 | 'line-height': 2.4, 40 | ), 41 | ), 42 | ); 43 | 44 | // Optional global settings 45 | $sscss-font-interpolation: false; 46 | $sscss-font-as-class: false; 47 | -------------------------------------------------------------------------------- /example/styles.scss: -------------------------------------------------------------------------------- 1 | // Settings 2 | // ------------------------------------------ 3 | @import 'core'; 4 | 5 | // General styles (imported in head) 6 | // ------------------------------------------ 7 | @import 'general/global'; 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sscss", 3 | "version": "0.1.2", 4 | "description": "Easy to manage tool for keeping global RWD settings in the projects.", 5 | "scripts": { 6 | "test": "sass --watch example/styles.scss:example/styles.css" 7 | }, 8 | "repository": { 9 | "type": "git", 10 | "url": "git+https://github.com/sebastianmusial/SSCSS.git" 11 | }, 12 | "keywords": [ 13 | "scss", 14 | "css", 15 | "sscss", 16 | "styleguide", 17 | "stylesheet", 18 | "scss-template", 19 | "scss-styles" 20 | ], 21 | "author": "Sebastian Musiał", 22 | "license": "MIT", 23 | "bugs": { 24 | "url": "https://github.com/sebastianmusial/SSCSS/issues" 25 | }, 26 | "homepage": "https://github.com/sebastianmusial/SSCSS#readme" 27 | } 28 | -------------------------------------------------------------------------------- /src/generator/_dimensions.scss: -------------------------------------------------------------------------------- 1 | // Dimenstions 2 | // -------------------------------------------- 3 | // * u-{extension}--{name} 4 | // * u--{extension}--{name} (@negation) 5 | // * v - vertical 6 | // * h - horizontal 7 | // -------------------------------------------- 8 | $sscss-dimension-positions: ( 9 | 'top': 'top', 10 | 'right': 'right', 11 | 'bottom': 'bottom', 12 | 'left': 'left', 13 | 'v': ('top', 'bottom'), 14 | 'h': ('right', 'left'), 15 | '': ('top', 'bottom', 'right', 'left'), 16 | ); 17 | 18 | $sscss-dimension-properties: ( 19 | 'margin': ( 20 | 'negation': true, 21 | 'modifiers': $sscss-dimension-positions, 22 | ), 23 | 'padding': ( 24 | 'negation': false, 25 | 'modifiers': $sscss-dimension-positions, 26 | ), 27 | 'position': ( 28 | 'negation': true, 29 | 'modifiers': $sscss-dimension-positions, 30 | ), 31 | ); 32 | 33 | @if variable-exists(sscss-dimension) { 34 | 35 | $interpolation: false; 36 | @if variable-exists(sscss-dimension-interpolation) { 37 | $interpolation: $sscss-dimension-interpolation; 38 | } 39 | 40 | $symbol: '%'; 41 | @if variable-exists(sscss-dimension-as-class) { 42 | @if $sscss-dimension-as-class { 43 | $symbol: '.'; 44 | } 45 | } 46 | 47 | @each $property, $settings in $sscss-dimension-properties { 48 | $is-negation: map-get($settings, 'negation'); 49 | $modifiers: map-get($settings, 'modifiers'); 50 | 51 | $negation-loop: (false); 52 | @if ($is-negation) { 53 | $negation-loop: (true, false); 54 | } 55 | 56 | @each $negation in $negation-loop { 57 | $prefix: 'u-'; 58 | @if ($negation) { $prefix: 'u--'; } 59 | 60 | @each $name, $value in $sscss-dimension { 61 | @if ($property != 'position') { 62 | #{$symbol}#{$prefix}#{$property}--#{$name} { 63 | @include scalable('#{$property}', $value, $interpolation, $negation); 64 | } 65 | } 66 | } 67 | 68 | @each $position-name, $positions in $modifiers { 69 | @each $name, $value in $sscss-dimension { 70 | @if ($property == 'position') { 71 | 72 | $modifier-sign: '-'; 73 | @if ($position-name != '') { 74 | $modifier-sign: '--' 75 | } 76 | 77 | #{$symbol}#{$prefix}#{$property}#{$modifier-sign}#{$position-name}-#{$name} { 78 | @each $position-value in $positions { 79 | $sign: get-sign($position-value); 80 | @include scalable('#{$position-value}', $value, $interpolation, $negation); 81 | } 82 | } 83 | } @else if($position-name != '') { 84 | #{$symbol}#{$prefix}#{$property}--#{$position-name}-#{$name} { 85 | @each $position-value in $positions { 86 | $sign: get-sign($position-value); 87 | @include scalable('#{$property}-#{$position-value}', $value, $interpolation, $negation); 88 | } 89 | } 90 | } 91 | } 92 | } 93 | 94 | } 95 | } 96 | 97 | } 98 | -------------------------------------------------------------------------------- /src/generator/_fonts.scss: -------------------------------------------------------------------------------- 1 | // Fonts 2 | // ------------------------------------------ 3 | // * u-font-size--{name} 4 | // ------------------------------------------ 5 | @if variable-exists(sscss-font-size) { 6 | 7 | $interpolation: false; 8 | @if variable-exists(sscss-font-interpolation) { 9 | $interpolation: $sscss-font-interpolation; 10 | } 11 | 12 | $symbol: '%'; 13 | @if variable-exists(sscss-font-as-class) { 14 | @if $sscss-font-as-class { 15 | $symbol: '.'; 16 | } 17 | } 18 | 19 | @each $name, $value in $sscss-font-size { 20 | #{$symbol}u-font-size--#{$name} { 21 | @if (type-of($value) == 'map') { 22 | @include scalable('font-size', $value, $interpolation); 23 | } @else { 24 | font-size: $value; 25 | } 26 | } 27 | } 28 | 29 | } 30 | 31 | // ------------------------------------------ 32 | // * u-font--{name} 33 | // ------------------------------------------ 34 | @if variable-exists(sscss-font) { 35 | $interpolation: false; 36 | @if variable-exists(sscss-font-interpolation) { 37 | $interpolation: $sscss-font-interpolation; 38 | } 39 | 40 | $symbol: '%'; 41 | @if variable-exists(sscss-font-as-class) { 42 | @if $sscss-font-as-class { 43 | $symbol: '.'; 44 | } 45 | } 46 | 47 | @each $name, $value in $sscss-font { 48 | #{$symbol}u-font--#{$name} { 49 | @include scalable('letter-spacing', $value, false, false, true); 50 | @include scalable('line-height', $value, false, false, true); 51 | @include scalable('font-size', $value, $interpolation, false, true); 52 | } 53 | } 54 | 55 | } 56 | -------------------------------------------------------------------------------- /src/mixins/_mixins.scss: -------------------------------------------------------------------------------- 1 | // Breakpoints 2 | // ------------------------------------------ 3 | @mixin min-screen($resolution) { 4 | @media screen and (min-width: $resolution) { 5 | @content; 6 | } 7 | } 8 | 9 | @mixin max-screen($resolution) { 10 | @media screen and (max-width: $resolution - 1) { 11 | @content; 12 | } 13 | } 14 | 15 | // Helpers 16 | // ------------------------------------------ 17 | @function get-sign($is-negation) { 18 | @if ($is-negation) { 19 | @return '-'; 20 | } 21 | 22 | @return '+'; 23 | } 24 | 25 | @function get-start-id($is-linear) { 26 | @if ($is-linear) { 27 | @return 1; 28 | } 29 | 30 | @return 2; 31 | } 32 | 33 | @mixin set-properties($properties, $map, $index, $sign, $is-multiple: false) { 34 | $keys: map-keys($map); 35 | 36 | @each $property in $properties { 37 | $value: map-get($map, nth($keys, $index)); 38 | @if not($is-multiple) { 39 | #{$property}: #{$sign}#{$value}; 40 | } @else { 41 | $single-value: map-get($value, $property); 42 | 43 | @if $single-value { 44 | #{$property}: #{$sign}#{$single-value}; 45 | } 46 | } 47 | } 48 | } 49 | 50 | 51 | @function get-scalabe-map($map) { 52 | $keys: map-keys($map); 53 | 54 | @if map_has_key($map, 'interpolation') { 55 | @return map-remove($map, 'interpolation'); 56 | } 57 | 58 | @return $map; 59 | } 60 | 61 | @function is-interpolation($map, $global-interpolation) { 62 | $keys: map-keys($map); 63 | 64 | @if map_has_key($map, 'interpolation') { 65 | @return map-get($map, 'interpolation'); 66 | } 67 | 68 | @return $global-interpolation; 69 | } 70 | 71 | 72 | // Scalable 73 | // ------------------------------------------ 74 | @mixin scalable($properties, $sscss-map, $global-interpolation: false, $is-negation: false, $is-multiple: false) { 75 | $map: get-scalabe-map($sscss-map); 76 | $keys: map-keys($map); 77 | $length: length($keys); 78 | $sign: get-sign($is-negation); 79 | $is-interpolation: is-interpolation($sscss-map, $global-interpolation); 80 | $start-id: get-start-id($is-interpolation); 81 | 82 | @include set-properties($properties, $map, 1, $sign, $is-multiple); 83 | 84 | @if ($length >= $start-id + 1) { 85 | @for $i from $start-id through ($length - 1) { 86 | $breakpointFrom: nth($keys, $i); 87 | $breakpointTo: nth($keys, ($i + 1)); 88 | 89 | $valueFrom: map-get($map, $breakpointFrom); 90 | $valueTo: map-get($map, $breakpointTo); 91 | 92 | @if ($is-multiple) { 93 | $valueFrom: map-get($map, $breakpointFrom); 94 | $valueTo: map-get($map, $breakpointTo); 95 | } 96 | 97 | @media (min-width: $breakpointFrom) { 98 | @if ($is-interpolation and $valueFrom != $valueTo) { 99 | @each $property in $properties { 100 | @if not($is-multiple) { 101 | $linear-map: ($breakpointFrom: $valueFrom, $breakpointTo: $valueTo); 102 | #{$property}: linear-interpolation($linear-map, $is-negation); 103 | } @else { 104 | @if ($global-interpolation) { 105 | $linear-map: ($breakpointFrom: map-get($valueFrom, $property), $breakpointTo: map-get($valueTo, $property)); 106 | #{$property}: linear-interpolation($linear-map, $is-negation); 107 | } @else { 108 | $single-value: map-get($valueFrom, $property); 109 | 110 | @if $single-value { 111 | #{$property}: #{$sign}#{$single-value}; 112 | } 113 | } 114 | } 115 | } 116 | } @else { 117 | @each $property in $properties { 118 | @if not($is-multiple) { 119 | #{$property}: #{$sign}#{$valueFrom}; 120 | } @else { 121 | $single-value: map-get($valueFrom, $property); 122 | 123 | @if $single-value { 124 | #{$property}: #{$sign}#{$single-value}; 125 | } 126 | } 127 | } 128 | } 129 | } 130 | } 131 | } 132 | 133 | @media (min-width: nth($keys, $length)) { 134 | @include set-properties($properties, $map, $length, $sign, $is-multiple); 135 | } 136 | } 137 | 138 | // Linear interpolation 139 | // ------------------------------------------ 140 | @function linear-interpolation($map, $is-negation: false) { 141 | $keys: map-keys($map); 142 | 143 | @if (length($keys) != 2) { 144 | @error 'linear-interpolation() $map must be exactly 2 values'; 145 | } 146 | 147 | $y1: map-get($map, nth($keys, 1)); 148 | $y2: map-get($map, nth($keys, 2)); 149 | $x1: nth($keys, 1); 150 | $x2: nth($keys, 2); 151 | 152 | $m: ($y2 - $y1) / ($x2 - $x1); 153 | $b: $y1 - $m * $x1; 154 | 155 | $sign: get-sign($is-negation); 156 | $negation-sign: get-sign($is-negation); 157 | 158 | @if ($b < 0) { 159 | $b: abs($b); 160 | $sign: '-'; 161 | } 162 | 163 | @return calc(#{$negation-sign}#{$m*100}vw #{$sign} #{$b}); 164 | } 165 | -------------------------------------------------------------------------------- /sscss.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebastianmusial/SSCSS/a38f04682687393aea471c30f41b697a23869348/sscss.png --------------------------------------------------------------------------------