当前位置： 移动技术网 > IT编程>网页制作>CSS > sass基础语法--变量和引用+变量作用域+import

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

2020年03月29日  | 移动技术网IT编程  | 我要评论

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

 

 

sass变量和引用：

demo.scss

$width:300px;
$height:300px;
$bgcolor:#abcdef;

div{
    width:$width;
    height:$height;
    background-color:$bgcolor;
}

编译后demo.css

 

 

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

 

 

字符串变量，拼接用逗号

 

 

编译后

 

 

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

 

 

编译后

 

 

#{} 插值

 

 

编译后

 

 

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

 

 

编译后

 

 

sass变量作用域：

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

外部无法访问内部定义的变量，内部可以使用外部定义的变量

 

 报错

 

 

import的用法：

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

 

如：

 

 

编译后：

 

 

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

 

演示如下：

新建一个基础文件 _base.scss

 

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

 

 

 

编译后

 

 

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

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

如果不想受到import位置的影响，可以借助 !default 默认值的方法

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网