使用SASS

最新推荐文章于 2024-05-06 18:29:43 发布

一个孤独漫步者的遐想

最新推荐文章于 2024-05-06 18:29:43 发布

阅读量221

点赞数 1

分类专栏： uni-app 文章标签： uni-app

本文链接：https://blog.csdn.net/weixin_43555997/article/details/113735463

版权

uni-app 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

这篇博客展示了如何在Vue项目中应用SASS预处理器来编写组件样式。作者通过`index.vue`文件的代码实例，详细解释了如何定义变量、创建层级CSS以及使用SASS的混合和嵌套规则。文章重点讨论了如何优化`.content`类的布局，包括设置图片`logo`的尺寸和位置，以及添加`.text-area`和`.title`的样式，以实现响应式和居中对齐。

摘要由CSDN通过智能技术生成

使用SASS

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7L044HFP-1612661323008)(F:\Uni-app.assets\image-20210205163206046.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N6fMZeY1-1612661323010)(F:\Uni-app.assets\image-20210205163404108.png)]$

index.vue

<template>

	<view class="content box" >
		<image class="logo" src="/static/logo.png"></image>

	</view>


</template>

<script>

</script>


<style lang="scss">
	
	$width:200rpx;	//定义变量
	
	//层级CSS
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		//&父级	若要表示同级：	.content.box
		&.box{
			border: 1px red solid;
		}
		
		.logo {
			height: $width;
			width: $width;
			margin-top: 200rpx;
			margin-left: auto;
			margin-right: auto;
			margin-bottom: 50rpx;
		}

		.text-area {
			display: flex;
			justify-content: center;

			.title {
				font-size: 36rpx;
				color: #8f8f94;
			}
		}


	}
</style>