使用 typescript 在类级别应用 scss 值

Posted 2023-03-06

【中文标题】使用 typescript 在类级别应用 scss 值

【英文标题】：Apply scss value at class level using typescript

【发布时间】：2017-10-08 23:23:04

【问题描述】：

let getClasses = document.getElementsByClassName('sidebar');
    for (var i = 0; i < getClasses.length; i += 1) 
        getClasses[i].style.display = 'block';
    

我有这段代码，但它的作用是在元素级别而不是在类级别更改 div 的显示属性。 因此，当我的值在媒体查询中的类级别再次更改时，它不会被应用，因为它没有所需的优先级并且元素的值保持不变。

【问题讨论】：

你知道SCSS和CSS的区别吗？哪些可以和JS一起使用？

我知道两者之间的区别，但我不知道哪一个可以与 JS 一起使用。而且我想用打字稿而不是javascript来使用它

SCSS 之于 CSS 就像 Typescript 之于 JavaScript。 SCSS 和 Typescript 都只是花哨的语言，它们仍然可以“编译”到它们后来的对应物。 JS 与 CSS 交互。 Typescript 是 Javascript，添加了花哨的东西。

我建议在使用 Typescript 之前先学习如何将 DOM 与 JS 一起使用。

【参考方案1】：

为什么不创建一个改变显示的类：

.block-display
    display: block;
 

然后在您的 javascript 代码中，添加类，而不是像：

let getClasses = document.querySelector('.sidebar')
for (let i = 0; i < getClasses.length; i++)
    let class = getClasses[i]
    class.classList.add('block-display')

希望对您有所帮助。

【讨论】：

绝对是一种更好的方法 - 但是在 class.classList.add(block-display) 的行上缺少引号，它应该是 class.classList.add('block-display')

感谢您发现这一点。做出改变