号在html中的作用,css中的--号有什么作用？

在项目中引用了bootstrap，发现它的样式表里存在这种格式的代码：

:root {

--blue: #007bff;

--indigo: #6610f2;

--purple: #6f42c1;

--pink: #e83e8c;

--red: #dc3545;

--orange: #fd7e14;

--yellow: #ffc107;

--green: #28a745;

--teal: #20c997;

--cyan: #17a2b8;

--white: #fff;

--gray: #868e96;

--gray-dark: #343a40;

--primary: #007bff;

--secondary: #868e96;

--success: #28a745;

--info: #17a2b8;

--warning: #ffc107;

--danger: #dc3545;

--light: #f8f9fa;

--dark: #343a40;

--breakpoint-xs: 0;

--breakpoint-sm: 576px;

--breakpoint-md: 768px;

--breakpoint-lg: 992px;

--breakpoint-xl: 1200px;

--font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";

--font-family-monospace: "SFMono-Regular",Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;

}

请问这种类型的样式合法吗？应该怎么使用？