Fatal编程技术网
  • css/
  • Css 如何使用sass为用户提供多个主题选项

Css 如何使用sass为用户提供多个主题选项

css sass

Css 如何使用sass为用户提供多个主题选项,css,sass,themes,Css,Sass,Themes,我试图为网站提供多个主题。我知道如何使用sass。据我所知，步骤如下 创建sass文件 sass文件已预处理 将创建相应的css文件 这意味着css文件已经正确编写（通过sass或直接css）并在html文件中使用。但我想要实现的方式是，有一个选项框允许用户使用主题。无论用户单击什么主题，新选择的主题都会立即应用到html页面中。我如何通过使用sass实现这一点？如果你有这样的经验，你能给我一些概念吗？有几种不同的方法，但一种选择是为每个主题设置父类，以容纳特定于这些主题的样式 例如，SCSS：

我试图为网站提供多个主题。我知道如何使用sass。据我所知，步骤如下

  • 创建sass文件
  • sass文件已预处理
  • 将创建相应的css文件
    • 这意味着css文件已经正确编写（通过sass或直接css）并在html文件中使用。但我想要实现的方式是，有一个选项框允许用户使用主题。无论用户单击什么主题，新选择的主题都会立即应用到html页面中。我如何通过使用sass实现这一点？如果你有这样的经验，你能给我一些概念吗？

    有几种不同的方法，但一种选择是为每个主题设置父类，以容纳特定于这些主题的样式

    例如，SCSS：

    .dark-theme {
    .content {
        background: #333;
        color: #fff;
    }
}

.light-theme {
    .content {
        background: #eee;
        color: #333;
    }
}

    <body class="dark-theme">
    ...
</body>
    然后，当用户选择主题时，您可以使用javascript更改顶级元素上的类，例如
    主体
    ：

    HTML：

    .dark-theme {
    .content {
        background: #333;
        color: #fff;
    }
}

.light-theme {
    .content {
        background: #eee;
        color: #333;
    }
}

    <body class="dark-theme">
    ...
</body>

    
...
    JS：
    看看这个答案

    有几种不同的方法，但一种选择是为每个主题设置父类，以容纳特定于这些主题的样式

    例如，SCSS：

    .dark-theme {
    .content {
        background: #333;
        color: #fff;
    }
}

.light-theme {
    .content {
        background: #eee;
        color: #333;
    }
}

    <body class="dark-theme">
    ...
</body>
    然后，当用户选择主题时，您可以使用javascript更改顶级元素上的类，例如
    主体
    ：

    HTML：

    .dark-theme {
    .content {
        background: #333;
        color: #fff;
    }
}

.light-theme {
    .content {
        background: #eee;
        color: #333;
    }
}

    <body class="dark-theme">
    ...
</body>

    
...
    JS： 看看这个答案

    您可以使用。不适用于IE=（但太神奇了

    /*通用css*/
p{
颜色：var（--颜色）；
字体大小：var（--字体大小）；
字体系列：var（--字体系列）；
}
    前缀为--（如--example name）的属性名称表示自定义属性，这些属性包含一个值，该值可以在使用var（）函数的其他声明中使用
    
：根{
--颜色：红色；
--字体大小：20px；
--字体系列：无衬线；
}
    您可以使用。在IE=（但太神奇了！）

    /*通用css*/
p{
颜色：var（--颜色）；
字体大小：var（--字体大小）；
字体系列：var（--字体系列）；
}
    前缀为--（如--example name）的属性名称表示自定义属性，这些属性包含一个值，该值可以在使用var（）函数的其他声明中使用
    
：根{
--颜色：红色；
--字体大小：20px；
--字体系列：无衬线；
}
    啊，看起来简单明了。我会试试。非常感谢！！我真的很抱歉反应太晚。我有一个问题。scss文件也必须转换成css文件，然后转换后的css文件链接到html文件中？正确，如果你想使用Sass编写css样式，你必须将其转换为css，以便浏览器成为一个浏览器然后在html中，您可以包含“外部样式表”在head标签
    啊，它看起来简单明了。我会试试。非常感谢！！我真的很抱歉反应太晚。我有一个问题。scss文件也必须转换成css文件，然后转换的css文件链接到html文件中？正确，如果你想用Sass编写css样式，你必须将它转换成css让浏览器能够加载它。然后在html中，您可以在head标签中包含“外部样式表”