五一遇疫情 & 居家学VUE
一、前言
emmm,记得好多年前,写前端最苦难的并不是 html 本身,而是 css。 特别是自己命名和别人的命名。
举个例子:某宝网站 h4 的标签
.hotsale-item h4 {
margin-top: 9px;
line-height: 22px;
height: 44px;
font-size: 16px;
color: #111111;
font-weight: normal;
transition: color 0.3s;
overflow: hidden;
text-overflow: -o-ellipsis-lastline;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
}
blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul {
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
}
blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul {
margin: 0;
padding: 0;
}
h4 {
display: block;
margin-block-start: 1.33em;
margin-block-end: 1.33em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}
二、安装
npm i node-sass sass-loader style-loader -D
三、使用
指定标签语言为 scss
<style lang="scss" scoped>
// 嵌套样式
.bg {
margin: auto;
width: 1280px;
height: 720px;
background-color: #f7f5e8;
.tl {
width: 380px;
height: 40px;
background-color: #453454;
}
}
</style>
浏览器渲染效果
四、总结
Vue 安装 Scss 特别简单,后续可以慢慢养成写 Scss 的习惯。当然,也可以选择 Less,它跟 Scss 都是 css 的预处理语言。