Sass入门

1.sass是什么：

sass是css的辅助工具，是预处理技术，在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。

2.语法格式：

分为两种scss和sass

scss:在css3中全部通用，支持浏览器，加入sass特色功能

sass：最早的一种语法格式

3.相互转换：

sass-convent:

4.变量：

sass用$标识变量，并且中划线和下划线都可以识别

5.嵌套guize：Sass 允许将一套 CSS 样式嵌套进另一套样式中

5.1：父级选择器：

标识符 "$"

a{
    text-decoration: none;
    &:hover{
        color: blue;
    }
}
#div1{
    font-size: 20px;
    a{
        text-decoration: none;
    }
    &:hover{
        color: yellow;
    }
}

css中显示为：

父选择器
a {
  text-decoration: none;
}

父选择器
a:hover {
  color: blue;
}

#div1 {
  font-size: 20px;
}

#div1 a {
  text-decoration: none;
}

#div1:hover {
  color: yellow;
}

5.2：群组选择器：","

群组选择器
#div3{
    a,p{
        
    width: 100px;
    height: 100px;
    }
}

css中显示为：

群组选择器
#div3 a, 群组选择器
#div3 p {
  width: 100px;
  height: 100px;
}

5.3:属性嵌套：

属性嵌套
#div2{
    font: {
        family:楷体;
        size: 30px;
    }
}

css中显示为：

#div2 {
  font-family: 楷体;
  font-size: 30px;
}

5.4层次嵌套：>(子代选择器)，+:(兄弟选择器)，~:(相邻选择器)

层次选择器
#div4>p{
    color: bisque;
}
#div5+a{
    color:red ;
}

css中显示为：

层次选择器
#div4 > p {
  color: bisque;
}

#div5 + a {
  color: red;
}

6.sass文件导入：@import  url(）或者"_name"

7.注释：/*  */