SASS 用法基础

最新推荐文章于 2022-12-06 17:27:42 发布

__anonymous_

最新推荐文章于 2022-12-06 17:27:42 发布

阅读量319

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/k909397116/article/details/113430259

版权

Web 专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了SASS预处理器的主要特性，包括变量的使用，允许在代码中进行计算，选择器和属性的嵌套，以及代码复用的两种方式——继承(@extend)和Mixins(@mixin)。通过实例展示了如何通过SASS简化CSS编写，提高代码组织性和可维护性。

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

一、基本用法

1.1 变量

SASS允许使用变量，所有变量以$开头。

$primary-color: #1269b5;
$primary-border: 1px solid $primary-color; 

div.box {
	background: $primary-color;
}

h1.page-header {
	border: $primary-border;
}

如果变量需要镶嵌在字符串之中，就必须需要写在 #{} 之中。

$side : left;

.rounded {
　　border-#{$side}-radius: 5px;
}

1.2 计算功能

SASS允许在代码中使用算式：

body {
　　margin: (14px/2);
　　top: 50px + 100px;
　　right: $var * 10%;
}

1.3 嵌套

SASS 允许选择器嵌套，下面的 CSS 代码：

.nav {
	height: 100px;
}
.nav ul {
	margin: 0;
}
.nav ul li {
	float: left;
	list-style: none;
	padding: 5px;
}

可以写成：

.nav {
	height: 100px;
	.ul {
		margin: 0;
		.li {
			float: left;
			list-style: none;
			padding: 5px;
		}
	}
}

属性也可以嵌套，下面的 CSS 代码：

body {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 15px;
	font-weight: normal;
}

可以写成：

body {
	font: {
		family: Helvetica, Arial, sans-serif;
		size: 15px;
		weight: normal;
	}
}

下面的 CSS 代码：

.nav {
	border: 1px solid #000;
	border-left: none;
	border-right: none;
}

可以写成：

.nav {
	border: 1px solid #000 {
		left: none;
		right: none;
	}
}

在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成：

a {
	display: block;
	color: #000;
	padding: 5px;
	&:hover {
		background: #0d2f7e;
		color: #fff;
	}
}

使用 & 此时内层的样式相当于如下样式，与 a 选择器处于同一级别

a:hover {
	background: #0d2f7e;
	color: #fff;	
}

不使用的话相当于

a :hover {
	background: #0d2f7e;
	color: #fff;		
}

a 和 :hover 之间有空格，这样是不对的

注意：使用了 & 后，当前的选择器就与父选择器处于同级了

看看更多的例子

.nav {
	width: 100px;
	height: 500px;
	a {
		display: block;
		color: #000;
		padding: 5px;
		&:hover {
			background: #0d2f7e;
			color: #fff;
		}
	}
	& &-text {
        font-size: 20px;
    }
}

相当于

.nav {
  width: 100px;
  height: 500px;
}
.nav a {
  display: block;
  color: #000;
  padding: 5px;
}
.nav a:hover {
  background: #0d2f7e;
  color: #fff;
}
.nav .nav-text {
  font-size: 20px;
}

二、代码复用

2.1 继承

.alert {
	padding: 15px;
}
.alert-info {
	/* 相当于在 .alert 样式后面加了一个 .alert-info 群选择器 */
	@extend .alert;
	background-color: #d9edf7;
}

相当于

.alert,
.alert-info {
	padding: 15px;
}
.alert-info {
	background-color: #d9edf7;
}

注意：@extend .alert 相当于继承了所有与 .alert 选择器相关的样式，看如下例子。

.alert {
	padding: 15px;
}
.alert a {
	font-weight: bold;
}
.alert-info {
	/* 相当于在 .alert 样式后面加了一个 .alert-info 群选择器 */
	/* 相当于在 .alert a 样式后面加了一个 .alert-info a 群选择器 */
	@extend .alert;
	background-color: #d9edf7;
}

相当于

.alert,
.alert-info {
	padding: 15px;
}

.alert a,
.alert-info a {
	font-weight: bold;
}

.alert-info {
	background-color: #d9edf7;
}

2.2 Mixin

之前介绍过 sass 中的变量语法，可以为一些样式的取值来定义变量，需要用到这些值的时候直接引入之前定义好的变量即可。

mixin 的作用与变量类似，但是不同的是它定义的不是取值，而是整个样式片段，并且可以像函数那样传入参数进去。

/* 定义变量 */
$warning-color: red;
$warning-background-color: #fcf8ec;
$warning-a-color: #664c2b;

/* 定义 mixin */
@mixin alert {
	color: $warning-color;
	background-color: $warning-background-color;
	a {
		color: $warning-a-color;
	}
}

.alert-warining {
	/* 引入样式片段 */
	@include alert;
}

上面的代码等价于

.alert-waring {
	color: red;
	background-color: #fcf8ec;
}
.alert-waring a {
	color: #664c2b;
}

下面来看看使用参数的 mixin，参数可以设置默认值

/* 定义 mixin */
@mixin alert($text-color, $background-color: red) {
	color: $text-color;
	background-color: $background-color;
	a {
		/* 将 text-color 加深 10% */
		color: darken($text-color, 10%);
	}
}

.alert-waring {
	/* 引入样式片段 */
	@include alert(#8a6d3b, #fcf8ec);
}