sass 学习笔记1

最新推荐文章于 2025-04-24 15:15:29 发布

前端白子

最新推荐文章于 2025-04-24 15:15:29 发布

阅读量1.4k

点赞数 1

文章标签： sass 学习 css

本文链接：https://blog.youkuaiyun.com/Choiceanxiety/article/details/129318271

版权

这篇Sass学习笔记介绍了Sass的变量使用，包括变量可覆盖、字符串变量的拼接方法（如插值变量语法），以及@import指令在引入scss文件时的规则和注意事项，如局部变量、默认变量以及数组和map的运用。

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

sass

文本格式：‘文档名.scss’

1、变量名以$开头

$baseWidth:200px;

若有先设置的 $baseWidth:100px !default; //!default 表示默认值，但仍可以被覆盖掉

2.字符串变量拼接
$ str: 'hello.jpeg';
1）+号拼接
background-image:url('./img/'+$str);
也可以定义不加引号的字符串
$strNoQout:abc;

2）使用插值变量的语法连接字符串：#{ 变量 }
background-image:url('./img/#{strNoQout}');
插值变量的语法可以在任意地方使用

在sass中，!default定义默认值,即如果定义了与之相同名称的变量,可对其进行修改,并且!default不会被编译到css中

$width:400px;
$height:500px;

$str:'imooc.png';
$div:'.div1';


$baseWidth:200px;

$baseWidth:100px !default;

#{$div}{
	width:$width;
	height:$height;
	// 字符串拼接的两种方式
	// background-image:url('img/#{$str}');
	background-image:url('img/'+$str);
}

scss自动转css后：

.div1 {
  width: 400px;
  height: 500px;
  background-image: url("img/imooc.png");
}

3.括号内的变量属于局部变量，外部无法引用；
4.@import 引入css文件不会改变原生的css文件；
@import 引入不同的scss文件，而不被单独编译为css文件：
1）引入的文件以下划线开头；
2）@import引入文件： @import “文件名”（去掉下划线）
3）引入的文件的位置，决定引入文件的代码放置的位置，但因就近原则，引入文件中的代码位置将覆盖上面相同变量；
方法：将引入文件中相同的变量加入！default;设置为默认的变量，就不会覆盖；

sass数组定义 $list=(1px, 2, 'string');

.div{
width:nth( $list, 1) 		//下标以1开头
}
zoom: index( $list, 'string' )		//获得子元素在数组中的下标//也是以1开头
$map:(top:1px ,left:2px,bottom:3px,right:4px)		//map用法相当于对象
top:map-get($map ， top)		//获得对象里的指定key的value值

map的常用用法：

/*第一种获取*/
.div {
	top: map-get($map,top);
	top: map-get($map,left);
}
/*第二种遍历*/
.div {
	@each $key,$value in $map{
		#{$key}:$value;
	}
}