Scss学习总结

最近项目中在做一些易用性的bug修复，涉及到样式，布局，之前一直用的是纯的CSS，而现在项目比较庞大，用到了Scss,所以自己在做的过程中也在从不断的了解，学习到熟悉，然后做一些简单的总结。

首先附上Scss的官方学习网站：https://www.sass.hk/

 

1.Scss和CSS，Sass的区别

这里不再赘述，请移步：https://www.jianshu.com/p/35f4980845a0

1）变量的使用

$document-background-color: #EDEFF0;

$default-text-color: #363636;

$default-boder-color: #D7D7D7;

我们可以在.scss的文件的上面定义一些变量，在我们需要的地方直接用变量替换即可。

通常为了将代码和样式分开或者将一些公共的样式抽离出来，供其他的文件公用

注意Scss公共文件的命名：注意是_(短下划线)

_variable.scss // 统一来放变量

_color.scss // 统一来放颜色的变量

_common.scss // 公共的样式

然后，在需要的文件的头部用import 导入即可，注意导入的时候不加扩展名（.scss）

import '../style/vairables';

import './style/color';

然后定义variables.scss和color.scss文件

@media(max-width: 959px;\)

&:hover {

background:darken($second-color, 10%)

}

&::before {...}

&::after{...}

&表示是作用在同一个标签(元素)上

(2) mixin混合,在需要的时候@include $variable

Scss中的&的作用：https://www.jianshu.com/p/04166f7535c8