scss 流体方面：用于创建固有比率的Sass mixin

Posted 2021-05-17

# Fluid Aspect

**fluid-aspect** is a Sass mixin for creating [intrinsic ratios](http://alistapart.com/article/creating-intrinsic-ratios-for-video) in CSS. Intrinsic ratios allow elements to fill the width of their containing block and resize on the fly while maintaining their aspect ratio.

```scss
@include fluid-aspect($ratio, [$target]);
```

- **$ratio**: An aspect ratio represented as two numbers separated by a space. *Defaults to 1:1*
- **$target**: A selector targeting the element to be made fluid. *Defaults to "> :first-child"*

## Usage

Create a fluid aspect ratio container by including the mixin and its first child will by made fluid.

```scss
.my-container {
	@include fluid-aspect(16 9);
}
```

Rendered as CSS:

```css
.my-container {
	padding-bottom: 56.25%;
	position: relative;
}

.my-container > :first-child {
	left: 0;
	height: 100%;
	position: absolute;
	top: 0;
	width: 100%;
}
```

Create a fluid container that specifies the descendant that will become fluid.

```scss
.my-container {
	@include fluid-aspect(4 3, iframe);
}
```

Rendered as CSS:

```css
.my-container {
	padding-bottom: 75%;
	position: relative;
}

.my-container iframe {
	left: 0;
	height: 100%;
	position: absolute;
	top: 0;
	width: 100%;
}
```

Remember that advanced selectors must be wrapped in a string. Within a string, you can still reference parent selectors using the ampersand (&) character.

```scss
.my-container {
	@include fluid-aspect(5 3, "&--fluid");
}
```

Rendered as CSS:

```css
.my-container {
	padding-bottom: 60%;
	position: relative;
}

.my-container--fluid {
	left: 0;
	height: 100%;
	position: absolute;
	top: 0;
	width: 100%;
}
```

@mixin fluid-aspect($ratio: 1 1, $selector: "> :first-child") {
	$selector: unquote($selector);

	padding-bottom: percentage(nth($ratio, 2) / nth($ratio, 1));
	position: relative;

	#{$selector} {
		left: 0;
		height: 100%;
		position: absolute;
		top: 0;
		width: 100%;
	}
}