Skip to content

Latest commit

 

History

History
244 lines (187 loc) · 5.96 KB

settings.md

File metadata and controls

244 lines (187 loc) · 5.96 KB

Settings

liveSassCompile.settings.formats
An array of formats. Allows you save to multiple locations, with a customisable format and extension for each

Each format will have the following items:

  • format: the output format of the generated file
    expanded, or compressed.
    Default is expanded

  • extensionName: the extension applied to the generate file
    .css or .min.css.
    Default is .css

  • savePath, savePathSegmentKeys and savePathReplaceSegmentsWith: these dictate the save path (see examples)

Default & examples 
"liveSassCompile.settings.formats": [
    // This is the default.
    {
        "format": "expanded",
        "extensionName": ".css",

        // null for all three -> denotes the same path as the SASS file
        "savePath": null,
        "savePathSegmentKeys": null,
        "savePathReplaceSegmentsWith": null
    },
    // You can add more
    {
        "format": "compressed",
        "extensionName": ".min.css",

        // / -> denotes relative to the workspace root
        "savePath": "/dist/css"
    },
    // More Complex
    // (See issue 26: https://github.com/ritwickdey/vscode-live-sass-compiler/issues/26)
    {
        "format": "nested",
        "extensionName": ".min.css",

        // ~ -> denotes relative to each sass file
        "savePath": "~/../css/"
    },
    // Segment replacement example
    {
        "format": "compact",
        "extensionName": ".min.css",

        // "/Assets/SCSS/main.scss" -> translates to "/Assets/Style/main.css"
        // "/Assets/_SASS/main.sass" -> translates to "/Assets/Style/main.css"
        "savePathSegmentKeys": [
            "SCSS",
            "_SASS"
        ],
        "savePathReplaceSegmentsWith": "Style",
    // Segment replacement ONLY applied if "savePath" is null
    {
        "format": "compressed",
        "extensionName": ".min.css",

        // "/Assets/SCSS/main.scss" -> translates to "/dist/css/main.css" NOT "/Assets/Style/main.css"
        "savePath": "/dist/css",
        "savePathSegmentKeys": [
            "SCSS"
        ],
        "savePathReplaceSegmentsWith": "Style"
    }
]
liveSassCompile.settings.excludeList
Exclude specific files and folders.

Use a glob pattern to exclude files or entire folders. All matching SASS/SCSS files or folders will be ignored.

Default & examples

Default

"liveSassCompile.settings.excludeList": [ 
    "**/node_modules/**",
    ".vscode/**" 
]

Negative glob pattern
To exclude all files except file1.scss & file2.scss from the directory path/subpath, you can use the expression:

"liveSassCompile.settings.excludeList": [
    "path/subpath/*[!(file1|file2)].scss"
]
liveSassCompile.settings.includeItems
Process only these specified files

Useful for when you deal with only few of sass files.

  • NOTE: no need to include partial sass files.
  • Default: null
Examples

Example

"liveSassCompile.settings.includeItems": [
    "path/subpath/a.scss",
    "path/subpath/b.scss",
]
liveSassCompile.settings.generateMap
Create a map file when compiling files

Set it as false if you don't want a .map file for compiled CSS.

  • Default: true.
liveSassCompile.settings.autoprefix
Autoprefix unsupported CSS properties (e.g. transform -> -ms-transform)

Specify what browsers to target with an array of strings (uses Browserslist).

Default 
"liveSassCompile.settings.autoprefix": [
    "> 0.5%",
    "last 2 versions",
    "Firefox ESR",
    "not dead"
]
liveSassCompile.settings.showOutputWindow
Optionally displays the output window when compiling

Set this to false if you do not want the output window to show.

  • NOTE: You can use the command palette to open the Live Sass output window.
  • Default: true
liveSassCompile.settings.watchOnLaunch
Defines whether Live Sass should watch immediately over waiting to be started

Set this to true to watch files on launch.

  • Default: false
liveSassCompile.settings.compileOnWatch
Defines whether Live Sass should compile all files when it starts watching

Set this to false if you don't want all Sass files to be compiled when Live Sass Compiler starts watching.

  • Default: true
liveSassCompile.settings.forceBaseDirectory
Defines a subdirectory to search from (speed gains on larger projects)

Larger projects can have performance problems, using this to target just your sass folder will provide performance gains.

No Sass/Scss files outside of this folder will be watched/compiled when you save.

  • Default: null
  • Note: No leading slash but MUST have ending slash
    • Example: src/style/
  • Note for multi-root workspaces: This setting can be applied at workspace level. However, it can be overridden in each root using that root's specific setting file
    • Example: workspace setting is src/Sass/ and root setting is Assets/Style/. In this case Assets/Style/ would be used

:Warning: It is your responsibility to ensure the path exists and is correct.
If it's not found it will output an error
If the path is wrong then nothing will be found and then compiled