Created
December 7, 2014 13:27
-
-
Save csswizardry/6c6a35865259816a4c1d to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <section class="sub-content"> | |
| <p>Lorem ipsum dolor.</p> | |
| <div class="refactored-component"> | |
| Foo Bar Baz | |
| </div> | |
| <p>Lorem ipsum dolor.</p> | |
| </section> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // Sass (v3.4.7) | |
| // Compass (v1.0.1) | |
| // ---- | |
| %all-initial { | |
| animation-delay: 0s; | |
| animation-direction: normal; | |
| animation-duration: 0s; | |
| animation-fill-mode: none; | |
| animation-iteration-count: 1; | |
| animation-name: none; | |
| animation-play-state: running; | |
| animation-timing-function: ease; | |
| app-region: no-drag; | |
| appearance: none; | |
| backface-visibility: visible; | |
| background-clip: border-box; | |
| background-composite: source-over; | |
| background-origin: padding-box; | |
| background-size: auto; | |
| border-fit: border; | |
| border-horizontal-spacing: 0; | |
| border-image: none; | |
| border-vertical-spacing: 0; | |
| box-align: stretch; | |
| box-decoration-break: slice; | |
| box-direction: normal; | |
| box-flex: 0; | |
| box-flex-group: 1; | |
| box-lines: single; | |
| box-ordinal-group: 1; | |
| box-orient: horizontal; | |
| box-pack: start; | |
| box-reflect: none; | |
| box-shadow: none; | |
| clip-path: none; | |
| column-break-after: auto; | |
| column-break-before: auto; | |
| column-break-inside: auto; | |
| column-count: auto; | |
| column-gap: normal; | |
| column-rule-color: #000; | |
| column-rule-style: none; | |
| column-rule-width: 0; | |
| column-span: none; | |
| column-width: auto; | |
| filter: none; | |
| font-smoothing: auto; | |
| highlight: none; | |
| hyphenate-character: auto; | |
| line-box-contain: block inline replaced; | |
| line-break: auto; | |
| line-clamp: none; | |
| locale: auto; | |
| margin-after-collapse: collapse; | |
| margin-before-collapse: collapse; | |
| mask-box-image: none; | |
| mask-box-image-outset: 0; | |
| mask-box-image-repeat: stretch; | |
| mask-box-image-slice: 0 fill; | |
| mask-box-image-source: none; | |
| mask-box-image-width: auto; | |
| mask-clip: border-box; | |
| mask-composite: source-over; | |
| mask-image: none; | |
| mask-origin: border-box; | |
| mask-position: 0% 0%; | |
| mask-repeat: repeat; | |
| mask-size: auto; | |
| perspective: none; | |
| perspective-origin: 0 0; | |
| print-color-adjust: economy; | |
| rtl-ordering: logical; | |
| tap-highlight-color: rgba(0, 0, 0, 0.4); | |
| text-combine: none; | |
| text-decorations-in-effect: none; | |
| text-emphasis-color: #000; | |
| text-emphasis-position: over; | |
| text-emphasis-style: none; | |
| text-fill-color: #000; | |
| text-orientation: vertical-right; | |
| text-security: none; | |
| text-stroke-color: #000; | |
| text-stroke-width: 0; | |
| transform: none; | |
| transform-origin: 0 0; | |
| transform-style: flat; | |
| transition-delay: 0s; | |
| transition-duration: 0s; | |
| transition-property: all; | |
| transition-timing-function: ease; | |
| user-drag: auto; | |
| user-modify: read-only; | |
| user-select: text; | |
| writing-mode: horizontal-tb; | |
| align-content: stretch; | |
| align-items: start; | |
| align-self: start; | |
| alignment-baseline: auto; | |
| backface-visibility: visible; | |
| background-attachment: scroll; | |
| background-blend-mode: normal; | |
| background-clip: border-box; | |
| background-color: rgba(0, 0, 0, 0); | |
| background-image: none; | |
| background-origin: padding-box; | |
| background-position: 0% 0%; | |
| background-repeat: repeat; | |
| background-size: auto; | |
| baseline-shift: baseline; | |
| border-bottom-color: #000; | |
| border-bottom-left-radius: 0; | |
| border-bottom-right-radius: 0; | |
| border-bottom-style: none; | |
| border-bottom-width: 0; | |
| border-collapse: separate; | |
| border-image-outset: 0; | |
| border-image-repeat: stretch; | |
| border-image-slice: 100%; | |
| border-image-source: none; | |
| border-image-width: 1; | |
| border-left-color: #000; | |
| border-left-style: none; | |
| border-left-width: 0; | |
| border-right-color: #000; | |
| border-right-style: none; | |
| border-right-width: 0; | |
| border-top-color: #000; | |
| border-top-left-radius: 0; | |
| border-top-right-radius: 0; | |
| border-top-style: none; | |
| border-top-width: 0; | |
| bottom: auto; | |
| box-shadow: none; | |
| box-sizing: content-box; | |
| buffered-rendering: auto; | |
| caption-side: top; | |
| clear: none; | |
| clip: auto; | |
| clip-path: none; | |
| clip-rule: nonzero; | |
| color: #000; | |
| color-interpolation: srgb; | |
| color-interpolation-filters: linearrgb; | |
| color-rendering: auto; | |
| cursor: auto; | |
| direction: ltr; | |
| display: inline; | |
| dominant-baseline: auto; | |
| empty-cells: show; | |
| fill: #000; | |
| fill-opacity: 1; | |
| fill-rule: nonzero; | |
| filter: none; | |
| flex-basis: auto; | |
| flex-direction: row; | |
| flex-grow: 0; | |
| flex-shrink: 1; | |
| flex-wrap: nowrap; | |
| float: none; | |
| flood-color: #000; | |
| flood-opacity: 1; | |
| font-family: Times; | |
| font-kerning: auto; | |
| font-size: 16px; | |
| font-stretch: normal; | |
| font-style: normal; | |
| font-variant: normal; | |
| font-variant-ligatures: normal; | |
| font-weight: normal; | |
| glyph-orientation-horizontal: 0deg; | |
| glyph-orientation-vertical: auto; | |
| height: auto; | |
| image-rendering: auto; | |
| justify-content: flex-start; | |
| left: auto; | |
| letter-spacing: normal; | |
| lighting-color: rgb(255, 255, 255); | |
| line-height: normal; | |
| list-style-image: none; | |
| list-style-position: outside; | |
| list-style-type: disc; | |
| margin-bottom: 0; | |
| margin-left: 0; | |
| margin-right: 0; | |
| margin-top: 0; | |
| marker-end: none; | |
| marker-mid: none; | |
| marker-start: none; | |
| mask: none; | |
| mask-type: luminance; | |
| max-height: none; | |
| max-width: none; | |
| min-height: 0; | |
| min-width: 0; | |
| object-fit: fill; | |
| object-position: 50% 50%; | |
| opacity: 1; | |
| order: 0; | |
| orphans: auto; | |
| outline-color: #000; | |
| outline-offset: 0; | |
| outline-style: none; | |
| outline-width: 0; | |
| overflow-wrap: normal; | |
| overflow-x: visible; | |
| overflow-y: visible; | |
| padding-bottom: 0; | |
| padding-left: 0; | |
| padding-right: 0; | |
| padding-top: 0; | |
| page-break-after: auto; | |
| page-break-before: auto; | |
| page-break-inside: auto; | |
| paint-order: fill stroke markers; | |
| perspective: none; | |
| perspective-origin: 0 0; | |
| pointer-events: auto; | |
| position: static; | |
| resize: none; | |
| right: auto; | |
| shape-image-threshold: 0; | |
| shape-margin: 0; | |
| shape-outside: none; | |
| shape-rendering: auto; | |
| speak: normal; | |
| stop-color: #000; | |
| stop-opacity: 1; | |
| stroke: none; | |
| stroke-dasharray: none; | |
| stroke-dashoffset: 0; | |
| stroke-linecap: butt; | |
| stroke-linejoin: miter; | |
| stroke-miterlimit: 4; | |
| stroke-opacity: 1; | |
| stroke-width: 1; | |
| tab-size: 8; | |
| table-layout: auto; | |
| text-align: start; | |
| text-anchor: start; | |
| text-decoration: none; | |
| text-indent: 0; | |
| text-overflow: clip; | |
| text-rendering: auto; | |
| text-shadow: none; | |
| text-transform: none; | |
| top: auto; | |
| touch-action: auto; | |
| transform: none; | |
| transform-origin: 0 0; | |
| transform-style: flat; | |
| transition-delay: 0s; | |
| transition-duration: 0s; | |
| transition-property: all; | |
| transition-timing-function: ease; | |
| unicode-bidi: normal; | |
| vector-effect: none; | |
| vertical-align: baseline; | |
| visibility: visible; | |
| white-space: normal; | |
| widows: auto; | |
| width: auto; | |
| will-change: auto; | |
| word-break: normal; | |
| word-spacing: 0; | |
| word-wrap: normal; | |
| writing-mode: lr-tb; | |
| z-index: auto; | |
| zoom: 1; | |
| } | |
| body { | |
| font: 16px/1.5 Georgia, serif; | |
| } | |
| .sub-content { | |
| font-weight: bold; | |
| text-align: center; | |
| } | |
| .refactored-component { | |
| @extend %all-initial; | |
| font-size: 12px; | |
| line-height: 1.5; | |
| font-family: sans-serif; | |
| color: red; | |
| display: block; | |
| padding: 18px; | |
| background-color: #ffc; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .refactored-component { | |
| animation-delay: 0s; | |
| animation-direction: normal; | |
| animation-duration: 0s; | |
| animation-fill-mode: none; | |
| animation-iteration-count: 1; | |
| animation-name: none; | |
| animation-play-state: running; | |
| animation-timing-function: ease; | |
| app-region: no-drag; | |
| appearance: none; | |
| backface-visibility: visible; | |
| background-clip: border-box; | |
| background-composite: source-over; | |
| background-origin: padding-box; | |
| background-size: auto; | |
| border-fit: border; | |
| border-horizontal-spacing: 0; | |
| border-image: none; | |
| border-vertical-spacing: 0; | |
| box-align: stretch; | |
| box-decoration-break: slice; | |
| box-direction: normal; | |
| box-flex: 0; | |
| box-flex-group: 1; | |
| box-lines: single; | |
| box-ordinal-group: 1; | |
| box-orient: horizontal; | |
| box-pack: start; | |
| box-reflect: none; | |
| box-shadow: none; | |
| clip-path: none; | |
| column-break-after: auto; | |
| column-break-before: auto; | |
| column-break-inside: auto; | |
| column-count: auto; | |
| column-gap: normal; | |
| column-rule-color: #000; | |
| column-rule-style: none; | |
| column-rule-width: 0; | |
| column-span: none; | |
| column-width: auto; | |
| filter: none; | |
| font-smoothing: auto; | |
| highlight: none; | |
| hyphenate-character: auto; | |
| line-box-contain: block inline replaced; | |
| line-break: auto; | |
| line-clamp: none; | |
| locale: auto; | |
| margin-after-collapse: collapse; | |
| margin-before-collapse: collapse; | |
| mask-box-image: none; | |
| mask-box-image-outset: 0; | |
| mask-box-image-repeat: stretch; | |
| mask-box-image-slice: 0 fill; | |
| mask-box-image-source: none; | |
| mask-box-image-width: auto; | |
| mask-clip: border-box; | |
| mask-composite: source-over; | |
| mask-image: none; | |
| mask-origin: border-box; | |
| mask-position: 0% 0%; | |
| mask-repeat: repeat; | |
| mask-size: auto; | |
| perspective: none; | |
| perspective-origin: 0 0; | |
| print-color-adjust: economy; | |
| rtl-ordering: logical; | |
| tap-highlight-color: rgba(0, 0, 0, 0.4); | |
| text-combine: none; | |
| text-decorations-in-effect: none; | |
| text-emphasis-color: #000; | |
| text-emphasis-position: over; | |
| text-emphasis-style: none; | |
| text-fill-color: #000; | |
| text-orientation: vertical-right; | |
| text-security: none; | |
| text-stroke-color: #000; | |
| text-stroke-width: 0; | |
| transform: none; | |
| transform-origin: 0 0; | |
| transform-style: flat; | |
| transition-delay: 0s; | |
| transition-duration: 0s; | |
| transition-property: all; | |
| transition-timing-function: ease; | |
| user-drag: auto; | |
| user-modify: read-only; | |
| user-select: text; | |
| writing-mode: horizontal-tb; | |
| align-content: stretch; | |
| align-items: start; | |
| align-self: start; | |
| alignment-baseline: auto; | |
| backface-visibility: visible; | |
| background-attachment: scroll; | |
| background-blend-mode: normal; | |
| background-clip: border-box; | |
| background-color: transparent; | |
| background-image: none; | |
| background-origin: padding-box; | |
| background-position: 0% 0%; | |
| background-repeat: repeat; | |
| background-size: auto; | |
| baseline-shift: baseline; | |
| border-bottom-color: #000; | |
| border-bottom-left-radius: 0; | |
| border-bottom-right-radius: 0; | |
| border-bottom-style: none; | |
| border-bottom-width: 0; | |
| border-collapse: separate; | |
| border-image-outset: 0; | |
| border-image-repeat: stretch; | |
| border-image-slice: 100%; | |
| border-image-source: none; | |
| border-image-width: 1; | |
| border-left-color: #000; | |
| border-left-style: none; | |
| border-left-width: 0; | |
| border-right-color: #000; | |
| border-right-style: none; | |
| border-right-width: 0; | |
| border-top-color: #000; | |
| border-top-left-radius: 0; | |
| border-top-right-radius: 0; | |
| border-top-style: none; | |
| border-top-width: 0; | |
| bottom: auto; | |
| box-shadow: none; | |
| box-sizing: content-box; | |
| buffered-rendering: auto; | |
| caption-side: top; | |
| clear: none; | |
| clip: auto; | |
| clip-path: none; | |
| clip-rule: nonzero; | |
| color: #000; | |
| color-interpolation: srgb; | |
| color-interpolation-filters: linearrgb; | |
| color-rendering: auto; | |
| cursor: auto; | |
| direction: ltr; | |
| display: inline; | |
| dominant-baseline: auto; | |
| empty-cells: show; | |
| fill: #000; | |
| fill-opacity: 1; | |
| fill-rule: nonzero; | |
| filter: none; | |
| flex-basis: auto; | |
| flex-direction: row; | |
| flex-grow: 0; | |
| flex-shrink: 1; | |
| flex-wrap: nowrap; | |
| float: none; | |
| flood-color: #000; | |
| flood-opacity: 1; | |
| font-family: Times; | |
| font-kerning: auto; | |
| font-size: 16px; | |
| font-stretch: normal; | |
| font-style: normal; | |
| font-variant: normal; | |
| font-variant-ligatures: normal; | |
| font-weight: normal; | |
| glyph-orientation-horizontal: 0deg; | |
| glyph-orientation-vertical: auto; | |
| height: auto; | |
| image-rendering: auto; | |
| justify-content: flex-start; | |
| left: auto; | |
| letter-spacing: normal; | |
| lighting-color: white; | |
| line-height: normal; | |
| list-style-image: none; | |
| list-style-position: outside; | |
| list-style-type: disc; | |
| margin-bottom: 0; | |
| margin-left: 0; | |
| margin-right: 0; | |
| margin-top: 0; | |
| marker-end: none; | |
| marker-mid: none; | |
| marker-start: none; | |
| mask: none; | |
| mask-type: luminance; | |
| max-height: none; | |
| max-width: none; | |
| min-height: 0; | |
| min-width: 0; | |
| object-fit: fill; | |
| object-position: 50% 50%; | |
| opacity: 1; | |
| order: 0; | |
| orphans: auto; | |
| outline-color: #000; | |
| outline-offset: 0; | |
| outline-style: none; | |
| outline-width: 0; | |
| overflow-wrap: normal; | |
| overflow-x: visible; | |
| overflow-y: visible; | |
| padding-bottom: 0; | |
| padding-left: 0; | |
| padding-right: 0; | |
| padding-top: 0; | |
| page-break-after: auto; | |
| page-break-before: auto; | |
| page-break-inside: auto; | |
| paint-order: fill stroke markers; | |
| perspective: none; | |
| perspective-origin: 0 0; | |
| pointer-events: auto; | |
| position: static; | |
| resize: none; | |
| right: auto; | |
| shape-image-threshold: 0; | |
| shape-margin: 0; | |
| shape-outside: none; | |
| shape-rendering: auto; | |
| speak: normal; | |
| stop-color: #000; | |
| stop-opacity: 1; | |
| stroke: none; | |
| stroke-dasharray: none; | |
| stroke-dashoffset: 0; | |
| stroke-linecap: butt; | |
| stroke-linejoin: miter; | |
| stroke-miterlimit: 4; | |
| stroke-opacity: 1; | |
| stroke-width: 1; | |
| tab-size: 8; | |
| table-layout: auto; | |
| text-align: start; | |
| text-anchor: start; | |
| text-decoration: none; | |
| text-indent: 0; | |
| text-overflow: clip; | |
| text-rendering: auto; | |
| text-shadow: none; | |
| text-transform: none; | |
| top: auto; | |
| touch-action: auto; | |
| transform: none; | |
| transform-origin: 0 0; | |
| transform-style: flat; | |
| transition-delay: 0s; | |
| transition-duration: 0s; | |
| transition-property: all; | |
| transition-timing-function: ease; | |
| unicode-bidi: normal; | |
| vector-effect: none; | |
| vertical-align: baseline; | |
| visibility: visible; | |
| white-space: normal; | |
| widows: auto; | |
| width: auto; | |
| will-change: auto; | |
| word-break: normal; | |
| word-spacing: 0; | |
| word-wrap: normal; | |
| writing-mode: lr-tb; | |
| z-index: auto; | |
| zoom: 1; | |
| } | |
| body { | |
| font: 16px/1.5 Georgia, serif; | |
| } | |
| .sub-content { | |
| font-weight: bold; | |
| text-align: center; | |
| } | |
| .refactored-component { | |
| font-size: 12px; | |
| line-height: 1.5; | |
| font-family: sans-serif; | |
| color: red; | |
| display: block; | |
| padding: 18px; | |
| background-color: #ffc; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <section class="sub-content"> | |
| <p>Lorem ipsum dolor.</p> | |
| <div class="refactored-component"> | |
| Foo Bar Baz | |
| </div> | |
| <p>Lorem ipsum dolor.</p> | |
| </section> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment