Sass特点
- Sass 扩展了 CSS3,增加了规则、变量、混入、选择器、继承、内置函数等等特性
- Sass 是 CSS 扩展语言,可以帮助我们减少 CSS 重复的代码,节省开发时间
- Sass 生成良好格式化的 CSS 代码,易于组织和维护
- Sass 文件后缀为 .scss
1.Sass变量的使用
定义变量使用$符号开头
$bgcolro:red;
.box {
width: 200px;
height: 200px;
border: {
style: solid;
width: 10px;
color: $bgcolro
}
}
效果图:
2.Sass嵌套(他们的效果是一样的)
header ul {
width: 400px;
height: 200px;
list-style: none;
background-color: aqua;
}
header ul li {
width: 60px;
height: 15px;
float: left;
}
header ul li a {
text-decoration: none;
}
header ul li a:hover {
color: #fff;
}
/* 一般我们都是写成上面的格式但是S