一般来说，大家可以使用浏览器的开发者工具来调试CSS和Sass。在Chrome浏览器中，大家可以通过右键单击网页并选择“检查”来打开开发者工具。在“元素”选项卡中，可以在样式面板中查看元素的CSS样式。

/*样式面板中的CSS*/
body{
font-size: 16px;
background-color: #f8f8f8;
}
h1{
font-size: 36px;
font-weight: bold;
color: #333;
}

如果一些样式没有如预期般生效，可以使用以下方法进行调试：

1. 检查CSS选择器：确保CSS选择器选择的是正确的元素。在开发者工具中选中元素，查看它的CSS选择器是否与你编写的样式相同。

/*CSS样式*/
button.primary{
background-color: blue;
}
/*元素*/提交

2. 检查样式优先级：如果多个选择器都适用于同一元素，浏览器将根据它们的优先级决定哪个样式最终生效。可以通过查看样式面板中的“计算样式”来查看每个样式的具体优先级。

/*CSS样式*/
button{
background-color: red;
}
button.primary{
background-color: blue;
}
/*元素*/提交

3. 检查样式继承：一些属性可以继承自父元素，例如字体、颜色。如果你想更改一个元素的继承属性，可以在样式中指定该属性。

/*CSS样式*/
body{
font-size: 20px;
color: #333;
}
h1{
font-size: inherit;
color: inherit;
}
/*元素*/
标题

4. 测试样式：一些属性只在特定情况下生效，例如:hover或:focus。可以在开发者工具的元素面板中模拟这些情况来查看样式是否生效。

/*CSS样式*/
button:hover{
background-color: blue;
}
/*元素*/提交

总结：调试CSS和Sass的过程不需要过于复杂，只需要掌握以上方法即可。希望本文对大家有所帮助！