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

2020-03-29 16:02:43来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

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变量作用域:

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

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

 

 报错

 

 

import的用法:

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

 

如:

 

 

编译后:

 

 

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

 

演示如下:

新建一个基础文件 _base.scss

 

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

 

 

 

编译后

 

 

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

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

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


原文链接:https://www.cnblogs.com/chenyingying0/p/12591883.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:Sass环境安装--windows版sublime插件

下一篇:sass常见的基本数据类型+加减乘除基本运算