SCSS引入通用SCSS
新建通用common.scss
.empty {
margin-top: 100rpx;
text-align: center;
.empty-img {
width: 220rpx;
height: 175rpx;
}
.empty-text {
font-size: 20rpx;
color: #999999;
}
}
引入
@import '../../common/scss/common.scss';
Page {
margin-bottom: 50rpx;
}
.product-item {
width: 690rpx;
height: 240rpx;
margin: 30rpx auto 0 auto;
margin-left: 30rpx;
// border: 1px solid red;
background: rgba(255, 255, 255, 1);
box-shadow: 0rpx 0rpx 24rpx 0rpx rgba(4, 0, 0, 0.08);
border-radius: 16rpx;
display: flex;
justify-content: space-between;
.left {
width: 240rpx;
margin-top: 20rpx;
margin-left: 20rpx;
.left-img {
width: 200rpx;
height: 200rpx;
}
}
.right {
margin-top: 20rpx;
margin-left: -20rpx;
height: 200rpx;
width: 450rpx;
// border:1px solid blue;
.title {
margin-top: 20rpx;
font-size: 32rpx;
font-weight: bold;
color: rgba(34, 34, 34, 1);
line-height: 32rpx;
}
.sub-title {
margin-top: 20rpx;
font-size: 24rpx;
font-weight: 500;
color: rgba(102, 102, 102, 1);
line-height: 32rpx;
}
.price {
margin-top: 30rpx;
display: flex;
justify-content: space-between;
margin-right: 20rpx;
.origin-price {
min-width: 130rpx;
font-size: 32rpx;
font-weight: bold;
color: rgba(244, 65, 65, 1);
line-height: 32rpx;
display: flex;
.yuan {
font-size: 26rpx;
font-weight: bold;
color: rgba(244, 65, 65, 1);
line-height: 26rpx;
}
}
.vip-price {
font-size: 24rpx;
font-weight: 500;
color: rgba(244, 65, 65, 1);
line-height: 30rpx;
display: flex;
.tag {
color: rgba(51, 51, 51, 1);
}
}
}
}
}
这样,就不用重复的写SCSS了。
SCSS引入通用SCSS的更多相关文章
- vue,一路走来(17)--vue使用scss,并且全局引入公共scss样式
最近朋友问如何在vue项目中使用scss样式,想起之前项目是直接在main.js直接import css文件的,然而main.js不可以直接import scss文件. import './asset ...
- SSM:Mybatis中引入通用mapper
如果你是SSM项目引入通用mapper记得要引入hibernate中的一个hibernate-jpa-2.1-api-1.0.0.Final.jar包(注意必须要Mybatis整合Spring噢,其实 ...
- scss引入的问题
导入.sass或.scss文件 css有一个不太常用的特性,即@import 导入功能,它允许在一个css文件中导入其他css文件.然而,结果是只有执行到@import 规则时,浏览器才会去下载其他c ...
- vue-cli项目中引入全局scss
加载一个全局设置文件 在每个组件里加载一个设置文件,而无需每次都将其显式导入,是一个常见的需求.比如为所有组件全局使用 scss 变量.为了达成此目的: npm install sass-resour ...
- vue全局引入公共scss样式,子组件调用
前提 已引用并使用scss npm install sass-loader --save-dev npm install node-sass --sava-dev 配置 在vue.config.js中 ...
- vue - scss 引入 外部 在线 css
<style lang="scss"> @import url('https://fonts.googleapis.com/css2?family=Lobster&am ...
- vue 引入通用 css
1.在入口 js 文件 main.js 中引入,一些公共的样式文件,可以在这里引入. import Vue from 'vue' import App from './App' // 引入App这个组 ...
- angular4(3)angular脚手架引入scss
scss..sass....sccc...ssss...ccccc......MMP················· 先说下scss和sass的异同: SCSS 是 Sass 3 引入新的语法,其语 ...
- 使用vue搭建应用三引入scss
Css.Sass.Scss的含义及区别 Css(Cascading Style Sheets) 层叠样式表 Sass(Syntactically Awesome StyleSheets) 是一款强化 ...
随机推荐
- Grafana Prometheus系统监控Redis服务
Grafana Prometheus系统监控Redis服务 一.Grafana Prometheus系统监控Redis服务 1.1流程 1.2安装redis_exporter 1.3配置prometh ...
- MVC架构 项目实践
MVC MVC架构程序的工作流程 springmvc 中dao层和service层的区别 项目实践 项目目录 项目实现流程 JSP登录页面View层 LoginServletjavaControlle ...
- Java 容器系列总结
为什么要使用集合 当我们需要保存一组类型相同的数据的时候,我们应该是用一个容器来保存,这个容器就是数组,但是,使用数组存储对象具有一定的弊端, 因为我们在实际开发中,存储的数据的类型是多种多样的,于是 ...
- python自动化之使用allure生成测试报告
Allure测试报告框架帮助你轻松实现"高大上"报告展示.本文通过示例演示如何从0到1集成Allure测试框架.重点展示了如何将Allure集成到已有的自动化测试工程中.以及如何实 ...
- Hive调优相关
前言 Hive是由Facebook 开源用于解决海量结构化日志的数据统计,是基于Hadoop 的一个数据仓库工具,可以将结构化的数据文件映射为一张表,并提供类 SQL查询功能. 在资源有限的情况下,提 ...
- [CCPC2019网络赛] 1008-Fishing Master(思维)
>传送门< 题意:现在需要捕$n$条鱼并且将它们煮熟来吃.每条鱼要煮相应的时间才能吃(可以多煮一会),锅里每次只能煮一条鱼,捕一条鱼的时间是相同的,但是在捕鱼的时间内不能做其他事(比如换一 ...
- SCZ 20170812 T2 MFS
题面照例十分暴力,我再次重写一下吧-- 题目描述 有\(n\)个数构成的数列\(A\)元素为\(a_i\),你要构造一个数列\(B\),元素为\(b_i\),使得满足\(b_{i}>0,a_{i ...
- poj1821 Fence(dp,单调队列优化)
题意: 由k(1 <= K <= 100)个工人组成的团队应油漆围墙,其中包含N(1 <= N <= 16 000)个从左到右从1到N编号的木板.每个工人i(1 <= i ...
- HDU 6880 Permutation Counting dp
题意: 给你一个n和一个长度为n-1的由0/1构成的b序列 你需要从[1,n]中构造出来一个满足b序列的序列 我们设使用[1,n]构成的序列为a,那么如果ai>ai+1,那么bi=1,否则bi= ...
- hdu2825 Wireless Password(AC自动机+状压dp)
Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submission ...