sass基础语法–变量和引用+变量作用域+import

新建一个文件夹，创建一个文件命名为demo.scss，保存后可以看到会自动编译

sass变量和引用：

demo.scss

$width:300px;$height:300px;$bgcolor:#abcdef;四川民航飞行学院div{    width:$width;    height:$height;    background-color:$bgcolor;}

编译后demo.css

!default 表示默认值，后续会被同名变量覆盖

字邓紫棋后会无期符串变量，拼接用逗号

编译后

字符串不加引号也是可以的

编译后

#{} 插值

编译后

#{} 基本可以用在任何地方，比如选择器

编译后

sass变量作用域：

以花括号包裹住的为作用域

外部无法访问内部定义的冰河世纪2英文版变量，内部可以使用外部定义的变量

报错

import的用法：

以下四种情况，import导入将不会被编译

如：

编译后：

正常情况下如何使用sass import：

演示如下：

新建一个基础文件 _ba.scss

在某个scss文件中引入_ba.scss

编译后

import出现在不同的位置，则引入的文件也会出现在相对应的位置

当出现同名变量时，由于import位置不同，可沈阳医学院能存在被覆盖的情况

如果不想受到imp民为贵社稷次之君为轻ort位置的影响，可以借助 !default 默认值的方法