SCSS color VSCode about onedarkpro.nvim HOT 13 CLOSED

So after doing some digging, this is the best I can come up with:

Your settings should be:

filetype_hlgroups = {
	scss = {
		TSFunction = { fg = "${cyan}" },
		TSProperty = { fg = "${orange}" },
		TSPunctDelimiter = { fg = "${orange}" },
		TSType = { fg = "${red}" },
	},
}

Basically, Treesitter groups nearly everything in an scss file as TSProperty so we're really limited as to how much detail we can specify for the highlight groups.

from onedarkpro.nvim.

Running it through TSPlayground I get:

Seems Treesitter ignores it. Normally you would expect something like:

from onedarkpro.nvim.

@Asterovim tnis is covered in the readme under filetype highlighting 👍🏼️

from onedarkpro.nvim.

No but you can follow what I did in my commmit and send a PR. ChatGPT is a great tutor for Treesitter queries btw

from onedarkpro.nvim.

Could you paste your scss code and I can take a look.

from onedarkpro.nvim.

Could you paste your scss code and I can take a look.

Thanks you 👍

.entete-twitter {
  display: flex;
}
.field--name-field-tweet-content {
  margin-left: rem-calc(50);
}
.field--name-field-tweet-user {
  a {
    text-decoration: none;
    &:before {
      content: "@";
    }
  }
}

.bloc-partenaires {
  background: $zurb-color-grey;
  .field--name-dynamic-twig-fieldblock-content-bloc-des-partenaires {
    @include xy-grid-container($width: $container-home);
    text-align: center;
    #zf-splide-partenaires-accueil-list {
      align-items: center;
    }
    .field--type-image {
      text-align: center;
    }
  }
}

from onedarkpro.nvim.

So after doing some digging, this is the best I can come up with:

Your settings should be:

filetype_hlgroups = {
	scss = {
		TSFunction = { fg = "${cyan}" },
		TSProperty = { fg = "${orange}" },
		TSPunctDelimiter = { fg = "${orange}" },
		TSType = { fg = "${red}" },
	},
}

Basically, Treesitter groups nearly everything in an scss file as TSProperty so we're really limited as to how much detail we can specify for the highlight groups.

Thanks you so much.

Last question please, there is a way to change the color of "$zurb_color_grey" variable ?

from onedarkpro.nvim.

Thanks you 💯

from onedarkpro.nvim.

Hi,

I have a code that I would like to use, which looks like this:

require("onedarkpro").setup({
  highlights = {
    ["@variable"] = { fg = "#293184" },
  }
})

I want to apply this code only to SCSS files. Can you give me an example of how to accomplish this please? Also, is it possible to include other file types like .less + .scss ?

Thank you.

from onedarkpro.nvim.

@Asterovim tnis is covered in the readme under filetype highlighting 👍🏼️

Thanks you.

I have try :

require("onedarkpro").setup({
  colors = {
    whiskey = "#d19a66";
  },
  highlights = {
  ["@property.scss"] = { fg = "${whiskey}" },
  }
})

It's works.

But, i would like to select @class_name and it didn't work :(

If i use :TSHighlightCapturesUnderCursor my class name is "@Property" and my code like (background-color) is also "@Property".

any idea ? thanks you.

from onedarkpro.nvim.

I've just played around with some SCSS...the Treesitter parser doesn't define many highlights so this will need some custom queries

from onedarkpro.nvim.

@Asterovim I've just added additional scss support in d7513a7. Had to write some custom Treesitter queries to get it looking okay. Let me know what you think.

Before

After

Visual Studio Code

from onedarkpro.nvim.

@Asterovim I've just added additional scss support in d7513a7. Had to write some custom Treesitter queries to get it looking okay. Let me know what you think.

Before

After

Visual Studio Code

Thanks you so mutch. It's very very good.

One question please.

There is a way to improve : after/queries/scss/highlights.scm and lua/onedarkpro/highlights/filetypes/scss.lua via config ?
So i can help you to improve it. I have see another small problem like :

@font-face {
  font-family: "important-semi-bold";
  src: url("../../../fonts/Oswald/Oswald-SemiBold.ttf") format("truetype");
}
.testselector {
  &-children {
    color: red;
  }
}

VSCODE :


Neovim :

from onedarkpro.nvim.