Skip to content

Instantly share code, notes, and snippets.

@lee-chase

lee-chase/scss-snippets.json

Last active March 19, 2025 09:39
Show Gist options
  • Save lee-chase/cdd1a692c97704d05a1b15d7e44528fe to your computer and use it in GitHub Desktop.
Save lee-chase/cdd1a692c97704d05a1b15d7e44528fe to your computer and use it in GitHub Desktop.
Download ZIP
Carbon SCSS snippets for VSCode
Raw
scss-snippets.json
{
"Block class BEM": {
"prefix": "block-class",
"body": [
"$$block-class: \"${TM_FILENAME_BASE}\";",
"",
".#{$$block-class} {",
" // styles for $$block-class",
" $1",
"}",
""
],
},
"Sytlelint disable next line": {
"scope": "scss",
"prefix": "//",
"body": ["// stylelint-disable-next-line"]
},
"Sytlelint disable next line Carbon Layout": {
"scope": "scss",
"prefix": "//la",
"body": ["// stylelint-disable-next-line carbon/layout-token-use"]
},
"Sytlelint disable next line Carbon Motion Duration": {
"scope": "scss",
"prefix": "//mo",
"body": ["// stylelint-disable-next-line carbon/motion-duration-use"]
},
"Sytlelint disable next line Carbon Motion Duration": {
"scope": "scss",
"prefix": "//mod",
"body": ["// stylelint-disable-next-line carbon/motion-duration-use"]
},
"Sytlelint disable next line Carbon Motion Easing": {
"scope": "scss",
"prefix": "//moe",
"body": ["// stylelint-disable-next-line carbon/motion-easing-use"]
},
"Sytlelint disable next line Carbon Type": {
"scope": "scss",
"prefix": "//ty",
"body": ["// stylelint-disable-next-line carbon/type-token-use"]
},
"Sytlelint disable next line Carbon Theme": {
"scope": "scss",
"prefix": "//th",
"body": ["// stylelint-disable-next-line carbon/theme-token-use"]
},
"$spacing-01 (0.125rem 2px)": {
"scope": "scss",
"prefix": ["sp", "$sp", "spacing", "$spacing"],
"body": "$$spacing-01",
"description": "Carbon spacing token"
},
"$spacing-02 (0.25rem 4px)": {
"scope": "scss",
"prefix": ["sp", "$sp", "spacing", "$spacing"],
"body": "$$spacing-02",
"description": "Carbon spacing token"
},
"$spacing-03 (0.5rem 8px)": {
"scope": "scss",
"prefix": ["sp", "$sp", "spacing", "$spacing"],
"body": "$$spacing-03",
"description": "Carbon spacing token"
},
"$spacing-04 (0.75rem 12px)": {
"scope": "scss",
"prefix": ["sp", "$sp", "spacing", "$spacing"],
"body": "$$spacing-04",
"description": "Carbon spacing token"
},
"$spacing-05 (1rem 16px)": {
"scope": "scss",
"prefix": ["sp", "$sp", "spacing", "$spacing"],
"body": "$$spacing-05",
"description": "Carbon spacing token"
},
"$spacing-06 (1.5rem 24px)": {
"scope": "scss",
"prefix": ["sp", "$sp", "spacing", "$spacing"],
"body": "$$spacing-06",
"description": "Carbon spacing token"
},
"$spacing-07 (2rem 32px)": {
"scope": "scss",
"prefix": ["sp", "$sp", "spacing", "$spacing"],
"body": "$$spacing-07",
"description": "Carbon spacing token"
},
"$spacing-08 (2.5rem 40px)": {
"scope": "scss",
"prefix": ["sp", "$sp", "spacing", "$spacing"],
"body": "$$spacing-08",
"description": "Carbon spacing token"
},
"$spacing-09 (3rem 48px)": {
"scope": "scss",
"prefix": ["sp", "$sp", "spacing", "$spacing"],
"body": "$$spacing-09",
"description": "Carbon spacing token"
},
"$spacing-10 (4rem 64px)": {
"scope": "scss",
"prefix": ["sp", "$sp", "spacing", "$spacing"],
"body": "$$spacing-10",
"description": "Carbon spacing token"
},
"$spacing-11 (5rem 80px)": {
"scope": "scss",
"prefix": ["sp", "$sp", "spacing", "$spacing"],
"body": "$$spacing-11",
"description": "Carbon spacing token"
},
"$spacing-12 (6rem 96px)": {
"scope": "scss",
"prefix": ["sp", "$sp", "spacing", "$spacing"],
"body": "$$spacing-12",
"description": "Carbon spacing token"
},
"$spacing-13 (10rem 160px)": {
"scope": "scss",
"prefix": ["sp", "$sp", "spacing", "$spacing"],
"body": "$$spacing-13",
"description": "Carbon spacing token"
},
"$duration-fast-01 (70ms)": {
"scope": "scss",
"prefix": ["du", "$du", "duration", "$duration"],
"body": "$$duration-fast-01",
"description": "Carbon duration token"
},
"$duration-fast-02 (110ms)": {
"scope": "scss",
"prefix": ["du", "$du", "duration", "$duration"],
"body": "$$duration-fast-02",
"description": "Carbon duration token"
},
"$duration-moderate-01 (150ms)": {
"scope": "scss",
"prefix": ["du", "$du", "duration", "$duration"],
"body": "$$duration-moderate-01",
"description": "Carbon duration token"
},
"$duration-moderate-02 (240ms)": {
"scope": "scss",
"prefix": ["du", "$du", "duration", "$duration"],
"body": "$$duration-moderate-02",
"description": "Carbon duration token"
},
"$duration-slow-01 (400ms)": {
"scope": "scss",
"prefix": ["du", "$du", "duration", "$duration"],
"body": "$$duration-slow-01",
"description": "Carbon duration token"
},
"$duration-slow-02 (700ms)": {
"scope": "scss",
"prefix": ["du", "$du", "duration", "$duration"],
"body": "$$duration-slow-02",
"description": "Carbon duration token"
},
"@include motion('standard', 'productive')": {
"scope": "scss",
"prefix": ["mo", "motion"],
"body": "@include motion('standard', 'productive')",
"description": "Carbon duration token"
},
"@include motion('standard', 'expressive')": {
"scope": "scss",
"prefix": ["mo", "motion"],
"body": "@include motion('standard', 'expressive')",
"description": "Carbon duration token"
},
"@include motion('entrance', 'productive')": {
"scope": "scss",
"prefix": ["mo", "motion"],
"body": "@include motion('entrance', 'productive')",
"description": "Carbon duration token"
},
"@include motion('entrance', 'expressive')": {
"scope": "scss",
"prefix": ["mo", "motion"],
"body": "@include motion(entrance, 'expressive')",
"description": "Carbon duration token"
},
"@include motion('exit', 'productive')": {
"scope": "scss",
"prefix": ["mo", "motion"],
"body": "@include motion('exit', 'productive')",
"description": "Carbon duration token"
},
"@include motion('exit', 'expressive')": {
"scope": "scss",
"prefix": ["mo", "motion"],
"body": "@include motion('exit', 'expressive')",
"description": "Carbon duration token"
},
"@include type-scale('caption-01')": {
"scope": "scss",
"prefix": ["ty", "type"],
"body": "@include type-scale('caption-01')",
"description": "Carbon typography token"
},
"@include type-scale('caption-02')": {
"scope": "scss",
"prefix": ["ty", "type"],
"body": "@include type-scale('caption-02')",
"description": "Carbon typography token"
},
"@include type-scale('label-01')": {
"scope": "scss",
"prefix": ["ty", "type"],
"body": "@include type-scale('label-01')",
"description": "Carbon typography token"
},
"@include type-scale('label-02')": {
"scope": "scss",
"prefix": ["ty", "type"],
"body": "@include type-scale('label-02')",
"description": "Carbon typography token"
},
"@include type-scale('helper-text-01')": {
"scope": "scss",
"prefix": ["ty", "type"],
"body": "@include type-scale('helper-text-01')",
"description": "Carbon typography token"
},
"@include type-scale('helper-text-02')": {
"scope": "scss",
"prefix": ["ty", "type"],
"body": "@include type-scale('helper-text-02')",
"description": "Carbon typography token"
},
"@include type-scale('body-short-01')": {
"scope": "scss",
"prefix": ["ty", "type"],
"body": "@include type-scale('body-short-01')",
"description": "Carbon typography token"
},
"@include type-scale('body-long-01')": {
"scope": "scss",
"prefix": ["ty", "type"],
"body": "@include type-scale('body-long-01')",
"description": "Carbon typography token"
},
"@include type-scale('body-short-02')": {
"scope": "scss",
"prefix": ["ty", "type"],
"body": "@include type-scale('body-short-02')",
"description": "Carbon typography token"
},
"@include type-scale('body-long-02')": {
"scope": "scss",
"prefix": ["ty", "type"],
"body": "@include type-scale('body-long-02')",
"description": "Carbon typography token"
},
"@include type-scale('code-01')": {
"scope": "scss",
"prefix": ["ty", "type"],
"body": "@include type-scale('code-01')",
"description": "Carbon typography token"
},
"@include type-scale('code-02')": {
"scope": "scss",
"prefix": ["ty", "type"],
"body": "@include type-scale('code-02')",
"description": "Carbon typography token"
},
"@include type-scale('heading-01')": {
"scope": "scss",
"prefix": ["ty", "type"],
"body": "@include type-scale('heading-01')",
"description": "Carbon typography token"
},
"@include type-scale('productive-heading-01')": {
"scope": "scss",
"prefix": ["ty", "type"],
"body": "@include type-scale('productive-heading-01')",
"description": "Carbon typography token"
},
"@include type-scale('heading-02')": {
"scope": "scss",
"prefix": ["ty", "type"],
"body": "@include type-scale('heading-02')",
"description": "Carbon typography token"
},
"@include type-scale('productive-Heading-02')": {
"scope": "scss",
"prefix": ["ty", "type"],
"body": "@include type-scale('productive-Heading-02')",
"description": "Carbon typography token"
},
"@include type-scale('productive-heading-03')": {
"scope": "scss",
"prefix": ["ty", "type"],
"body": "@include type-scale('productive-heading-03')",
"description": "Carbon typography token"
},
"@include type-scale('productive-heading-04')": {
"scope": "scss",
"prefix": ["ty", "type"],
"body": "@include type-scale('productive-heading-04')",
"description": "Carbon typography token"
},
"@include type-scale('productive-heading-05')": {
"scope": "scss",
"prefix": ["ty", "type"],
"body": "@include type-scale('productive-heading-05')",
"description": "Carbon typography token"
},
"@include type-scale('productive-heading-06')": {
"scope": "scss",
"prefix": ["ty", "type"],
"body": "@include type-scale('productive-heading-06')",
"description": "Carbon typography token"
},
"@include type-scale('productive-heading-07')": {
"scope": "scss",
"prefix": ["ty", "type"],
"body": "@include type-scale('productive-heading-07')",
"description": "Carbon typography token"
},
"@include type-scale('expressive-heading-01')": {
"scope": "scss",
"prefix": ["ty", "type"],
"body": "@include type-scale('expressive-heading-01')",
"description": "Carbon typography token"
},
"@include type-scale('expressive-heading-02')": {
"scope": "scss",
"prefix": ["ty", "type"],
"body": "@include type-scale('expressive-heading-02')",
"description": "Carbon typography token"
},
"@include type-scale('expressive-heading-03')": {
"scope": "scss",
"prefix": ["ty", "type"],
"body": "@include type-scale('expressive-heading-03')",
"description": "Carbon typography token"
},
"@include type-scale('expressive-heading-04')": {
"scope": "scss",
"prefix": ["ty", "type"],
"body": "@include type-scale('expressive-heading-04')",
"description": "Carbon typography token"
},
"@include type-scale('expressive-heading-05')": {
"scope": "scss",
"prefix": ["ty", "type"],
"body": "@include type-scale('expressive-heading-05')",
"description": "Carbon typography token"
},
"@include type-scale('expressive-heading-06')": {
"scope": "scss",
"prefix": ["ty", "type"],
"body": "@include type-scale('expressive-heading-06')",
"description": "Carbon typography token"
},
"@include type-scale('expressive-paragraph-01')": {
"scope": "scss",
"prefix": ["ty", "type"],
"body": "@include type-scale('expressive-paragraph-01')",
"description": "Carbon typography token"
},
"@include type-scale('quotation-01')": {
"scope": "scss",
"prefix": ["ty", "type"],
"body": "@include type-scale('quotation-01')",
"description": "Carbon typography token"
},
"@include type-scale('quotation-02')": {
"scope": "scss",
"prefix": ["ty", "type"],
"body": "@include type-scale('quotation-02')",
"description": "Carbon typography token"
},
"@include type-scale('display-01')": {
"scope": "scss",
"prefix": ["ty", "type"],
"body": "@include type-scale('display-01')",
"description": "Carbon typography token"
},
"@include type-scale('display-02')": {
"scope": "scss",
"prefix": ["ty", "type"],
"body": "@include type-scale('display-02')",
"description": "Carbon typography token"
},
"@include type-scale('display-03')": {
"scope": "scss",
"prefix": ["ty", "type"],
"body": "@include type-scale('display-03')",
"description": "Carbon typography token"
},
"@include type-scale('display-04')": {
"scope": "scss",
"prefix": ["ty", "type"],
"body": "@include type-scale('display-04')",
"description": "Carbon typography token"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment