scss用法

他们是 CSS 预处理器。结构清晰，便于扩展。 可以方便地屏蔽浏览器私有语法差异。封装对浏览

器语法差异的重复处理， 减少无意义的机械劳动。 可以轻松实现多重继 承。 完全兼容 CSS 代

码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩 展，所 以老的 CSS 代码也可

以与 LESS 代码一同编译。

1.1嵌套规则:

div {
  >nav{
      p,span{
          color: red;
          border: {
              style:solid;
              radius:20px;
              
          }
      }
  }
}

1.2父选择器&

a{
          color: red;
          &:hover{
              color: red;
              
          }

使用scss完成页面

header {
    width: 100%;
    height: 50px;
    background-color: #000;

    ul {
        width: 1200px;
        display: flex;
        justify-content: space-around;
        line-height: 50px;
        background-color: red;
        margin: 0 auto;
    }

    ul li {
        display: inline-block;
        text-align: center;
        width: 70px;

        &:hover {
            background-color: orange;
        }

        a {
            text-decoration: none;
            color: #fff;
        }
    }
}

article {
    width: 1200px;
    margin: 0 auto;

    ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    ul li {
        display: inline-block;
        width: 352px;
        height: 200px;
        margin-bottom: 20px;
        box-shadow: 10px 10px 5px #ccc;

        a {
            color: #000;
            text-decoration: none;
        

        img {
            width: 200px;
            height: 200px;
            float: left;
        }

        span {
            display: inline-block;
            width: 15px;
            height: 15px;
            background: url(../img/ico.png)  0 -99px ;
            background-size: 40px;
            

            &:hover {
                width: 15px;
                height: 15px;
                background: url(../img/ico.png) no-repeat -11px -74px;
            }
        }
    }
    }
}