sass样式嵌套的学习与基本写法

Sass(Scss)是世专业级CSS扩展语言，兼容CSSSass完全兼容所有版本的CSS,可以无缝地使用任何可用的CSS库。

简单来说，SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。

嵌套规则： Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器

 

1. 一般情况的嵌套

sass的嵌套主要解决的就是需要多层来选择的dom元素，不需要重复选择相同的层级

例：

style.scss文件

.nav{
    height: 50px;
    width: 100%;
    ul {
        list-style: none;
        li {
            float: left;
            width: 20px;
            height: 50px;
        }
    }
}

输出之后的style.css文件

.nav {
  height: 50px;
  width: 100%;
}
.nav ul {
  list-style: none;
}
.nav ul li {
  float: left;
  width: 20px;
  height: 50px;
}

2. 有伪类或者多个选择器选择一个元素的情况

这种情况需要用到&，来表示连接，提示它中间不要加空格。

用 & 代表嵌套规则外层的父选择器

例：
style.scss文件

.nav{
    height: 50px;
    width: 100%;
    ul {
        list-style: none;
        li {
            float: left;
            width: 20px;
            height: 50px;
        }
        a {
            display: block;
            width: 20px;
            height: 50px;
            &:hover {
                color: green;
            }
        }
    }
    &.navbar {
        color: green;
    }
}

编译好的style.css文件

编译后的 CSS 文件中 & 将被替换成嵌套外层的父选择器，如果含有多层嵌套，最外层的父选择器会一层一层向下传递

.nav {
  height: 50px;
  width: 100%;
}
.nav ul {
  list-style: none;
}
.nav ul li {
  float: left;
  width: 20px;
  height: 50px;
}
.nav ul a {
  display: block;
  width: 20px;
  height: 50px;
}
.nav ul a:hover {
  color: green;
}
.nav.navbar {
  color: green;
}

3. 属性的嵌套

重复属性的嵌套

Sass 允许将属性嵌套在命名空间中，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间
语法：font：{size：...； weight：...；}

例：
style.scss文件

body {
    font: {
        size: 30px;
        weight: 600;
        style: normal;
    }
}

编译之后的style.css文件

body {
  font-size: 30px;
  font-weight: 600;
  font-style: normal;
}