学习前端第十三天（搜索栏制作，SASS预处理器）

一、搜索栏制作

1、使用div、input、button确定html框架

2、使用弹性布局，字符图标确定大致形状

3、最后调整样式

思路最重要，先框架后排版最后样式

二、SASS预处理器

1、变量   

      例：

      $fontcolor：green

      div { color：$fontcolor }

      方便后期进行统一修改。

      如果要在字符串中引用变量，变量需要写在  #{  }  中

      例：

      $align：left

      div{ border-#{$align}-color：green }

2、计算

      +   -   *   /

      6px + 10px

      （100px / 2）

      符号左右需加上“空格”，除法需在计算前后加上括号

3、嵌套

      选择器嵌套和属性嵌套

      div{

         .class{

              span{  }

         }

     }

div{

     border{

           color{}

           weight{}

      }

}

4、引用父元素&，这时候“hover”是紧跟在“a”后面的

  .class{

          a{ 

              &:hover{    }

            }               

   }