问题描述
- 项目的样式部分使用的是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的父选择器定义样式
- 因此总结一下，只要看到&就是一个选择器而已
-
