CSS, SCSS, and Less support in Visual Studio Code

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="awa-expId" content="vscw_aaflight1016_treatment:103440;" /> <meta name="awa-env" content="prod" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="google-site-verification" content="hNs7DXrTySP_X-0P_AC0WulAXvUwgSXEmgfcO2r79dw" />  <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@code" /> <meta name="description" content="Find out how Visual Studio Code can support your CSS, SCSS and Less development." /> <meta name="keywords" content="" /> <meta name="ms.prod" content="vs-code" /> <meta name="ms.TOCTitle" content="CSS, SCSS and Less" /> <meta name="ms.ContentId" content="039882CB-B5C4-46BD-A8D5-DB24A5E82706" /> <meta name="ms.date" content="10/29/2024" /> <meta name="ms.topic" content="conceptual" />  <meta name="twitter:card" content="summary_large_image" /> <meta property="og:url" content="https://code.visualstudio.com/docs/languages/css" /> <meta property="og:type" content="article" /> <meta property="og:title" content="CSS, SCSS, and Less support in Visual Studio Code" /> <meta property="og:description" content="Find out how Visual Studio Code can support your CSS, SCSS and Less development." /> <meta property="og:image" content="https://code.visualstudio.com/opengraphimg/opengraph-docs.png" /> <link rel="shortcut icon" href="/favicon.ico" sizes="128x128" /> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <title>CSS, SCSS, and Less support in Visual Studio Code</title> <link rel="stylesheet" href="/vendor/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="/dist/v2/style.css"> <script src="https://consentdeliveryfd.azurefd.net/mscc/lib/v2/wcp-consent.js"></script> <script type="text/javascript" src="https://js.monitor.azure.com/scripts/c/ms.analytics-web-4.min.js"></script> <script type="text/javascript"> // Leave as var; siteConsent is initialized and referenced elsewhere. var siteConsent = null; const GPC_DataSharingOptIn = false; WcpConsent.onInitCallback(function () { window.appInsights = new oneDS.ApplicationInsights(); window.appInsights.initialize({ instrumentationKey: "1a3eb3104447440391ad5f2a6ee06a0a-62879566-bc58-4741-9650-302bf2af703f-7103", propertyConfiguration: { userConsented: false, gpcDataSharingOptIn: false, callback: { userConsentDetails: siteConsent ? siteConsent.getConsent : undefined }, }, cookieCfg: { ignoreCookies: ["MSCC"] }, webAnalyticsConfiguration:{ // Web Analytics Plugin configuration urlCollectQuery: true, urlCollectHash: true, autoCapture: { scroll: true, pageView: true, onLoad: true, onUnload: true, click: true, resize: true, jsError: true } } }, []); window.appInsights.getPropertyManager().getPropertiesContext().web.gpcDataSharingOptIn = GPC_DataSharingOptIn; }); </script> <link rel="alternate" type="application/atom+xml" title="RSS Feed for code.visualstudio.com" href="/feed.xml" /> </head> <body >  <script> function setTheme(themeName) { if (themeName === 'dark') { document.documentElement.removeAttribute('data-theme'); // dark is default, so no data-theme attribute needed } if (themeName === 'light') { document.documentElement.setAttribute('data-theme', themeName); } return; } // Determine initial theme: user preference or system preference let theme = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'); setTheme(theme); // Apply the initial theme // Listen for changes in the system theme preference window.matchMedia('(prefers-color-scheme: dark)').addListener(e => { if (!localStorage.getItem('theme')) { // Only if no user preference is saved setTheme(e.matches ? 'dark' : 'light'); } }); </script> <div id="main"> <div class="navbar-fixed-container"> <div class="navbar navbar-inverse navbar-fixed-top " data-spy="affix" data-offset-top="1"> <div id='cookie-banner'></div> <nav role="navigation" aria-label="Top Level"> <div class="container"> <div class="nav navbar-header"> <a class="navbar-brand" href="/">Visual Studio Code</a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" aria-label="Expand and Collapse Menu"> </button> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-left"> <li class="active" ><a id="nav-docs" href="/docs">Docs</a></li> <li ><a id="nav-updates" href="/updates">Updates</a></li> <li ><a id="nav-blogs" href="/blogs">Blog</a></li> <li ><a id="nav-extend" href="/api">API</a></li> <li><a href="https://marketplace.visualstudio.com/VSCode" target="_blank" rel="noopener" id="nav-extensions">Extensions</a></li> <li ><a id="nav-faqs" href="/docs/supporting/faq">FAQ</a></li> <li class='search visible-xs visible-sm' ><a href="/Search">Search</a></li> <li ><a id="nav-copilot" href="/docs/copilot/overview">GitHub Copilot</a></li> </ul> </ul> <ul class="nav navbar-nav navbar-right" role="presentation"> <li> <button type="button" class="theme-switch" id="theme-toggle"> <img class="theme-icon-light" src="/assets/icons/theme-light.svg" alt="Switch to the dark theme" /> <img class="theme-icon-dark" src="/assets/icons/theme-dark.svg" alt="Switch to the light theme" /> </button> </li> <li> <a href="/Search" title="Search" class="btn search-btn" id="nav-search"> <img class="search-icon-light" src="/assets/icons/search.svg" width="16px" height="16px" alt="Search" /> <img class="search-icon-dark" src="/assets/icons/search-dark.svg" width="16px" height="16px" alt="Search" /> </a> </li> <li class="search" role="presentation"> <form class="nav-search search-form" role="search" aria-label="Search"> <div class="input-group" role="presentation"> <input type="text" name="q" class="search-box form-control" placeholder="Search Docs" aria-label="Search text"/> <button tabindex="0" class="btn" type="submit" aria-label="Search"> <img class="search-icon-dark" src="/assets/icons/search-dark.svg" alt="Search" /> <img class="search-icon-light" src="/assets/icons/search.svg" alt="Search" /> </button> </div> </form> </li>  <li><a class="link-button" href="/Download" id="nav-download"> Download</a></li> </ul> </div> </div> </nav> </div> </div> <div class="updates-banner "> <div class="container"> <a href="/updates" id="banner-link-updates">Version 1.95</a> is now available! Read about the new features and fixes from October. </div> <div tabindex="0" role="button" title="Dismiss this update" class="dismiss-btn" id="banner-dismiss-btn">Dismiss this update</div> </div>   <div id="main-content"> <script> function closeReportIssue() { var element = document.getElementById('surveypopup'); element.parentElement.removeChild(element); } function reportIssue(tutorial, page) { var div = document.createElement('div'); div.innerHTML = '<div id="surveypopup" class="overlay visible"><div class="surveypopup"><div id="surveytitle">Tell us more<a href="javascript:void(0)" onclick="closeReportIssue()">X</a></div><div id="surveydiv"><iframe frameBorder="0" scrolling="0" src="https://www.research.net/r/PWZWZ52?tutorial=' + tutorial + '&step=' + page + '"></iframe></div></div></div>'; document.body.appendChild(div.children[0]); } </script> <div class="container body-content docs"> <div class="row">  <div class="col-xs-12 col-md-2 docs-navbar-container"> <nav id="docs-navbar" aria-label="Topics" class="docs-nav visible-md visible-lg"> <ul class="nav" id="main-nav"> <li > <a class="docs-home" href="/docs" >Overview</a> </li> <li class="panel collapsed"> <a class="area" role="button" href="#setup-articles" data-parent="#main-nav" data-toggle="collapse">Setup</a> <ul id="setup-articles" class="collapse "> <li > <a href="/docs/setup/setup-overview" >Overview</a> </li> <li > <a href="/docs/setup/linux" >Linux</a> </li> <li > <a href="/docs/setup/mac" >macOS</a> </li> <li > <a href="/docs/setup/windows" >Windows</a> </li> <li > <a href="/docs/setup/raspberry-pi" >Raspberry Pi</a> </li> <li > <a href="/docs/setup/network" >Network</a> </li> <li > <a href="/docs/setup/additional-components" >Additional Components</a> </li> <li > <a href="/docs/setup/enterprise" >Enterprise</a> </li> <li > <a href="/docs/setup/uninstall" >Uninstall</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#getstarted-articles" data-parent="#main-nav" data-toggle="collapse">Get Started</a> <ul id="getstarted-articles" class="collapse "> <li > <a href="/docs/getstarted/getting-started" >Tutorial</a> </li> <li > <a href="/docs/getstarted/introvideos" >Intro Videos</a> </li> <li > <a href="/docs/getstarted/tips-and-tricks" >Tips and Tricks</a> </li> <li > <a href="/docs/getstarted/userinterface" >User Interface</a> </li> <li > <a href="/docs/getstarted/themes" >Themes</a> </li> <li > <a href="/docs/getstarted/settings" >Settings</a> </li> <li > <a href="/docs/getstarted/keybindings" >Key Bindings</a> </li> <li > <a href="/docs/getstarted/locales" >Display Language</a> </li> <li > <a href="/docs/getstarted/telemetry" >Telemetry</a> </li> <li > <a href="/docs/getstarted/educators-and-students" >Educators & Students</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#editor-articles" data-parent="#main-nav" data-toggle="collapse">User Guide</a> <ul id="editor-articles" class="collapse "> <li > <a href="/docs/editor/codebasics" >Basic Editing</a> </li> <li > <a href="/docs/editor/extension-marketplace" >Extension Marketplace</a> </li> <li > <a href="/docs/editor/intellisense" >IntelliSense</a> </li> <li > <a href="/docs/editor/editingevolved" >Code Navigation</a> </li> <li > <a href="/docs/editor/refactoring" >Refactoring</a> </li> <li > <a href="/docs/editor/debugging" >Debugging</a> </li> <li > <a href="/docs/editor/testing" >Testing</a> </li> <li > <a href="/docs/editor/vscode-web" >VS Code for the Web</a> </li> <li > <a href="/docs/editor/tasks" >Tasks</a> </li> <li > <a href="/docs/editor/profiles" >Profiles</a> </li> <li > <a href="/docs/editor/settings-sync" >Settings Sync</a> </li> <li > <a href="/docs/editor/userdefinedsnippets" >Snippets</a> </li> <li > <a href="/docs/editor/emmet" >Emmet</a> </li> <li > <a href="/docs/editor/command-line" >Command Line Interface</a> </li> <li > <a href="/docs/editor/workspaces" >Workspaces</a> </li> <li > <a href="/docs/editor/workspace-trust" >Workspace Trust</a> </li> <li > <a href="/docs/editor/multi-root-workspaces" >Multi-root Workspaces</a> </li> <li > <a href="/docs/editor/accessibility" >Accessibility</a> </li> <li > <a href="/docs/editor/voice" >Voice Interactions</a> </li> <li > <a href="/docs/editor/custom-layout" >Custom Layout</a> </li> <li > <a href="/docs/editor/port-forwarding" >Port Forwarding</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#sourcecontrol-articles" data-parent="#main-nav" data-toggle="collapse">Source Control</a> <ul id="sourcecontrol-articles" class="collapse "> <li > <a href="/docs/sourcecontrol/overview" >Overview</a> </li> <li > <a href="/docs/sourcecontrol/intro-to-git" >Introduction to Git</a> </li> <li > <a href="/docs/sourcecontrol/github" >Collaborate on GitHub</a> </li> <li > <a href="/docs/sourcecontrol/faq" >FAQ</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#terminal-articles" data-parent="#main-nav" data-toggle="collapse">Terminal</a> <ul id="terminal-articles" class="collapse "> <li > <a href="/docs/terminal/getting-started" >Getting Started Tutorial</a> </li> <li > <a href="/docs/terminal/basics" >Terminal Basics</a> </li> <li > <a href="/docs/terminal/profiles" >Terminal Profiles</a> </li> <li > <a href="/docs/terminal/shell-integration" >Shell Integration</a> </li> <li > <a href="/docs/terminal/appearance" >Appearance</a> </li> <li > <a href="/docs/terminal/advanced" >Advanced</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#copilot-articles" data-parent="#main-nav" data-toggle="collapse">GitHub Copilot</a> <ul id="copilot-articles" class="collapse "> <li > <a href="/docs/copilot/overview" >Overview</a> </li> <li > <a href="/docs/copilot/copilot-vscode-features" >Copilot Cheat Sheet</a> </li> <li > <a href="/docs/copilot/setup" >Setup</a> </li> <li > <a href="/docs/copilot/getting-started" >Quickstart</a> </li> <li > <a href="/docs/copilot/ai-powered-suggestions" >Code Completions</a> </li> <li > <a href="/docs/copilot/copilot-chat" >Copilot Chat</a> </li> <li > <a href="/docs/copilot/getting-started-chat" >Copilot Chat Tutorial</a> </li> <li > <a href="/docs/copilot/copilot-edits" >Copilot Edits</a> </li> <li > <a href="/docs/copilot/prompt-crafting" >Best Practices</a> </li> <li > <a href="/docs/copilot/workspace-context" >Workspace Context</a> </li> <li > <a href="/docs/copilot/copilot-customization" >Customizing Copilot</a> </li> <li > <a href="/docs/copilot/copilot-extensibility-overview" >Copilot Extensibility</a> </li> <li > <a href="/docs/copilot/copilot-settings" >Settings Reference</a> </li> <li > <a href="/docs/copilot/faq" >FAQ</a> </li> </ul> </li> <li class="panel active expanded"> <a class="area" role="button" href="#languages-articles" data-parent="#main-nav" data-toggle="collapse">Languages</a> <ul id="languages-articles" class="collapse in"> <li > <a href="/docs/languages/overview" >Overview</a> </li> <li > <a href="/docs/languages/javascript" >JavaScript</a> </li> <li > <a href="/docs/languages/json" >JSON</a> </li> <li > <a href="/docs/languages/html" >HTML</a> </li> <li class="active"> <a href="/docs/languages/css" aria-label="Current Page: CSS, SCSS and Less">CSS, SCSS and Less</a> </li> <li > <a href="/docs/languages/typescript" >TypeScript</a> </li> <li > <a href="/docs/languages/markdown" >Markdown</a> </li> <li > <a href="/docs/languages/powershell" >PowerShell</a> </li> <li > <a href="/docs/languages/cpp" >C++</a> </li> <li > <a href="/docs/languages/java" >Java</a> </li> <li > <a href="/docs/languages/php" >PHP</a> </li> <li > <a href="/docs/languages/python" >Python</a> </li> <li > <a href="/docs/languages/julia" >Julia</a> </li> <li > <a href="/docs/languages/r" >R</a> </li> <li > <a href="/docs/languages/ruby" >Ruby</a> </li> <li > <a href="/docs/languages/rust" >Rust</a> </li> <li > <a href="/docs/languages/go" >Go</a> </li> <li > <a href="/docs/languages/tsql" >T-SQL</a> </li> <li > <a href="/docs/languages/csharp" >C#</a> </li> <li > <a href="/docs/languages/dotnet" >.NET</a> </li> <li > <a href="/docs/languages/polyglot" >Polyglot</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#nodejs-articles" data-parent="#main-nav" data-toggle="collapse">Node.js / JavaScript</a> <ul id="nodejs-articles" class="collapse "> <li > <a href="/docs/nodejs/working-with-javascript" >Working with JavaScript</a> </li> <li > <a href="/docs/nodejs/nodejs-tutorial" >Node.js Tutorial</a> </li> <li > <a href="/docs/nodejs/nodejs-debugging" >Node.js Debugging</a> </li> <li > <a href="/docs/nodejs/nodejs-deployment" >Deploy Node.js Apps</a> </li> <li > <a href="/docs/nodejs/browser-debugging" >Browser Debugging</a> </li> <li > <a href="/docs/nodejs/angular-tutorial" >Angular Tutorial</a> </li> <li > <a href="/docs/nodejs/reactjs-tutorial" >React Tutorial</a> </li> <li > <a href="/docs/nodejs/vuejs-tutorial" >Vue Tutorial</a> </li> <li > <a href="/docs/nodejs/debugging-recipes" >Debugging Recipes</a> </li> <li > <a href="/docs/nodejs/profiling" >Performance Profiling</a> </li> <li > <a href="/docs/nodejs/extensions" >Extensions</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#typescript-articles" data-parent="#main-nav" data-toggle="collapse">TypeScript</a> <ul id="typescript-articles" class="collapse "> <li > <a href="/docs/typescript/typescript-tutorial" >Tutorial</a> </li> <li > <a href="/docs/typescript/typescript-compiling" >Compiling</a> </li> <li > <a href="/docs/typescript/typescript-editing" >Editing</a> </li> <li > <a href="/docs/typescript/typescript-refactoring" >Refactoring</a> </li> <li > <a href="/docs/typescript/typescript-debugging" >Debugging</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#python-articles" data-parent="#main-nav" data-toggle="collapse">Python</a> <ul id="python-articles" class="collapse "> <li > <a href="/docs/python/python-quick-start" >Quick Start</a> </li> <li > <a href="/docs/python/python-tutorial" >Tutorial</a> </li> <li > <a href="/docs/python/run" >Run Python Code</a> </li> <li > <a href="/docs/python/editing" >Editing Code</a> </li> <li > <a href="/docs/python/linting" >Linting</a> </li> <li > <a href="/docs/python/formatting" >Formatting</a> </li> <li > <a href="/docs/python/debugging" >Debugging</a> </li> <li > <a href="/docs/python/environments" >Environments</a> </li> <li > <a href="/docs/python/testing" >Testing</a> </li> <li > <a href="/docs/python/jupyter-support-py" >Python Interactive</a> </li> <li > <a href="/docs/python/tutorial-django" >Django Tutorial</a> </li> <li > <a href="/docs/python/tutorial-fastapi" >FastAPI Tutorial</a> </li> <li > <a href="/docs/python/tutorial-flask" >Flask Tutorial</a> </li> <li > <a href="/docs/python/tutorial-create-containers" >Create containers</a> </li> <li > <a href="/docs/python/python-on-azure" >Deploy Python Apps</a> </li> <li > <a href="/docs/python/python-web" >Python in the Web</a> </li> <li > <a href="/docs/python/settings-reference" >Settings Reference</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#java-articles" data-parent="#main-nav" data-toggle="collapse">Java</a> <ul id="java-articles" class="collapse "> <li > <a href="/docs/java/java-tutorial" >Getting Started</a> </li> <li > <a href="/docs/java/java-editing" >Navigate and Edit</a> </li> <li > <a href="/docs/java/java-refactoring" >Refactoring</a> </li> <li > <a href="/docs/java/java-linting" >Formatting and Linting</a> </li> <li > <a href="/docs/java/java-project" >Project Management</a> </li> <li > <a href="/docs/java/java-build" >Build Tools</a> </li> <li > <a href="/docs/java/java-debugging" >Run and Debug</a> </li> <li > <a href="/docs/java/java-testing" >Testing</a> </li> <li > <a href="/docs/java/java-spring-boot" >Spring Boot</a> </li> <li > <a href="/docs/java/java-tomcat-jetty" >Application Servers</a> </li> <li > <a href="/docs/java/java-on-azure" >Deploy Java Apps</a> </li> <li > <a href="/docs/java/java-gui" >GUI Applications</a> </li> <li > <a href="/docs/java/extensions" >Extensions</a> </li> <li > <a href="/docs/java/java-faq" >FAQ</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#cpp-articles" data-parent="#main-nav" data-toggle="collapse">C++</a> <ul id="cpp-articles" class="collapse "> <li > <a href="/docs/cpp/introvideos-cpp" >Intro Videos</a> </li> <li > <a href="/docs/cpp/config-linux" >GCC on Linux</a> </li> <li > <a href="/docs/cpp/config-mingw" >GCC on Windows</a> </li> <li > <a href="/docs/cpp/config-wsl" >GCC on Windows Subsystem for Linux</a> </li> <li > <a href="/docs/cpp/config-clang-mac" >Clang on macOS</a> </li> <li > <a href="/docs/cpp/config-msvc" >Microsoft C++ on Windows</a> </li> <li > <a href="/docs/cpp/build-with-cmake" >Build with CMake</a> </li> <li > <a href="/docs/cpp/cmake-linux" >CMake Tools on Linux</a> </li> <li > <a href="/docs/cpp/cmake-quickstart" >CMake Quick Start</a> </li> <li > <a href="/docs/cpp/cpp-ide" >Editing and Navigating</a> </li> <li > <a href="/docs/cpp/cpp-debug" >Debugging</a> </li> <li > <a href="/docs/cpp/cpp-refactoring" >Refactoring</a> </li> <li > <a href="/docs/cpp/launch-json-reference" >Configure debugging</a> </li> <li > <a href="/docs/cpp/customize-default-settings-cpp" >Settings</a> </li> <li > <a href="/docs/cpp/configure-intellisense" >Configure IntelliSense</a> </li> <li > <a href="/docs/cpp/configure-intellisense-crosscompilation" >Configure IntelliSense for cross-compiling</a> </li> <li > <a href="/docs/cpp/faq-cpp" >FAQ</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#csharp-articles" data-parent="#main-nav" data-toggle="collapse">C#</a> <ul id="csharp-articles" class="collapse "> <li > <a href="/docs/csharp/introvideos-csharp" >Intro Videos</a> </li> <li > <a href="/docs/csharp/get-started" >Get Started</a> </li> <li > <a href="/docs/csharp/navigate-edit" >Navigate and Edit</a> </li> <li > <a href="/docs/csharp/intellicode" >IntelliCode</a> </li> <li > <a href="/docs/csharp/refactoring" >Refactoring</a> </li> <li > <a href="/docs/csharp/formatting-linting" >Formatting and Linting</a> </li> <li > <a href="/docs/csharp/project-management" >Project Management</a> </li> <li > <a href="/docs/csharp/build-tools" >Build Tools</a> </li> <li > <a href="/docs/csharp/package-management" >Package Management</a> </li> <li > <a href="/docs/csharp/debugging" >Run and Debug</a> </li> <li > <a href="/docs/csharp/testing" >Testing</a> </li> <li > <a href="/docs/csharp/cs-dev-kit-faq" >FAQ</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#containers-articles" data-parent="#main-nav" data-toggle="collapse">Docker</a> <ul id="containers-articles" class="collapse "> <li > <a href="/docs/containers/overview" >Overview</a> </li> <li > <a href="/docs/containers/quickstart-node" >Node.js</a> </li> <li > <a href="/docs/containers/quickstart-python" >Python</a> </li> <li > <a href="/docs/containers/quickstart-aspnet-core" >ASP.NET Core</a> </li> <li > <a href="/docs/containers/debug-common" >Debug</a> </li> <li > <a href="/docs/containers/docker-compose" >Docker Compose</a> </li> <li > <a href="/docs/containers/quickstart-container-registries" >Registries</a> </li> <li > <a href="/docs/containers/app-service" >Deploy to Azure</a> </li> <li > <a href="/docs/containers/choosing-dev-environment" >Choose a dev environment</a> </li> <li > <a href="/docs/containers/reference" >Customize</a> </li> <li > <a href="/docs/containers/bridge-to-kubernetes" >Develop with Kubernetes</a> </li> <li > <a href="/docs/containers/troubleshooting" >Tips and Tricks</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#datascience-articles" data-parent="#main-nav" data-toggle="collapse">Data Science</a> <ul id="datascience-articles" class="collapse "> <li > <a href="/docs/datascience/overview" >Overview</a> </li> <li > <a href="/docs/datascience/jupyter-notebooks" >Jupyter Notebooks</a> </li> <li > <a href="/docs/datascience/data-science-tutorial" >Data Science Tutorial</a> </li> <li > <a href="/docs/datascience/python-interactive" >Python Interactive</a> </li> <li > <a href="/docs/datascience/data-wrangler-quick-start" >Data Wrangler Quick Start</a> </li> <li > <a href="/docs/datascience/data-wrangler" >Data Wrangler</a> </li> <li > <a href="/docs/datascience/pytorch-support" >PyTorch Support</a> </li> <li > <a href="/docs/datascience/azure-machine-learning" >Azure Machine Learning</a> </li> <li > <a href="/docs/datascience/jupyter-kernel-management" >Manage Jupyter Kernels</a> </li> <li > <a href="/docs/datascience/notebooks-web" >Jupyter Notebooks on the web</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#azure-articles" data-parent="#main-nav" data-toggle="collapse">Azure</a> <ul id="azure-articles" class="collapse "> <li > <a href="/docs/azure/overview" >Overview</a> </li> <li > <a href="/docs/azure/gettingstarted" >Getting Started</a> </li> <li > <a href="/docs/azure/deployment" >Deployment</a> </li> <li > <a href="/docs/azure/docker" >Docker</a> </li> <li > <a href="/docs/azure/aksextensions" >Azure Kubernetes Service</a> </li> <li > <a href="/docs/azure/kubernetes" >Kubernetes</a> </li> <li > <a href="/docs/azure/mongodb" >MongoDB</a> </li> <li > <a href="/docs/azure/remote-debugging" >Remote Debugging for Node.js</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#remote-articles" data-parent="#main-nav" data-toggle="collapse">Remote</a> <ul id="remote-articles" class="collapse "> <li > <a href="/docs/remote/remote-overview" >Overview</a> </li> <li > <a href="/docs/remote/ssh" >SSH</a> </li> <li > <a href="/docs/remote/dev-containers" >Dev Containers</a> </li> <li > <a href="/docs/remote/wsl" >Windows Subsystem for Linux</a> </li> <li > <a href="/docs/remote/codespaces" >GitHub Codespaces</a> </li> <li > <a href="/docs/remote/vscode-server" >VS Code Server</a> </li> <li > <a href="/docs/remote/tunnels" >Tunnels</a> </li> <li > <a href="/docs/remote/ssh-tutorial" >SSH Tutorial</a> </li> <li > <a href="/docs/remote/wsl-tutorial" >WSL Tutorial</a> </li> <li > <a href="/docs/remote/troubleshooting" >Tips and Tricks</a> </li> <li > <a href="/docs/remote/faq" >FAQ</a> </li> </ul> </li> <li class="panel collapsed"> <a class="area" role="button" href="#devcontainers-articles" data-parent="#main-nav" data-toggle="collapse">Dev Containers</a> <ul id="devcontainers-articles" class="collapse "> <li > <a href="/docs/devcontainers/containers" >Overview</a> </li> <li > <a href="/docs/devcontainers/tutorial" >Tutorial</a> </li> <li > <a href="/docs/devcontainers/attach-container" >Attach to Container</a> </li> <li > <a href="/docs/devcontainers/create-dev-container" >Create a Dev Container</a> </li> <li > <a href="/docs/devcontainers/containers-advanced" >Advanced Containers</a> </li> <li > <a href="/docs/devcontainers/devcontainerjson-reference" >devcontainer.json</a> </li> <li > <a href="/docs/devcontainers/devcontainer-cli" >Dev Container CLI</a> </li> <li > <a href="/docs/devcontainers/tips-and-tricks" >Tips and Tricks</a> </li> <li > <a href="/docs/devcontainers/faq" >FAQ</a> </li> </ul> </li> </ul> </nav> <nav id="small-nav" aria-label="Topics" class="docs-nav hidden-md hidden-lg"> <label class="faux-h4" for="small-nav-dropdown">Topics</label> <select id="small-nav-dropdown" aria-label="topics"> <option value="/docs" >Overview</option> <optgroup label="Setup"> <option value="/docs/setup/setup-overview" >Overview</option> <option value="/docs/setup/linux" >Linux</option> <option value="/docs/setup/mac" >macOS</option> <option value="/docs/setup/windows" >Windows</option> <option value="/docs/setup/raspberry-pi" >Raspberry Pi</option> <option value="/docs/setup/network" >Network</option> <option value="/docs/setup/additional-components" >Additional Components</option> <option value="/docs/setup/enterprise" >Enterprise</option> <option value="/docs/setup/uninstall" >Uninstall</option> </optgroup> <optgroup label="Get Started"> <option value="/docs/getstarted/getting-started" >Tutorial</option> <option value="/docs/getstarted/introvideos" >Intro Videos</option> <option value="/docs/getstarted/tips-and-tricks" >Tips and Tricks</option> <option value="/docs/getstarted/userinterface" >User Interface</option> <option value="/docs/getstarted/themes" >Themes</option> <option value="/docs/getstarted/settings" >Settings</option> <option value="/docs/getstarted/keybindings" >Key Bindings</option> <option value="/docs/getstarted/locales" >Display Language</option> <option value="/docs/getstarted/telemetry" >Telemetry</option> <option value="/docs/getstarted/educators-and-students" >Educators & Students</option> </optgroup> <optgroup label="User Guide"> <option value="/docs/editor/codebasics" >Basic Editing</option> <option value="/docs/editor/extension-marketplace" >Extension Marketplace</option> <option value="/docs/editor/intellisense" >IntelliSense</option> <option value="/docs/editor/editingevolved" >Code Navigation</option> <option value="/docs/editor/refactoring" >Refactoring</option> <option value="/docs/editor/debugging" >Debugging</option> <option value="/docs/editor/testing" >Testing</option> <option value="/docs/editor/vscode-web" >VS Code for the Web</option> <option value="/docs/editor/tasks" >Tasks</option> <option value="/docs/editor/profiles" >Profiles</option> <option value="/docs/editor/settings-sync" >Settings Sync</option> <option value="/docs/editor/userdefinedsnippets" >Snippets</option> <option value="/docs/editor/emmet" >Emmet</option> <option value="/docs/editor/command-line" >Command Line Interface</option> <option value="/docs/editor/workspaces" >Workspaces</option> <option value="/docs/editor/workspace-trust" >Workspace Trust</option> <option value="/docs/editor/multi-root-workspaces" >Multi-root Workspaces</option> <option value="/docs/editor/accessibility" >Accessibility</option> <option value="/docs/editor/voice" >Voice Interactions</option> <option value="/docs/editor/custom-layout" >Custom Layout</option> <option value="/docs/editor/port-forwarding" >Port Forwarding</option> </optgroup> <optgroup label="Source Control"> <option value="/docs/sourcecontrol/overview" >Overview</option> <option value="/docs/sourcecontrol/intro-to-git" >Introduction to Git</option> <option value="/docs/sourcecontrol/github" >Collaborate on GitHub</option> <option value="/docs/sourcecontrol/faq" >FAQ</option> </optgroup> <optgroup label="Terminal"> <option value="/docs/terminal/getting-started" >Getting Started Tutorial</option> <option value="/docs/terminal/basics" >Terminal Basics</option> <option value="/docs/terminal/profiles" >Terminal Profiles</option> <option value="/docs/terminal/shell-integration" >Shell Integration</option> <option value="/docs/terminal/appearance" >Appearance</option> <option value="/docs/terminal/advanced" >Advanced</option> </optgroup> <optgroup label="GitHub Copilot"> <option value="/docs/copilot/overview" >Overview</option> <option value="/docs/copilot/copilot-vscode-features" >Copilot Cheat Sheet</option> <option value="/docs/copilot/setup" >Setup</option> <option value="/docs/copilot/getting-started" >Quickstart</option> <option value="/docs/copilot/ai-powered-suggestions" >Code Completions</option> <option value="/docs/copilot/copilot-chat" >Copilot Chat</option> <option value="/docs/copilot/getting-started-chat" >Copilot Chat Tutorial</option> <option value="/docs/copilot/copilot-edits" >Copilot Edits</option> <option value="/docs/copilot/prompt-crafting" >Best Practices</option> <option value="/docs/copilot/workspace-context" >Workspace Context</option> <option value="/docs/copilot/copilot-customization" >Customizing Copilot</option> <option value="/docs/copilot/copilot-extensibility-overview" >Copilot Extensibility</option> <option value="/docs/copilot/copilot-settings" >Settings Reference</option> <option value="/docs/copilot/faq" >FAQ</option> </optgroup> <optgroup label="Languages"> <option value="/docs/languages/overview" >Overview</option> <option value="/docs/languages/javascript" >JavaScript</option> <option value="/docs/languages/json" >JSON</option> <option value="/docs/languages/html" >HTML</option> <option value="/docs/languages/css" selected>CSS, SCSS and Less</option> <option value="/docs/languages/typescript" >TypeScript</option> <option value="/docs/languages/markdown" >Markdown</option> <option value="/docs/languages/powershell" >PowerShell</option> <option value="/docs/languages/cpp" >C++</option> <option value="/docs/languages/java" >Java</option> <option value="/docs/languages/php" >PHP</option> <option value="/docs/languages/python" >Python</option> <option value="/docs/languages/julia" >Julia</option> <option value="/docs/languages/r" >R</option> <option value="/docs/languages/ruby" >Ruby</option> <option value="/docs/languages/rust" >Rust</option> <option value="/docs/languages/go" >Go</option> <option value="/docs/languages/tsql" >T-SQL</option> <option value="/docs/languages/csharp" >C#</option> <option value="/docs/languages/dotnet" >.NET</option> <option value="/docs/languages/polyglot" >Polyglot</option> </optgroup> <optgroup label="Node.js / JavaScript"> <option value="/docs/nodejs/working-with-javascript" >Working with JavaScript</option> <option value="/docs/nodejs/nodejs-tutorial" >Node.js Tutorial</option> <option value="/docs/nodejs/nodejs-debugging" >Node.js Debugging</option> <option value="/docs/nodejs/nodejs-deployment" >Deploy Node.js Apps</option> <option value="/docs/nodejs/browser-debugging" >Browser Debugging</option> <option value="/docs/nodejs/angular-tutorial" >Angular Tutorial</option> <option value="/docs/nodejs/reactjs-tutorial" >React Tutorial</option> <option value="/docs/nodejs/vuejs-tutorial" >Vue Tutorial</option> <option value="/docs/nodejs/debugging-recipes" >Debugging Recipes</option> <option value="/docs/nodejs/profiling" >Performance Profiling</option> <option value="/docs/nodejs/extensions" >Extensions</option> </optgroup> <optgroup label="TypeScript"> <option value="/docs/typescript/typescript-tutorial" >Tutorial</option> <option value="/docs/typescript/typescript-compiling" >Compiling</option> <option value="/docs/typescript/typescript-editing" >Editing</option> <option value="/docs/typescript/typescript-refactoring" >Refactoring</option> <option value="/docs/typescript/typescript-debugging" >Debugging</option> </optgroup> <optgroup label="Python"> <option value="/docs/python/python-quick-start" >Quick Start</option> <option value="/docs/python/python-tutorial" >Tutorial</option> <option value="/docs/python/run" >Run Python Code</option> <option value="/docs/python/editing" >Editing Code</option> <option value="/docs/python/linting" >Linting</option> <option value="/docs/python/formatting" >Formatting</option> <option value="/docs/python/debugging" >Debugging</option> <option value="/docs/python/environments" >Environments</option> <option value="/docs/python/testing" >Testing</option> <option value="/docs/python/jupyter-support-py" >Python Interactive</option> <option value="/docs/python/tutorial-django" >Django Tutorial</option> <option value="/docs/python/tutorial-fastapi" >FastAPI Tutorial</option> <option value="/docs/python/tutorial-flask" >Flask Tutorial</option> <option value="/docs/python/tutorial-create-containers" >Create containers</option> <option value="/docs/python/python-on-azure" >Deploy Python Apps</option> <option value="/docs/python/python-web" >Python in the Web</option> <option value="/docs/python/settings-reference" >Settings Reference</option> </optgroup> <optgroup label="Java"> <option value="/docs/java/java-tutorial" >Getting Started</option> <option value="/docs/java/java-editing" >Navigate and Edit</option> <option value="/docs/java/java-refactoring" >Refactoring</option> <option value="/docs/java/java-linting" >Formatting and Linting</option> <option value="/docs/java/java-project" >Project Management</option> <option value="/docs/java/java-build" >Build Tools</option> <option value="/docs/java/java-debugging" >Run and Debug</option> <option value="/docs/java/java-testing" >Testing</option> <option value="/docs/java/java-spring-boot" >Spring Boot</option> <option value="/docs/java/java-tomcat-jetty" >Application Servers</option> <option value="/docs/java/java-on-azure" >Deploy Java Apps</option> <option value="/docs/java/java-gui" >GUI Applications</option> <option value="/docs/java/extensions" >Extensions</option> <option value="/docs/java/java-faq" >FAQ</option> </optgroup> <optgroup label="C++"> <option value="/docs/cpp/introvideos-cpp" >Intro Videos</option> <option value="/docs/cpp/config-linux" >GCC on Linux</option> <option value="/docs/cpp/config-mingw" >GCC on Windows</option> <option value="/docs/cpp/config-wsl" >GCC on Windows Subsystem for Linux</option> <option value="/docs/cpp/config-clang-mac" >Clang on macOS</option> <option value="/docs/cpp/config-msvc" >Microsoft C++ on Windows</option> <option value="/docs/cpp/build-with-cmake" >Build with CMake</option> <option value="/docs/cpp/cmake-linux" >CMake Tools on Linux</option> <option value="/docs/cpp/cmake-quickstart" >CMake Quick Start</option> <option value="/docs/cpp/cpp-ide" >Editing and Navigating</option> <option value="/docs/cpp/cpp-debug" >Debugging</option> <option value="/docs/cpp/cpp-refactoring" >Refactoring</option> <option value="/docs/cpp/launch-json-reference" >Configure debugging</option> <option value="/docs/cpp/customize-default-settings-cpp" >Settings</option> <option value="/docs/cpp/configure-intellisense" >Configure IntelliSense</option> <option value="/docs/cpp/configure-intellisense-crosscompilation" >Configure IntelliSense for cross-compiling</option> <option value="/docs/cpp/faq-cpp" >FAQ</option> </optgroup> <optgroup label="C#"> <option value="/docs/csharp/introvideos-csharp" >Intro Videos</option> <option value="/docs/csharp/get-started" >Get Started</option> <option value="/docs/csharp/navigate-edit" >Navigate and Edit</option> <option value="/docs/csharp/intellicode" >IntelliCode</option> <option value="/docs/csharp/refactoring" >Refactoring</option> <option value="/docs/csharp/formatting-linting" >Formatting and Linting</option> <option value="/docs/csharp/project-management" >Project Management</option> <option value="/docs/csharp/build-tools" >Build Tools</option> <option value="/docs/csharp/package-management" >Package Management</option> <option value="/docs/csharp/debugging" >Run and Debug</option> <option value="/docs/csharp/testing" >Testing</option> <option value="/docs/csharp/cs-dev-kit-faq" >FAQ</option> </optgroup> <optgroup label="Docker"> <option value="/docs/containers/overview" >Overview</option> <option value="/docs/containers/quickstart-node" >Node.js</option> <option value="/docs/containers/quickstart-python" >Python</option> <option value="/docs/containers/quickstart-aspnet-core" >ASP.NET Core</option> <option value="/docs/containers/debug-common" >Debug</option> <option value="/docs/containers/docker-compose" >Docker Compose</option> <option value="/docs/containers/quickstart-container-registries" >Registries</option> <option value="/docs/containers/app-service" >Deploy to Azure</option> <option value="/docs/containers/choosing-dev-environment" >Choose a dev environment</option> <option value="/docs/containers/reference" >Customize</option> <option value="/docs/containers/bridge-to-kubernetes" >Develop with Kubernetes</option> <option value="/docs/containers/troubleshooting" >Tips and Tricks</option> </optgroup> <optgroup label="Data Science"> <option value="/docs/datascience/overview" >Overview</option> <option value="/docs/datascience/jupyter-notebooks" >Jupyter Notebooks</option> <option value="/docs/datascience/data-science-tutorial" >Data Science Tutorial</option> <option value="/docs/datascience/python-interactive" >Python Interactive</option> <option value="/docs/datascience/data-wrangler-quick-start" >Data Wrangler Quick Start</option> <option value="/docs/datascience/data-wrangler" >Data Wrangler</option> <option value="/docs/datascience/pytorch-support" >PyTorch Support</option> <option value="/docs/datascience/azure-machine-learning" >Azure Machine Learning</option> <option value="/docs/datascience/jupyter-kernel-management" >Manage Jupyter Kernels</option> <option value="/docs/datascience/notebooks-web" >Jupyter Notebooks on the web</option> </optgroup> <optgroup label="Azure"> <option value="/docs/azure/overview" >Overview</option> <option value="/docs/azure/gettingstarted" >Getting Started</option> <option value="/docs/azure/deployment" >Deployment</option> <option value="/docs/azure/docker" >Docker</option> <option value="/docs/azure/aksextensions" >Azure Kubernetes Service</option> <option value="/docs/azure/kubernetes" >Kubernetes</option> <option value="/docs/azure/mongodb" >MongoDB</option> <option value="/docs/azure/remote-debugging" >Remote Debugging for Node.js</option> </optgroup> <optgroup label="Remote"> <option value="/docs/remote/remote-overview" >Overview</option> <option value="/docs/remote/ssh" >SSH</option> <option value="/docs/remote/dev-containers" >Dev Containers</option> <option value="/docs/remote/wsl" >Windows Subsystem for Linux</option> <option value="/docs/remote/codespaces" >GitHub Codespaces</option> <option value="/docs/remote/vscode-server" >VS Code Server</option> <option value="/docs/remote/tunnels" >Tunnels</option> <option value="/docs/remote/ssh-tutorial" >SSH Tutorial</option> <option value="/docs/remote/wsl-tutorial" >WSL Tutorial</option> <option value="/docs/remote/troubleshooting" >Tips and Tricks</option> <option value="/docs/remote/faq" >FAQ</option> </optgroup> <optgroup label="Dev Containers"> <option value="/docs/devcontainers/containers" >Overview</option> <option value="/docs/devcontainers/tutorial" >Tutorial</option> <option value="/docs/devcontainers/attach-container" >Attach to Container</option> <option value="/docs/devcontainers/create-dev-container" >Create a Dev Container</option> <option value="/docs/devcontainers/containers-advanced" >Advanced Containers</option> <option value="/docs/devcontainers/devcontainerjson-reference" >devcontainer.json</option> <option value="/docs/devcontainers/devcontainer-cli" >Dev Container CLI</option> <option value="/docs/devcontainers/tips-and-tricks" >Tips and Tricks</option> <option value="/docs/devcontainers/faq" >FAQ</option> </optgroup> </select> </nav> </div>  <div class="col-xs-12 visible-xs"> <nav aria-labelledby="small-right-nav-label" class="small-nav docs-nav updates-nav"> <label class="faux-h4" for="small-right-nav-dropdown" id="small-right-nav-label">In this article</label> <select id="small-right-nav-dropdown" class="small-nav-select" aria-label="Sections"> <option value="#_intellisense">IntelliSense</option> <option value="#_syntax-coloring-color-preview">Syntax coloring & color preview</option> <option value="#_folding">Folding</option> <option value="#_emmet-snippets">Emmet snippets</option> <option value="#_syntax-verification-linting">Syntax Verification & Linting</option> <option value="#_go-to-symbol-in-file">Go to Symbol in file</option> <option value="#_hovers">Hovers</option> <option value="#_go-to-declaration-and-find-references">Go to Declaration and Find References</option> <option value="#_css-custom-data">CSS custom data</option> <option value="#_formatting">Formatting</option> <option value="#_transpiling-sass-and-less-into-css">Transpiling Sass and Less into CSS</option> <option value="#_automating-sassless-compilation">Automating Sass/Less compilation</option> <option value="#_customizing-css-scss-and-less-settings">Customizing CSS, SCSS and Less Settings</option> <option value="#_next-steps">Next steps</option> <option value="#_common-questions">Common questions</option> </select> </nav> </div>  <main class="col-xs-12 col-sm-9 col-md-8 body"> <div class="edit-github pull-right"> <a href="https://vscode.dev/github/microsoft/vscode-docs/blob/main/docs/languages/css.md" class="btn btn-default" title="Edit this document in vscode.dev"> Edit </a> </div> <h1>CSS, SCSS and Less</h1> Visual Studio Code has built-in support for editing style sheets in CSS <code>.css</code>, SCSS <code>.scss</code> and Less <code>.less</code>. In addition, you can install an extension for greater functionality. <div class="marketplace-extensions-css-curated"></div> <blockquote>Tip: Click on an extension tile above to read the description and reviews to decide which extension is best for you. See more in the <a href="https://marketplace.visualstudio.com" class="external-link" target="_blank">Marketplace</a>. </blockquote><h2 id="_intellisense" data-needslink="_intellisense">IntelliSense</h2> VS Code has support for selectors, properties and values. Use 鈱僑pace (Windows, Linux Ctrl+Space) to get a list of context specific options. <img src="/assets/docs/languages/css/intellisense.png" alt="IntelliSense in CSS" loading="lazy"> Proposals contain extensive documentation, including a list of browsers that support the property. To see the full description text of the selected entry, use 鈱僑pace (Windows, Linux Ctrl+Space). <h2 id="_syntax-coloring-color-preview" data-needslink="_syntax-coloring-color-preview">Syntax coloring & color preview</h2> As you type, there is syntax highlighting as well as in context preview of colors. <img src="/assets/docs/languages/css/color.png" alt="Syntax and color" loading="lazy"> Clicking on a color preview will launch the integrated color picker which supports configuration of hue, saturation and opacity. <img src="/assets/docs/languages/css/css-color-picker.png" alt="Color picker in CSS" loading="lazy"> <blockquote>Tip: You can trigger between different color modes by clicking on the color string at the top of the picker. </blockquote>You can hide VS Code's color previews by setting the following <a href="/docs/getstarted/settings">setting</a>: <pre class="shiki" style="background-color: #1e1e1e"><code>"editor.colorDecorators": false </code></pre> To just disable it for css, Less and SCSS, use <pre class="shiki" style="background-color: #1e1e1e"><code>"[css]": { "editor.colorDecorators": false } </code></pre> <h2 id="_folding" data-needslink="_folding">Folding</h2> You can fold regions of source code using the folding icons on the gutter between line numbers and line start. Folding regions are available for all declarations (for example, rule declarations) and for multiline comments in the source code. Additionally you can use the following region markers to define a folding region: <code>/*#region*/</code> and <code>/*#endregion*/</code> in CSS/SCSS/Less or <code>// #region</code> and <code>// #endregion</code> In SCSS/Less. If you prefer to switch to indentation based folding for CSS, Less and SCSS, use: <pre class="shiki" style="background-color: #1e1e1e"><code>"[css]": { "editor.foldingStrategy": "indentation" }, </code></pre> <h2 id="_emmet-snippets" data-needslink="_emmet-snippets">Emmet snippets</h2> <a href="/docs/editor/emmet">Emmet abbreviation support</a> is built into VS Code, suggestions are listed along with other suggestions and snippets in the editor auto-completion list. <blockquote>Tip: See the CSS section of the <a href="https://docs.emmet.io/cheat-sheet" class="external-link" target="_blank">Emmet cheat sheet</a> for valid abbreviations. </blockquote>VS Code also supports <a href="/docs/editor/userdefinedsnippets">User Defined Snippets</a>. <h2 id="_syntax-verification-linting" data-needslink="_syntax-verification-linting">Syntax Verification & Linting</h2> There is support for CSS version <= 2.1, Sass version <= 3.2 and Less version <= 2.3. <blockquote>Note: You can disable VS Code's default CSS, Sass or Less validation by setting the corresponding <code>.validate</code> User or Workspace <a href="/docs/getstarted/settings">setting</a> to false. <pre class="shiki" style="background-color: #1e1e1e"><code>"css.validate": false </code></pre> </blockquote><h2 id="_go-to-symbol-in-file" data-needslink="_go-to-symbol-in-file">Go to Symbol in file</h2> You can quickly navigate to the relevant CSS symbol in the current file by pressing 鈬р寴O (Windows, Linux Ctrl+Shift+O). <h2 id="_hovers" data-needslink="_hovers">Hovers</h2> Hovering over a selector or property will provide an HTML snippet that is matched by the CSS rule. <img src="/assets/docs/languages/css/hover.png" alt="Hover in CSS" loading="lazy"> <h2 id="_go-to-declaration-and-find-references" data-needslink="_go-to-declaration-and-find-references">Go to Declaration and Find References</h2> This is supported for Sass and Less variables in the same file. <a href="https://developer.mozilla.org/docs/Web/CSS/Using_CSS_variables" class="external-link" target="_blank">CSS variables</a> per the <a href="https://drafts.csswg.org/css-variables/" class="external-link" target="_blank">draft standards proposal</a> are also supported. There is jump to definition for <code>@import</code> and <code>url()</code> links in CSS, SCSS and Less. <h2 id="_css-custom-data" data-needslink="_css-custom-data">CSS custom data</h2> You can extend VS Code's CSS support through a declarative <a href="https://github.com/microsoft/vscode-css-languageservice/blob/main/docs/customData.md" class="external-link" target="_blank">custom data format</a>. By setting <a href="vscode://settings/css.customData" codesetting="true"></a>css.customData to a list of JSON files following the custom data format, you can enhance VS Code's understanding of new CSS properties, at-directives, pseudo-classes and pesudo-elements. VS Code will then offer language support such as completion & hover information for the provided properties, at-directives, pseudo-classes and pesudo-elements. You can read more about using custom data in the <a href="https://github.com/microsoft/vscode-custom-data" class="external-link" target="_blank">vscode-custom-data</a> repository. <h2 id="_formatting" data-needslink="_formatting">Formatting</h2> The CSS Languages Features extension also provides a formatter. The formatter works with CSS, LESS and SCSS. It is implemented by the <a href="https://github.com/beautify-web/js-beautify" class="external-link" target="_blank">JS Beautify library</a> and comes with the following settings: <ul> <li><a href="vscode://settings/css.format.enable" codesetting="true"></a>css.format.enable - Enable/disable default CSS formatter.</li> <li><a href="vscode://settings/css.format.newlineBetweenRules" codesetting="true"></a>css.format.newlineBetweenRules - Separate rulesets by a blank line.</li> <li><a href="vscode://settings/css.format.newlineBetweenSelectors" codesetting="true"></a>css.format.newlineBetweenSelectors - Separate selectors with a new line.</li> <li><a href="vscode://settings/css.format.spaceAroundSelectorSeparator" codesetting="true"></a>css.format.spaceAroundSelectorSeparator - Ensure a space character around selector separators '>', '+', '~' (for example, <code>a > b</code>).</li> </ul> The same settings also exist for <code>less</code> and <code>scss</code>. <h2 id="_transpiling-sass-and-less-into-css" data-needslink="_transpiling-sass-and-less-into-css">Transpiling Sass and Less into CSS</h2> VS Code can integrate with Sass and Less transpilers through our integrated <a href="/docs/editor/tasks">task runner</a>. We can use this to transpile <code>.scss</code> or <code>.less</code> files into <code>.css</code> files. Let's walk through transpiling a simple Sass/Less file. <h3 id="_step-1-install-a-sass-or-less-transpiler" data-needslink="_step-1-install-a-sass-or-less-transpiler">Step 1: Install a Sass or Less transpiler</h3> For this walkthrough, let's use either the <a href="https://www.npmjs.com/package/sass" class="external-link" target="_blank">sass</a> or <a href="https://www.npmjs.com/package/less" class="external-link" target="_blank">less</a> Node.js module. <blockquote>Note: If you don't have <a href="https://nodejs.org" class="external-link" target="_blank">Node.js</a> and the <a href="https://www.npmjs.com/" class="external-link" target="_blank">npm</a> package manager already installed, you'll need to do so for this walkthrough. <a href="https://nodejs.org/en/download/" class="external-link" target="_blank">Install Node.js for your platform</a>. The Node Package Manager (npm) is included in the Node.js distribution. You'll need to open a new terminal (command prompt) for <code>npm</code> to be on your PATH. </blockquote><pre class="shiki" style="background-color: #1e1e1e"><code>npm install -g sass less </code></pre> <h3 id="_step-2-create-a-simple-sass-or-less-file" data-needslink="_step-2-create-a-simple-sass-or-less-file">Step 2: Create a simple Sass or Less file</h3> Open VS Code on an empty folder and create a <code>styles.scss</code> or <code>styles.less</code> file. Place the following code in that file: <pre class="shiki" style="background-color: #1e1e1e"><code>$padding: 6px; nav { ul { margin: 0; padding: $padding; list-style: none; } li { display: inline-block; } a { display: block; padding: $padding 12px; text-decoration: none; } } </code></pre> For the Less version of the above file, just change <code>$padding</code> to <code>@padding</code>. <blockquote>Note: This is a very simple example, which is why the source code is almost identical between both file types. In more advanced scenarios, the syntaxes and constructs will be much different. </blockquote><h3 id="_step-3-create-tasksjson" data-needslink="_step-3-create-tasksjson">Step 3: Create tasks.json</h3> The next step is to set up the task configuration. To do this, run Terminal > Configure Tasks and click Create tasks.json file from template. In the selection dialog that shows up, select Others. This will create a sample <code>tasks.json</code> file in the workspace <code>.vscode</code> folder. The initial version of file has an example to run an arbitrary command. We will modify that configuration for transpiling Sass/Less instead: <pre class="shiki" style="background-color: #1e1e1e"><code>// Sass configuration { // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "2.0.0", "tasks": [ { "label": "Sass Compile", "type": "shell", "command": "sass styles.scss styles.css", "group": "build" } ] } </code></pre> <pre class="shiki" style="background-color: #1e1e1e"><code>// Less configuration { // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "2.0.0", "tasks": [ { "label": "Less Compile", "type": "shell", "command": "lessc styles.less styles.css", "group": "build" } ] } </code></pre> <h3 id="_step-4-run-the-build-task" data-needslink="_step-4-run-the-build-task">Step 4: Run the Build Task</h3> As this is the only command in the file, you can execute it by pressing 鈬р寴B (Windows, Linux Ctrl+Shift+B) (Run Build Task). The sample Sass/Less file should not have any compile problems, so by running the task all that happens is a corresponding <code>styles.css</code> file is created. Since in more complex environments there can be more than one build task we prompt you to pick the task to execute after pressing 鈬р寴B (Windows, Linux Ctrl+Shift+B) (Run Build Task). In addition, we allow you to scan the output for compile problems (errors and warnings). Depending on the compiler, select an appropriate entry in the list to scan the tool output for errors and warnings. If you don't want to scan the output, select Never scan the build output from the presented list. At this point, you should see an additional file show up in the file list <code>styles.css</code>. If you want to make the task the default build task to run execute Configure Default Build Task from the global Terminal menu and select the corresponding Sass or Less task from the presented list. <blockquote>Note: If your build fails or you see an error message such as "An output directory must be specified when compiling a directory", be sure the filenames in your <code>tasks.json</code> match the filenames on disk. You can always test your build by running <code>sass styles.scss styles.css</code> from the command line. </blockquote><h2 id="_automating-sassless-compilation" data-needslink="_automating-sassless-compilation">Automating Sass/Less compilation</h2> Let's take things a little further and automate Sass/Less compilation with VS Code. We can do so with the same task runner integration as before, but with a few modifications. <h3 id="_step-1-install-gulp-and-some-plugins" data-needslink="_step-1-install-gulp-and-some-plugins">Step 1: Install Gulp and some plug-ins</h3> We will use <a href="https://gulpjs.com/" class="external-link" target="_blank">Gulp</a> to create a task that will automate Sass/Less compilation. We will also use the <a href="https://www.npmjs.com/package/gulp-sass" class="external-link" target="_blank">gulp-sass</a> plug-in to make things a little easier. The Less plug-in is <a href="https://www.npmjs.com/package/gulp-less" class="external-link" target="_blank">gulp-less</a>. We need to install gulp both globally (<code>-g</code> switch) and locally: <pre class="shiki" style="background-color: #1e1e1e"><code>npm install -g gulp npm install gulp gulp-sass gulp-less </code></pre> <blockquote>Note: <code>gulp-sass</code> and <code>gulp-less</code> are Gulp plug-ins for the <code>sass</code> and <code>lessc</code> modules we were using before. There are many other Gulp Sass and Less plug-ins you can use, as well as plug-ins for Grunt. </blockquote>You can test that your gulp installation was successful by typing <code>gulp -v</code> in the terminal. You should see a version displayed for both the global (CLI) and local installations. <h3 id="_step-2-create-a-simple-gulp-task" data-needslink="_step-2-create-a-simple-gulp-task">Step 2: Create a simple Gulp task</h3> Open VS Code on the same folder from before (contains <code>styles.scss</code>/<code>styles.less</code> and <code>tasks.json</code> under the <code>.vscode</code> folder), and create <code>gulpfile.js</code> at the root. Place the following code in the <code>gulpfile.js</code> file: <pre class="shiki" style="background-color: #1e1e1e"><code>// Sass configuration var gulp = require('gulp'); var sass = require('gulp-sass')(require('sass')); gulp.task('sass', function(cb) { gulp .src('*.scss') .pipe(sass()) .pipe( gulp.dest(function(f) { return f.base; }) ); cb(); }); gulp.task( 'default', gulp.series('sass', function(cb) { gulp.watch('*.scss', gulp.series('sass')); cb(); }) ); </code></pre> <pre class="shiki" style="background-color: #1e1e1e"><code>// Less configuration var gulp = require('gulp'); var less = require('gulp-less'); gulp.task('less', function(cb) { gulp .src('*.less') .pipe(less()) .pipe( gulp.dest(function(f) { return f.base; }) ); cb(); }); gulp.task( 'default', gulp.series('less', function(cb) { gulp.watch('*.less', gulp.series('less')); cb(); }) ); </code></pre> What is happening here? <ol> <li>Our <code>default</code> gulp task first runs the <code>sass</code> or <code>less</code> task once when it starts up.</li> <li>It then watches for changes to any SCSS/Less file at the root of our workspace, for example the current folder open in VS Code.</li> <li>It takes the set of SCSS/Less files that have changed and runs them through our respective compiler, for example <code>gulp-sass</code>, <code>gulp-less</code>.</li> <li>We now have a set of CSS files, each named respectively after their original SCSS/Less file. We then put these files in the same directory.</li> </ol> <h3 id="_step-3-run-the-gulp-default-task" data-needslink="_step-3-run-the-gulp-default-task">Step 3: Run the gulp default task</h3> To complete the tasks integration with VS Code, we will need to modify the task configuration from before to run the default Gulp task we just created. You can either delete the <code>tasks.json</code> file or empty it only keeping the <code>"version": "2.0.0"</code> property. Now execute Run Task from the global Terminal menu. Observe that you are presented with a picker listing the tasks defined in the gulp file. Select gulp: default to start the task. We allow you to scan the output for compile problems. Depending on the compiler, select an appropriate entry in the list to scan the tool output for errors and warnings. If you don't want to scan the output, select Never scan the build output from the presented list. At this point, if you create and/or modify Less or SASS files, you see the respective CSS files generated and/or changes reflected on save. You can also enable <a href="/docs/editor/codebasics#_save-auto-save">Auto Save</a> to make things even more streamlined. If you want to make the gulp: default task the default build task executed when pressing 鈬р寴B (Windows, Linux Ctrl+Shift+B) run Configure Default Build Task from the global Terminal menu and select gulp: default from the presented list. <h3 id="_step-4-terminate-the-gulp-default-task" data-needslink="_step-4-terminate-the-gulp-default-task">Step 4: Terminate the gulp default Task</h3> The gulp: default task runs in the background and watches for file changes to Sass/Less files. If you want to stop the task, you can use the Terminate Task from the global Terminal menu. <h2 id="_customizing-css-scss-and-less-settings" data-needslink="_customizing-css-scss-and-less-settings">Customizing CSS, SCSS and Less Settings</h2> You can configure the following lint warnings as <a href="/docs/getstarted/settings">User and Workspace Settings</a>. The <code>validate</code> setting allows you turn off the built-in validation. You would do this if you rather use a different linter. <table class="table table-striped"> <thead> <tr> <th>Id</th> <th>Description</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>css.validate</td> <td>Enables or disables all css validations</td> <td>true</td> </tr> <tr> <td>less.validate</td> <td>Enables or disables all less validations</td> <td>true</td> </tr> <tr> <td>scss.validate</td> <td>Enables or disables all scss validations</td> <td>true</td> </tr> </tbody> </table> To configure an option for CSS, use <code>css.lint.</code> as the prefix to the id; for SCSS and Less, use <code>scss.lint.</code> and <code>less.lint.</code>. Set a setting to <code>warning</code> or <code>error</code> if you want to enable lint checking, use <code>ignore</code> to disable it. Lint checks are performed as you type. <table class="table table-striped"> <thead> <tr> <th>Id</th> <th>Description</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>validate</td> <td>Enables or disables all validations</td> <td>true</td> </tr> <tr> <td>compatibleVendorPrefixes</td> <td>When using a property with a vendor-specific prefix (for example <code>-webkit-transition</code>), make sure to also include all other vendor-specific properties e.g. <code>-moz-transition</code>, <code>-ms-transition</code> and <code>-o-transition</code></td> <td>ignore</td> </tr> <tr> <td>vendorPrefix</td> <td>When using a property with a vendor-specific prefix for example <code>-webkit-transition</code>, make sure to also include the standard property if it exists e.g. <code>transition</code></td> <td>warning</td> </tr> <tr> <td>duplicateProperties</td> <td>Warn about duplicate properties in the same ruleset</td> <td>ignore</td> </tr> <tr> <td>emptyRules</td> <td>Warn about empty rulesets</td> <td>warning</td> </tr> <tr> <td>importStatement</td> <td>Warn about using an <code>import</code> statement as import statements are loaded sequentially which has a negative impact on web page performance</td> <td>ignore</td> </tr> <tr> <td>boxModel</td> <td>Do not use <code>width</code> or <code>height</code> when using <code>padding</code> or <code>border</code></td> <td>ignore</td> </tr> <tr> <td>universalSelector</td> <td>Warn when using the universal selector <code>*</code> as it is known to be slow and should be avoided</td> <td>ignore</td> </tr> <tr> <td>zeroUnits</td> <td>Warn when having zero with a unit e.g. <code>0em</code> as zero does not need a unit.</td> <td>ignore</td> </tr> <tr> <td>fontFaceProperties</td> <td>Warn when using <code>@font-face</code> rule without defining a <code>src</code> and <code>font-family</code> property</td> <td>warning</td> </tr> <tr> <td>hexColorLength</td> <td>Warn when using hex numbers that don't consist of three or six hex numbers</td> <td>error</td> </tr> <tr> <td>argumentsInColorFunction</td> <td>Warn when an invalid number of parameters in color functions e.g. <code>rgb</code></td> <td>error</td> </tr> <tr> <td>unknownProperties</td> <td>Warn when using an unknown property</td> <td>warning</td> </tr> <tr> <td>ieHack</td> <td>Warn when using an IE hack <code>*propertyName</code> or <code>_propertyName</code></td> <td>ignore</td> </tr> <tr> <td>unknownVendorSpecificProperties</td> <td>Warn when using an unknown vendor-specific property</td> <td>ignore</td> </tr> <tr> <td>propertyIgnoredDueToDisplay</td> <td>Warn when using a property that is ignored due to the display. For example, with <code>display: inline</code>, the <code>width</code>, <code>height</code>, <code>margin-top</code>, <code>margin-bottom</code>, and <code>float</code> properties have no effect.</td> <td>warning</td> </tr> <tr> <td>important</td> <td>Warn when using <code>!important</code> as it is an indication that the specificity of the entire CSS has gotten out of control and needs to be refactored.</td> <td>ignore</td> </tr> <tr> <td>float</td> <td>Warn when using <code>float</code> as floats lead to fragile CSS that is easy to break if one aspect of the layout changes.</td> <td>ignore</td> </tr> <tr> <td>idSelector</td> <td>Warn when using selectors for an id <code>#id</code> as selectors should not contain IDs because these rules are too tightly coupled with the HTML.</td> <td>ignore</td> </tr> </tbody> </table> <h2 id="_next-steps" data-needslink="_next-steps">Next steps</h2> Read on to find out about: <ul> <li><a href="/docs/editor/tasks">Configure Tasks</a> - Dig into Tasks to help you transpile your SCSS and Less to CSS.</li> <li><a href="/docs/editor/codebasics">Basic Editing</a> - Learn about the powerful VS Code editor.</li> <li><a href="/docs/editor/editingevolved">Code Navigation</a> - Move quickly through your source code.</li> <li><a href="/docs/languages/html">HTML</a> - CSS is just the start, HTML is also very well supported in VS Code.</li> </ul> <h2 id="_common-questions" data-needslink="_common-questions">Common questions</h2> <h3 id="_does-vs-code-provide-a-color-picker" data-needslink="_does-vs-code-provide-a-color-picker">Does VS Code provide a color picker?</h3> Yes, hover over a CSS color reference and the color picker is displayed. <h3 id="_is-there-support-for-the-indentation-based-sass-syntax-sass" data-needslink="_is-there-support-for-the-indentation-based-sass-syntax-sass">Is there support for the indentation based Sass syntax (.sass)?</h3> No, but there are several extensions in the Marketplace supporting the indented flavor of Sass, for example, the <a href="https://marketplace.visualstudio.com/items?itemName=Syler.sass-indented" class="external-link" target="_blank">Sass</a> extension originally created by Robin Bentley, now maintained by Leonard Grosoli. <div class="feedback"></div> <div class="body-footer">10/29/2024</div> </main>  <div class="col-sm-3 col-md-2 hidden-xs docs-subnavbar-container"> <nav id="docs-subnavbar" aria-label="On Page" data-spy="affix" data-offset-top="20"> <h4>In this article there are 15 sectionsIn this article</h4> <ul class="nav"> <li><a href="#_intellisense">IntelliSense</a></li> <li><a href="#_syntax-coloring-color-preview">Syntax coloring & color preview</a></li> <li><a href="#_folding">Folding</a></li> <li><a href="#_emmet-snippets">Emmet snippets</a></li> <li><a href="#_syntax-verification-linting">Syntax Verification & Linting</a></li> <li><a href="#_go-to-symbol-in-file">Go to Symbol in file</a></li> <li><a href="#_hovers">Hovers</a></li> <li><a href="#_go-to-declaration-and-find-references">Go to Declaration and Find References</a></li> <li><a href="#_css-custom-data">CSS custom data</a></li> <li><a href="#_formatting">Formatting</a></li> <li><a href="#_transpiling-sass-and-less-into-css">Transpiling Sass and Less into CSS</a></li> <li><a href="#_automating-sassless-compilation">Automating Sass/Less compilation</a></li> <li><a href="#_customizing-css-scss-and-less-settings">Customizing CSS, SCSS and Less Settings</a></li> <li><a href="#_next-steps">Next steps</a></li> <li><a href="#_common-questions">Common questions</a></li> </ul> <div class="connect-widget"></div> </nav> </div>  <div class="col-xs-12 visible-xs"> <div class="connect-widget"></div> </div> </div> </div> </div> </div> <footer role="contentinfo" class="container"> <div class="footer-container"> <div class="footer-row"> <div class="footer-social"> <ul class="links"> <li> <a href="https://go.microsoft.com/fwlink/?LinkID=533687"><img src="/assets/icons/x-icon.svg" class="x-icon" alt="Follow us on X"></a> </li> <li> <a href="https://github.com/microsoft/vscode"><img src="/assets/icons/github-icon.svg" alt="VS Code on Github"></a> </li> <li> <a href="https://www.youtube.com/@code"><img src="/assets/icons/youtube-icon.svg" alt="VS Code on YouTube"></a> </li> <script> function manageConsent() { if (siteConsent && siteConsent.isConsentRequired) { siteConsent.manageConsent(); } } </script> </ul> <a id="footer-microsoft-link" class="microsoft-logo" href="https://www.microsoft.com"> <img src="/assets/icons/microsoft.svg" alt="Microsoft homepage" /> </a> </div> </div> <div class="footer-row"> <ul class="links"> <li><a id="footer-support-link" href="https://support.serviceshub.microsoft.com/supportforbusiness/create?sapId=d66407ed-3967-b000-4cfb-2c318cad363d" target="_blank" rel="noopener">Support</a></li> <li><a id="footer-privacy-link" href="https://go.microsoft.com/fwlink/?LinkId=521839" target="_blank" rel="noopener">Privacy</a></li> <li style="display: none;"><a id="footer-cookie-link" style="cursor: pointer;" onclick="manageConsent()" target="_blank" rel="noopener">Manage Cookies</a></li> <li><a id="footer-terms-link" href="https://www.microsoft.com/legal/terms-of-use" target="_blank" rel="noopener">Terms of Use</a></li> <li><a id="footer-license-link" href="/License" target="_blank" rel="noopener">License</a></li> </ul> </div> </div> </footer> <script src="/dist/index.js"></script> <script type="application/ld+json"> { "@context" : "http://schema.org", "@type" : "SoftwareApplication", "name" : "Visual Studio Code", "softwareVersion": "1.95", "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" }, "applicationCategory": "DeveloperApplication", "applicationSubCategory": "Text Editor", "alternateName": "VS Code", "datePublished": "2021-11-03", "operatingSystem": "Mac, Linux, Windows", "logo": "https://code.visualstudio.com/assets/apple-touch-icon.png", "screenshot": "https://code.visualstudio.com/assets/home/home-screenshot-win.png", "releaseNotes": "https://code.visualstudio.com/updates", "downloadUrl": "https://code.visualstudio.com/download", "license": "https://code.visualstudio.com/license", "softwareRequirements": "https://code.visualstudio.com/docs/supporting/requirements", "url" : "https://code.visualstudio.com", "author": { "@type": "Organization", "name": "Microsoft" }, "publisher": { "@type": "Organization", "name": "Microsoft" }, "maintainer": { "@type": "Organization", "name": "Microsoft" }, "potentialAction": { "@type": "SearchAction", "target": "https://code.visualstudio.com/Search?q={search_term_string}", "query-input": "required name=search_term_string" }, "sameAs" : [ "https://en.wikipedia.org/wiki/Visual_Studio_Code", "https://twitter.com/code", "https://www.youtube.com/code", "https://www.tiktok.com/@vscode", "https://github.com/microsoft/vscode" ] } </script> </body> </html>

CINXE.COM

CSS, SCSS, and Less support in Visual Studio Code