Sass基础--变量与导入_sass body-优快云博客

本文链接：https://blog.youkuaiyun.com/hong836717428/article/details/77966128

本文介绍了Sass中的变量使用方法，包括局部变量、全局变量及多值变量等，并演示了如何利用maps类型进行背景颜色和边框颜色的设置。此外，还讲解了如何通过部分文件的导入来减少CSS代码的重复。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

body{
  $color : red;
  color:$color;
}
footer{//footer里将访问不到$color变量，因为它是局部的
  color:$color;
}

body{
  $color : red !global;
  color:$color;
}
footer{//footer里将可以访问$color变量，因为它是全局的
  color:$color;
}

$paddings : 5px 10px 5px 10px;
body{
  padding : $paddings;
}
//如果我们只想取一个值 如:
padding-left : nth($paddings,1);
//注意：索引是从1开始的不是从0.

$maps:( color:red , borderColor:blue );
body{
  background:map-get($maps,color);
  border-color:map-get($maps,borderColor);
}

部分文件一般以’_’下划线开头如：_part1.css
我们就可以导入或者引用这个部分文件,减少css的重复

//然后我们就可以导入文件了
@import  "_part1.css"

下面三种情况被识别为css原生导入

被导入文件是以.css结尾

被导入文件是一个URL地址(如: http://xxx/xxx.css)

被导入文件的名字是CSS的url()值

//导入sass文件 _part1.scss
@import "part1"
//只用写文件名就可以了，然后就吧part1的内容写入当前文件中
//写'_'和后缀也行