SASS基础

Sass是一个将脚本解析成css的脚本语言，即SassScript。Sass包括两套语法。最开始的语法叫做“缩进语法”，与类似，使用缩进来区分代码块，并且用回车将不同规则分隔开。而较新的语法叫做“SCSS”，使用和CSS一样的块语法，即使用大括号将不同的规则分开，使用分号将具体的样式分开。通常情况下，这两套语法通过.sass和.scss两个文件扩展名区分开

大致就是scss可以实时转换成css文件

 

Sass 嵌套 CSS 选择器类似于 HTML 的嵌套规则。

如下我们嵌套一个导航栏的样式：

header {
    width: 100%;
    height: 40px;
    background-color: black;
    nav {
        width: 1200px;
        height: 40px;
        margin: 0 auto;
        background-color: red;
        ul {
            display: flex;
            justify-content: space-between;
            li {
                list-style: none;
                a {
                    display: inline-block;
                    text-decoration: none;
                    color: white;
                    width: 100px;
                    height: 40px;
                    text-align: center;
                    line-height: 40px;
                }
                &:hover a {
                    border-bottom: 5px solid green;
                    color: black;
                    background-color: white;
                }
            }
        }
    }
}

css代码

header {
  width: 100%;
  height: 40px;
  background-color: black;
}
header nav {
  width: 1200px;
  height: 40px;
  margin: 0 auto;
  background-color: red;
}
header nav ul {
  display: flex;
  justify-content: space-between;
}
header nav ul li {
  list-style: none;
}
header nav ul li a {
  display: inline-block;
  text-decoration: none;
  color: white;
  width: 100px;
  height: 40px;
  text-align: center;
  line-height: 40px;
}
header nav ul li:hover a {
  border-bottom: 5px solid green;
  color: black;
  background-color: white;
}

可以给属性设置变量

//定义变量与值 
$bgcolor: lightblue;
$color: darkblue;
$fontsize: 18px;

//使用变量 
body {
  background-color: $bgcolor;
  color: $color;
  font-size: $fontsize;
}

 效果依然存在