根据设备屏幕更改字体颜色的 Sass 功能答案

【问题标题】：Sass function that changes font color based on device screen根据设备屏幕更改字体颜色的 Sass 功能
【发布时间】：2019-03-14 14:45:59
【问题描述】：

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

我对 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)
}

【问题讨论】：

你尝试过媒体查询吗？
是的！我知道我可以通过媒体查询来做到这一点，但是由于视频将来会发生变化，我想要一个功能，以便需要最小的变化。但如果媒体查询是最简单的解决方案，那么我会这样做。
mixin/function 中的媒体查询怎么样？

标签： css sass mixins

【解决方案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 就像创建一个组件的“模板”。例如。 : 一个按钮

@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");
}

希望我能帮上忙

【讨论】：

【解决方案2】：

也许您可以只使用 css 媒体查询来做到这一点：

@media screen and (min-width: 980px) {
  body {
    color: red;
  }
}
@media screen  and (max-width: 979px) {
  body {
    color: blue;
  }
}

@media screen and (max-width: 500px) {
  body {
    color: green;
  }
}

【讨论】：