2021-08-25 sass设置变量和嵌套

最新推荐文章于 2024-09-09 09:14:51 发布

前端OnTheRun

最新推荐文章于 2024-09-09 09:14:51 发布

阅读量312

点赞数

分类专栏： css 文章标签： css scss sass

本文链接：https://blog.youkuaiyun.com/rowlet/article/details/119913383

版权

css 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了Sass的变量定义，如使用$+变量名，以及在处理伪类选择器嵌套时的注意事项，包括如何避免多余的空格问题。此外，还探讨了引用父选择器和嵌套属性的高效实践。

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

1.sass使用$+变量名可以定义变量

	// scss可以设置变量
	// 定义变量:$符号＋名称 
	$goldenTea:#e0861a;
	//变量中也可以嵌套变量
	$ul-border:2px solid $goldenTea;
	ul{
	list-style-type: none;
	border:$ul-border;
		li{
			background-color:$goldenTea;
		}
	}

2.对于伪类选择器的嵌套,":“前面要加一个”&"

嵌套伪类选择器时,css文件会多出一个空格

style.scss

	ul{
		li{
			:hover{
				color:white;
			}
		}
	}

index.css

/*li和冒号之间有空格*/
ul li :hover {
  color: white;
}

发现设置无效
解决方法:加"&"
style.scss

	ul{
		li{
			//加一个&
			&:hover{
				color:white;
			}
		}
	}

index.css

*li和冒号之间没有空格*/
ul li:hover {
  color: white;
}

正常显示hover

3.引用父选择器

	ul{
	list-style-type: none;
	border:$ul-border;
		//引用父选择器
		&>li{
			background-color:$goldenTea;
			&:hover{
				color:white;
			}
		}
	}

*可以看到,引用父选择器和伪类选择器的嵌套都是用一个"&"代表其父类

4.嵌套属性

提取出相同选择器下的相同属性名称

ul{
	list-style: none;
	li{
		float:left;
		border:1px solid red;
		border-right:none;
	}
}

可以改成:

ul{
	list-style: none;
	li{
		float:left;
		border:1px solid red{right:none;};
	}
}