css at-rule unknown: @include

[deredgar]

Issue Type: Bug

[css] at-rule unknown: @include

Write the following lines into a css-file:

@include media-breakpoint-up(sm) {
html {
font-size: 1.2rem;
}
}

Three errors appears:

1. Red underline at @include:[css] at-rule unknown
2. Red underline at first opening round bracket: [css] { expectet
3. Red underline at penultimate closing curly bracket: [css] at-rule or selector expected

More precisely: I pasted the bootstrap code for Responsive typography. You can find it here:https://getbootstrap.com/docs/4.1/content/typography/#responsive-typography.

This is the code:

html {
font-size: 1rem;
}

@include media-breakpoint-up(sm) {
html {
font-size: 1.2rem;
}
}

@include media-breakpoint-up(md) {
html {
font-size: 1.4rem;
}
}

@include media-breakpoint-up(lg) {
html {
font-size: 1.6rem;
}
}

Definitely I don't understand something here. Well, maybe it's not a vscode problem, it's me. But any help would be great. Because I do not want to switch to another source code editor because I do not understand it. Vscode is great. I know an update is available. Maybe that's it? But I use the package management of Arch-linux. And there is still no update.

VS Code version: Code 1.23.0 (7c7da59, 2018-05-03T15:23:19.356Z)
OS version: Linux x64 4.14.48-2-MANJARO

System Info

Item	Value
CPUs	Intel(R) Core(TM) i7-3720QM CPU @ 2.60GHz (8 x 1714)
GPU Status	2d_canvas: enabled flash_3d: enabled flash_stage3d: enabled flash_stage3d_baseline: enabled gpu_compositing: enabled multiple_raster_threads: enabled_on native_gpu_memory_buffers: disabled_software rasterization: disabled_software video_decode: unavailable_software video_encode: enabled vpx_decode: unavailable_software webgl: enabled webgl2: enabled
Load (avg)	2, 2, 1
Memory (System)	15.30GB (9.74GB free)
Process Argv	/opt/visual-studio-code/code
Screen Reader	no
VM	0%

Extensions (5)

Extension	Author (truncated)	Version
vscode-language-pack-de	MS-	1.23.3
vscode-css-formatter	aes	1.0.1
live-html-previewer	hdg	0.3.0
LiveServer	rit	5.1.1
open-in-browser	tec	1.1.0

[octref]

@include is a SASS feature not CSS feature.
Alternatively, you can turn the warning off by

  "css.lint.unknownAtRules": "ignore"

[deredgar]

Oh yeah. This is really great. I got it now. Thank you very much octref.