sass中的一些事

问题描述

• 项目的样式部分使用的是scss后缀的文件。一直以为他跟sass应该是一个东西，一直没有办法区分他们之间的区别
• 经常看到项目中大家花式使用&作为css小白真心不太明白这个东西，决心一探究竟

问题解答

• Q1:sass和scss之间的关系
• A1:SASS文件就是普通的文本文件，文件后缀名可以是.scss或者.sass:
  • .sass:不使用大括号和分号，使用严格缩进
  • .scss:使用大括号和分号，可以使用css语法

• Q2:sass和less共同点？

• A2：共同点：
  - 都是css的预处理器，换句话说，都是自己定义了一套书写规则，可以看成一种编程语言，再编译成正常的CSS文件，以供项目使用
  - 都可以将css变成一种编程语言来写

  区别：
  - 由于有教程就不赘述了
    - less：http://www.bootcss.com/p/lesscss/#docs
    - sass：http://www.sasschina.com/guide/
    - css预处理器：http://efe.baidu.com/blog/revisiting-css-preprocessors/
  

• Q3:sass和less中都有的&是什么？

• A3:&是专门用来代指父选择器：

  • &存在的原因
    - css中每一个父子关系的样式都需要写明： 父 子{}
    - 但是sass中父子关系就是： 父{ 子{} }
    - 因此当父想定义自己伪类的样式 就必须再单独写出来一个： 父:hover{}
    - 所以&的出现是为了满足父只出现一次
  • &的使用：
    - 在父的定义中（大括号中）代表父元素
  • 例子：

  //css
  .father:hover{
        color: red;
  }
  
  .father p{
        font-size:16px;
  }
  
  //scss
  
  .father{
        font-size:16px;
        &:hover{
            color: red;
        }
  }
  
  // 把&完全当成一个选择器即可（父选择器）
  

  ---

  Q4: 那么经常会见到的&.className是什么意思呢？
  A4: 在css中有组合选择器：

    - 选择器1 选择器2{
      给选择器1的所有子辈中是选择器2的元素定义样式
    }
    - 选择器1>选择器2{
      给选择器1的所有直系孩子中是选择器2的元素定义样式
    }
    - 选择器1,选择器2{
      给选择器1和选择器2定义样式
    }
    - 选择器1选择器2{
      给既满足选择器1又满足选择器2的元素定义样式
    }
    - 参见：https://zhuanlan.zhihu.com/p/27219922
  

  那么，&如果代表父选择器，那么等价于css中选择器1选择器2，这个意思就是 给类名是className的父选择器定义样式

  • 因此总结一下，只要看到&就是一个选择器而已