时间戳

首页 > 解决方案 > 根据设备屏幕更改字体颜色的 Sass 功能

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

问题描述

我正在寻找一种方法来创建一个 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)
}

标签： csssassmixins

解决方案

我不认为你真的需要为此使用 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");
}

希望我能帮上忙

推荐阅读