在不使用@import的情况下,可以使用SCSS的mixin和extend功能来将全局样式应用于html和body标签。
首先,创建一个名为_global.scss的文件,用于存放全局样式。在该文件中定义所需的全局样式,例如:
$primary-color: #007bff;
@mixin global-styles {
html, body {
font-family: Arial, sans-serif;
color: $primary-color;
}
}
接下来,在需要应用全局样式的SCSS文件中,使用@include指令引入_global.scss文件,并调用定义的mixin:
@import 'global';
@include global-styles;
这样,全局样式就会被应用于html和body标签。
SCSS的extend功能也可以实现类似的效果。首先,在_global.scss文件中定义一个占位符选择器:
$primary-color: #007bff;
%global-styles {
font-family: Arial, sans-serif;
color: $primary-color;
}
然后,在需要应用全局样式的SCSS文件中,使用@extend指令继承定义的占位符选择器:
@import 'global';
html, body {
@extend %global-styles;
}
这样,全局样式也会被应用于html和body标签。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云容器服务(TKE)。
领取专属 10元无门槛券
手把手带您无忧上云