{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/javascript-data-grid/global-style-upgrading-to-v28-sass/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The Legacy Sass API is deprecated and will be removed from the Grid in a future major release. The new API has been designed to be easy to upgrade to - it supports almost the same set of properties as the old API, with a few minor differences documented below. "}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["custom-block","note","warning"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you created an app on v27 or earlier and have not updated your import paths, you will be using the Legacy Sass API even if you upgraded your ag-Grid dependency to v28. You can recognise Legacy Sass API import paths because they will have "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"/dist/"}]},{"type":"text","value":" or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"/src/"}]},{"type":"text","value":" in them, e.g. "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"@import \"ag-grid-community/src/styles/ag-grid.scss\""}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Follow the instructions in this document to upgrade."}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["custom-block","note"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you need to make changes to an app that is still using the legacy API, you can consult the "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.4/global-style-customisation-sass-legacy/"},"children":[{"type":"text","value":"Archived Documentation for the Legacy API"}]},{"type":"text","value":"."}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"benefits-of-the-new-api","style":"position:relative;"},"children":[{"type":"text","value":"Benefits of the new API"},{"type":"element","tagName":"a","properties":{"href":"#benefits-of-the-new-api","ariaLabel":"benefits of the new api permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In addition to the benefits fo the new CSS Variable-driven styling system, the new Sass API provides some benefits:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Long-term stability and feature completeness. The Legacy API is being kept around for at least one major version in order to allow a grace period where customers can continue using the old API if they encounter issues with the new one. But the new API is the future, and as we add new features in future minor releases these may not be fully supported by the legacy API."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Better validation to catch accidental passing of invalid parameter values."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Faster compile times."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"upgrade-instructions","style":"position:relative;"},"children":[{"type":"text","value":"Upgrade instructions"},{"type":"element","tagName":"a","properties":{"href":"#upgrade-instructions","ariaLabel":"upgrade instructions permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In order to upgrade, you need to:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Alter the import paths to include the new API rather than the legacy API"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Pass your theme parameters to the new "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"grid-styles"}]},{"type":"text","value":" mixin instead of the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-theme-themename"}]},{"type":"text","value":" mixin"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Check the list of breaking changes below and see if you need to change any parameter values"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"altering-your-sass-import-paths-and-using-the-grid-styles-mixin","style":"position:relative;"},"children":[{"type":"text","value":"Altering your Sass import paths and using the grid-styles mixin"},{"type":"element","tagName":"a","properties":{"href":"#altering-your-sass-import-paths-and-using-the-grid-styles-mixin","ariaLabel":"altering your sass import paths and using the grid styles mixin permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"scss"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-scss"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-scss"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Legacy API"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"@import"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"~ag-grid-community/src/styles/ag-grid.scss\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"@import"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"~ag-grid-community/src/styles/ag-theme-alpine/sass/ag-theme-alpine-mixin.scss\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".ag-theme-alpine "}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"@include"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-theme-alpine"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"alpine-active-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" red\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".ag-header-cell "}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"font-style"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" italic"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// NOTE: Depending on how you have configured your Sass build the import paths may be"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// prefixed with `@`, `~`, or a relative path to `node_modules`. Keep the same style"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// of import. The above path is a sass-loader path (`~` prefix), so we edit it to:"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// New API"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"@use"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"~ag-grid-community/styles\""}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","module-modifier","keyword"]},"children":[{"type":"text","value":"as"}]},{"type":"text","value":" ag"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// ^^^ Update the import path. Note that `@import` has changed to `@use {path} as {name}`"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"@include"}]},{"type":"text","value":" ag."},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"grid-styles"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// ^^^ Include ag.grid-styles which it is no longer nested  in .ag-theme-{name} {}"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"theme"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" alpine"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// ^^^ Add the theme name to the mixin"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"alpine-active-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" red"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// ^^^ Pass the same parameters. The new API validates parameters so you will be"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"//     notified if any of the names or values you pass are not valid for the new API"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".ag-theme-alpine "}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".ag-header-cell "}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"font-style"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" italic"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// ^^^ put any custom CSS rules below the grid-styles mixin, wrapped in the theme class"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In the above example the Alpine theme is modified but not renamed. If you have renamed the theme, use the new "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"extend-theme"}]},{"type":"text","value":" parameter:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"scss"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-scss"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-scss"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Renaming Alpine ag-theme-custom-name in the Legacy API"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".ag-theme-custom-name "}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"@include"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-theme-alpine"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"alpine-active-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" red\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".ag-header-cell "}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"font-style"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" italic"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Renaming Alpine to ag-theme-custom-name in the new API"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"@include"}]},{"type":"text","value":" ag."},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"grid-styles"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"theme"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" custom-name"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"extend-theme"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" alpine"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"alpine-active-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" red"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".ag-theme-custom-name "}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".ag-header-cell "}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"font-style"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" italic"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// ^^^ put any custom CSS rules below the grid-styles mixin, wrapped in the theme class"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"grid-modules","style":"position:relative;"},"children":[{"type":"text","value":"Grid Modules"},{"type":"element","tagName":"a","properties":{"href":"#grid-modules","ariaLabel":"grid modules permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you are using grid "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.4/modules/"},"children":[{"type":"text","value":"Modules"}]},{"type":"text","value":" you will need to add the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"@ag-grid-community/styles"}]},{"type":"text","value":" module to your dependencies and alter the import paths as follows."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"scss"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-scss"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-scss"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Legacy API"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"@import"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"~@ag-grid-community/core/dist/styles/ag-grid.scss\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// New API"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"@use"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"~@ag-grid-community/styles\""}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","module-modifier","keyword"]},"children":[{"type":"text","value":"as"}]},{"type":"text","value":" ag"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"breaking-changes","style":"position:relative;"},"children":[{"type":"text","value":"Breaking changes"},{"type":"element","tagName":"a","properties":{"href":"#breaking-changes","ariaLabel":"breaking changes permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"We have tried to make the new Sass Styling API as backwards-compatible as possible, but there are a few breaking changes:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The backwards-compatibility layer introduced in v23 (released 2020) for the benefit of applications written for v22 and below has been removed. This is necessary in order to prepare for the "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/sass/sass/blob/main/accepted/module-system.md#timeline"},"children":[{"type":"text","value":"upcoming release of Sass in late 2022"}]},{"type":"text","value":" which will remove support for global variables. In practice, this means that if your application was initially created before March 2020 and you are still using the v22 method of configuring themes (setting global variables like "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"$ag-foreground-color: red;"}]},{"type":"text","value":") then you will need to switch to using the map-based configuration API that is shared by both the Legacy Sass API and the new Sass Styling API."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"borders-side-button"}]},{"type":"text","value":" used to both add a border to the side buttons (vertical tabs), and set the background color when the tab was selected. Now it only sets the border. Use "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"side-button-selected-background-color"}]},{"type":"text","value":" to set the background color."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Removed "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"full-width-tabs"}]},{"type":"text","value":". This caused the tabs to expand to fill the space available and was used by the Material theme. If you need the same effect, use CSS:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".your-theme .ag-tab"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"flex"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 1 1 auto"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Removed "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-param($param)"}]},{"type":"text","value":", a Sass function that was replaced at compile time with the value of "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"$param"}]},{"type":"text","value":". All theme variables are now dynamic. Use "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"var"}]},{"type":"text","value":" instead:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"scss"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-scss"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-scss"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// old way:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".my-element "}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-param"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"foreground-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// new way:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".my-element "}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"var"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"--ag-foreground-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// ^^^ note the --ag- prefix"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Removed "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-color-property()"}]},{"type":"text","value":", a Sass mixin that outputted a CSS variables with a fallback for IE11. It is no longer required now that IE11 is not a supported browser. Use "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"var"}]},{"type":"text","value":" instead:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"scss"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-scss"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-scss"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// old way"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".my-element "}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"@include"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"ag-color-property"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" header-foreground-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// new way"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".my-element "}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"var"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"--ag-header-foreground-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Removed "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"%ag-text-input"}]},{"type":"text","value":", a Sass placeholder selector for styling text inputs, is now a mixin:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"scss"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-scss"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-scss"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// old way"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","placeholder"]},"children":[{"type":"text","value":"%ag-text-input"}]},{"type":"text","value":" "}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #999"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// new way"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"@include"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":"ag.text-input "}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #999"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]}],"data":{"quirksMode":false}},"frontmatter":{"title":"Upgrading from the Legacy Sass API","version":null,"enterprise":null,"sideMenu":null,"description":null},"headings":[{"id":"benefits-of-the-new-api","depth":3,"value":"Benefits of the new API"},{"id":"upgrade-instructions","depth":2,"value":"Upgrade instructions"},{"id":"altering-your-sass-import-paths-and-using-the-grid-styles-mixin","depth":3,"value":"Altering your Sass import paths and using the grid-styles mixin"},{"id":"grid-modules","depth":3,"value":"Grid Modules"},{"id":"breaking-changes","depth":3,"value":"Breaking changes"}]}},"pageContext":{"frameworks":["javascript","react","angular","vue"],"framework":"javascript","srcPath":"/global-style-upgrading-to-v28-sass","pageName":"global-style-upgrading-to-v28-sass"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}