Sass
Result
Skip Results Iframe
EDIT ON
Live
This Pen is owned by
Salsita
on
CodePen
.
See more by @salsita on CodePen
External CSS
https://raw.githubusercontent.com/salsita/inStyle/codepen-debug/src/instyle.sass
External JavaScript
https://rawgit.com/salsita/inStyle/codepen-debug/src/inStyleDebugger.js
{"__browser":{"device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer; ambient-light-sensor; camera; display-capture; encrypted-media; geolocation; gyroscope; microphone; midi; payment; web-share; vr","iframe_sandbox":"allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads allow-presentation"},"__graphql":{"data":{"data":null,"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}]},"url":"https://codepen.io/graphql","api":"cprails","cpedata":{"action":"show","controller":"embed"}},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__boomboom":{"serve_url":"https://cdpn.io/cpe/boomboom","store_url":"https://codepen.io/cpe/boomboom/store"},"__pageType":"embed","__item":"{\"editor_settings\":{\"auto_run\":false,\"autocomplete\":false,\"code_folding\":true,\"css_pre_processor\":\"none\",\"css_prefix\":\"neither\",\"css_starter\":\"neither\",\"emmet_active\":true,\"font_size\":\"14\",\"font_type\":\"system\",\"format_on_save\":false,\"html_pre_processor\":\"none\",\"indent_with\":\"spaces\",\"js_pre_processor\":\"none\",\"key_bindings\":\"normal\",\"line_numbers\":true,\"line_wrapping\":true,\"match_brackets\":true,\"snippets\":{\"markupSnippets\":{},\"stylesheetSnippets\":{}},\"tab_size\":\"2\",\"theme\":\"twilight\",\"id\":\"zqbpzY\",\"auto_save\":true},\"hashid\":\"zqbpzY\",\"itemType\":\"pen\",\"resources\":[{\"url\":\"https://raw.githubusercontent.com/salsita/inStyle/codepen-debug/src/instyle.sass\",\"order\":0,\"resource_type\":\"css\",\"par_content\":\"/*\\n inStyle (v1.6.1)\\n github.com/salsita/inStyle\\n 2016 | MIT\\n ============================== */\\n\\n// Configuration\\n$__inTagAppend: '<' !default\\n$__inTagInsert: '^' !default\\n$__inTagReplace: '@' !default\\n\\n// String helpers\\n@function __trimString($string)\\n $index: str-index($string, ' ')\\n @if $index == 1\\n @return __trimString(str-slice($string, $index + 1, -1))\\n @else if $index == str-length($string)\\n @return __trimString(str-slice($string, 1, $index - 1))\\n @return $string\\n\\n@function __stringToList($string, $delimiter: ',', $separator: comma)\\n $list: ()\\n $sum: str-length($string)\\n @for $i from 1 through $sum\\n $str: str-index($string, $delimiter)\\n @if str-length($string) >= 1 and $str == null\\n $list: append($list, unquote(__trimString($string)), $separator)\\n $string: ''\\n @if type-of($str) == number\\n $each: str-slice($string, 0, ($str - 1))\\n $list: append($list, unquote(__trimString($each)), $separator)\\n $string: str-slice($string, ($str + 1), $sum)\\n @return $list\\n\\n// List helpers\\n@function __insertInList($list, $index, $value)\\n $result: null\\n @if $index > length($list)\\n @warn \\\"List index is #{$index} but list is only #{length($list)} items long for __insertInList().\\\"\\n @else\\n $result: ()\\n @for $i from 1 through length($list)\\n @if $i == $index\\n $result: append($result, $value)\\n $result: append($result, nth($list, $i))\\n @return $result\\n\\n@function __removeFromList($list, $value, $recursive: false)\\n $result: ()\\n @for $i from 1 through length($list)\\n @if type-of(nth($list, $i)) == list and $recursive\\n $result: append($result, remove(nth($list, $i), $value, $recursive))\\n @else if nth($list, $i) != $value\\n $result: append($result, nth($list, $i))\\n @return $result\\n\\n@function __reverseList($list, $recursive: false)\\n $result: ()\\n @for $i from length($list)*-1 through -1\\n @if type-of(nth($list, abs($i))) == list and $recursive\\n $result: append($result, __reverseList(nth($list, abs($i)), $recursive))\\n @else\\n $result: append($result, nth($list, abs($i)))\\n @return $result\\n\\n@function __listToString($list, $glue: '', $is-nested: false)\\n $result: null\\n @for $i from 1 through length($list)\\n $e: nth($list, $i)\\n @if type-of($e) == list\\n $result: unquote(\\\"#{$result}#{to-string($e, $glue, true)}\\\")\\n @else\\n $result: if($i != length($list) or $is-nested, unquote(\\\"#{$result}#{$e}#{$glue}\\\"), unquote(\\\"#{$result}#{$e}\\\"))\\n @return $result\\n\\n@function __removeDuplicatesFromList($list, $recursive: false, $separator: comma)\\n $result: ()\\n @each $item in $list\\n @if not index($result, $item)\\n @if length($item) > 1 and $recursive\\n $result: append($result, __removeDuplicatesFromList($item, $recursive), $separator)\\n @else\\n $result: append($result, $item, $separator)\\n @return $result\\n\\n// Custom helpers\\n@function __tagIndex($string, $tag)\\n $index: 0\\n @if str-index($string, $tag) == 1\\n $index: 1\\n $sum: str-length($string)\\n @for $i from 2 through $sum\\n @if str-slice($string, $i, $i) == $tag\\n $index: $index + 1\\n @else\\n @return $index\\n @return $index\\n\\n@function __getDepthMap($selector, $current)\\n $depthMap: ()\\n @each $parent in $current\\n // Save maximum length of matched compound to compare relevancy\\n $parentIndex: index($current, $parent)\\n $depthMap: append($depthMap, 0, comma)\\n @each $compound in $selector\\n // Check only for specific compound\\n @if max(__tagIndex($compound, $__inTagInsert), __tagIndex($compound, $__inTagAppend), __tagIndex($compound, $__inTagReplace)) == 0\\n $simple: simple-selectors($compound)\\n // Test all matches starting with full compound and reducing for each step\\n @for $i from 1 through length($simple)\\n @if $i > 1\\n $simple: __removeFromList($simple, nth($simple, length($simple)))\\n @if index($parent, __listToString($simple)) and length($simple) > nth($depthMap, $parentIndex)\\n // Relevancy scoring\\n $depthIndex: index(__reverseList($parent), __listToString($simple)) + (length($simple) / 1000)\\n $depthMap: set-nth($depthMap, $parentIndex, $depthIndex)\\n @return $depthMap\\n\\n// In mixin\\n=in($selectors)\\n $final: ()\\n $current: &\\n $selectors: __stringToList($selectors)\\n $startIndex: 1 // Start indexing above current element\\n $checkDupes: false\\n\\n @each $selector in $selectors\\n // Trim all extra empty spaces\\n $selector: __removeFromList(__stringToList($selector, ' ', space), '')\\n // Render only best matching parents in multiselectors\\n $depthMap: if(length($current) == 1, 0, __getDepthMap($selector, $current))\\n @for $n from 1 through length($current)\\n @if nth($depthMap, $n) == max($depthMap...)\\n $parent: nth($current, $n)\\n $newParent: __reverseList($parent)\\n $insertQueue: () // Save insertions to process later\\n\\n // Process modifications RTL\\n @each $compound in __reverseList($selector)\\n $appendIndex: __tagIndex($compound, $__inTagAppend)\\n $insertIndex: __tagIndex($compound, $__inTagInsert)\\n $replaceIndex: __tagIndex($compound, $__inTagReplace)\\n $changeIndex: max($appendIndex, $insertIndex, $replaceIndex) + $startIndex\\n\\n // OUT_OF_BOUNDS check\\n @if $changeIndex > length($parent)\\n @error 'OUT_OF_BOUNDS: \\\\'#{$compound}\\\\' modification outside of \\\\'#{$parent} {}\\\\' (#{$changeIndex} vs #{length($parent)}).'\\n\\n @if $insertIndex > 0\\n // Add to insertion queue\\n $insertQueue: append($insertQueue, $compound)\\n\\n @else if $replaceIndex > 0\\n // Replace\\n $validatedCompound: __listToString(simple-selectors(str-slice($compound, $replaceIndex + 1)))\\n $newParent: set-nth($newParent, $startIndex + $replaceIndex, $validatedCompound)\\n $checkDupes: true\\n\\n @else if $appendIndex > 0\\n // Append with tag\\n $validatedCompound: nth($newParent, $startIndex + $appendIndex) + __listToString(simple-selectors(str-slice($compound, $appendIndex + 1)))\\n $newParent: set-nth($newParent, $startIndex + $appendIndex, $validatedCompound)\\n\\n @else\\n // Append with selector\\n $simple: simple-selectors($compound)\\n $state: ()\\n $matched: false\\n // Loop compound variants\\n @for $i from 1 through length($simple)\\n @if $i > 1\\n $state: join(nth($simple, length($simple)), $state)\\n $simple: __removeFromList($simple, nth($simple, length($simple)))\\n $trySimple: __listToString($simple)\\n $tryState: if($i > 1, __listToString($state), '')\\n // Match base to reversed parent list\\n @for $n from ($startIndex + 1) through length($newParent)\\n @if $n <= length($newParent) and $trySimple == nth($newParent, $n)\\n // Append to matched parent selector\\n $matched: true\\n $newParent: set-nth($newParent, $n, unquote($trySimple + $tryState))\\n @if not $matched\\n @error 'OUT_OF_BOUNDS: \\\\'#{nth($simple, 1)}\\\\' not found in \\\\'#{$parent}\\\\'.'\\n\\n // Process insertion queue\\n @if length($insertQueue) > 0\\n $insertIndexes: ()\\n @each $insert in $insertQueue\\n $insertIndex: __tagIndex($insert, $__inTagInsert)\\n $validatedCompound: __listToString(simple-selectors(str-slice($insert, $insertIndex + 1)))\\n // Find how many previous inserts were lower than current\\n $addIndex: 0\\n @each $index in $insertIndexes\\n @if $insertIndex >= $index\\n $addIndex: $addIndex + 1\\n $insertIndexes: append($insertIndexes, $insertIndex)\\n // Insert in selector\\n $newIndex: $startIndex + $insertIndex + $addIndex\\n $newParent: __insertInList($newParent, $newIndex, $validatedCompound)\\n\\n // Save modified selectors\\n $final: append($final, __reverseList($newParent), comma)\\n\\n // Remove possible duplicates from multiselector replacement\\n $final: if(length($final) > 1 and $checkDupes, __removeDuplicatesFromList($final), $final)\\n // Render final selectors\\n @at-root #{$final}\\n codepen: debug\\n @content\\n\"},{\"url\":\"https://rawgit.com/salsita/inStyle/codepen-debug/src/inStyleDebugger.js\",\"order\":0,\"resource_type\":\"js\",\"par_content\":\"\"}],\"tags\":[\"sass\",\"instyle\"],\"id\":8140705,\"user_id\":579289,\"html\":\"\",\"css\":\"div\\n display: flex\\n\\n span\\n color: red\\n \\n +in('@.foo ^.bar')\\n color: green\\n \\n +in('.foo.baz')\\n color: pink\\n \\n section\\n display: run-in\\n \\n +in('<.nice')\\n color: gold\",\"parent\":0,\"js\":\"\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"sass\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"css_prefix_free\":null,\"css_external\":null,\"js_library\":null,\"js_modernizr\":null,\"js_external\":null,\"created_at\":\"2016-05-11T13:45:31.000Z\",\"updated_at\":\"2016-06-07T16:36:53.000Z\",\"session_hash\":\"f193618edda14a7d217a622817367699\",\"title\":\"inStyle Crash Test Dummy\",\"description\":\"Test the inStyle SASS library!\",\"slug_hash\":\"zqbpzY\",\"head\":\"\",\"private\":false,\"has_animation\":false,\"css_pre_processor_lib\":\"\",\"checksum\":2409931390,\"screenshot_uuid\":\"34193bfb-3dd6-4e2e-b69d-b4f9a22ff17f\",\"team_id\":0,\"css_prefix\":\"autoprefixer\",\"template\":true,\"js_module\":null,\"deleted_by_user_id\":null,\"hard_delete_at\":null,\"parent_id\":0,\"pen_hash\":null}","__jwt":"eyJhbGciOiJIUzI1NiJ9.eyJjbGFpbXMiOnsidXNlcl9pZCI6MX0sImV4cCI6MTY2NDQzMzk4M30.7qVBRK-_HUJsa4bCRBzKozF_nipb30NpPIL_q3wOEYo","__processorsMap":{"autoprefixer":"autoprefixer-10","babel":"babel-7","coffeescript":"coffeescript-2","format-1":"format-1","flutter":"flutter-1","haml":"haml-4","less":"less-3","lint-1":"lint-1","livescript":"livescript-1","markdown":"markdown-11","postcss":"postcss-7","pug":"pug-2","sass":"sass-1","scss":"sass-1","sass-ruby-3":"sass-ruby-3","sass-ruby-compass-3":"sass-ruby-compass-3","slim":"slim-3","stylus":"stylus-0","typescript":"typescript-4","vue":"vue-2","vue3":"vue-3"},"__favicon_mask_icon":"https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg","__favicon_shortcut_icon":"https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico","__path_to_iframe_console_runner":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-7549a40147ccd0ba0a6b5373d87e770e49bb4689f1c2dc30cccc7463f207f997.js","__path_to_iframe_refresh_css":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-5e03f34e38152f20eb79c96b0b89c2d99c5085e9ae9386dc71e2f0b3c30bf513.js","__path_to_iframe_runtime_errors":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js","__path_to_processor_worker":"https://cpwebassets.codepen.io/assets/packs/router.js","__path_to_stop_execution_on_timeout":"https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js","__pen_normalize_css_url":"https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css","__pen_prefix_free_url":"https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js","__pen_reset_css_url":"https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"}
