我在我的网站上采用了“移动优先”的方法,并使用SCSS。
我有3个SCSS样式表:
base.scss
(适用于所有设备)medium.scss
(窗口宽度>= 768px)large.scss
(窗口宽度>= 1024px)
它们是这样提供的:
<link rel="stylesheet" href="/css/base.css" type="text/css" />
<link rel="stylesheet" href="/css/medium.css" type="text/css" media="only screen and (min-width: 767px)" />
<link rel="stylesheet" href="/css/large.css" type="text/css" media="only screen and (min-width: 1023px)" />
换句话说,
large.scss
不知道 base.scss
中的 css 内容,但我需要在 large.scss
中扩展驻留在 base.css
中的类。我该怎么办呢?
我尝试将我需要扩展的元素(例如按钮)分离到单独的样式表中,然后在
medium.scss
中使用 @import 'buttons.scss';
,但是这会导致 buttons.scss
中的所有 css 也会在该样式表中呈现。是否有任何方法可以使 base.scss 中的类在编译 css 时暴露给 SASS "渲染引擎",以便它们可以在 medium.scss 中使用?
@import
时,SASS/SCSS现在支持跨文件的@extend
。 - GeReV