css - 根据设备屏幕更改字体颜色的 Sass 函数

Question

我正在寻找一种方法来创建一个 sass 函数，将我的字体颜色从白色(在桌面上)更改为黑色(在平板电脑和移动设备上)。原因是我在桌面上的视频上叠加文本，但在移动设备上，叠加的文本切换到视频下方的 block 文本，因此字体颜色需要更改为黑色。

我对 sass 比较陌生，但到目前为止我已经尝试过将其作为 mixin(没有用)

** 我知道这可以用 css 来完成，但我希望让它更加动态和可重用 **

$color-media-sizes: (
"max1024": #000 or #fff,
 null: #000 or #fff
);

有这个功能

@function color($mobile-color, $desktop-color){
    @return ($mobile-color $desktop-color)
}

Answer 1

我不认为你真的需要为此使用 SASS，CSS 就可以了。只需根据您的设备屏幕放置媒体查询和颜色(来源:https://gist.github.com/gokulkrishh/242e68d1ee94ad05f488)

阅读此文档，它将帮助您理解媒体查询:https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {

/* CSS */

}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {

/* CSS */

}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {

/* CSS */

}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

/* CSS */

}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {

/* CSS */

}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {

/* CSS */

}

SASS 中的 Mixin 就像创建一个组件的"template"。例如。 : 一个按钮

@mixin button($text, $background) {
     background: $background;       
     border-radius: 10px;
     color: $text;                 
     padding: 0 15px;
     text-decoration: none;
     text-transform: uppercase;
}

// Then you can call it this way :
.success-button {
    @include button("#FFF", "#0F0");
}
.error-button {
    @include button("#FFF", "#F00");
}

希望能帮到你