新建通用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的更多相关文章

  1. vue,一路走来(17)--vue使用scss,并且全局引入公共scss样式

    最近朋友问如何在vue项目中使用scss样式,想起之前项目是直接在main.js直接import css文件的,然而main.js不可以直接import scss文件. import './asset ...

  2. SSM:Mybatis中引入通用mapper

    如果你是SSM项目引入通用mapper记得要引入hibernate中的一个hibernate-jpa-2.1-api-1.0.0.Final.jar包(注意必须要Mybatis整合Spring噢,其实 ...

  3. scss引入的问题

    导入.sass或.scss文件 css有一个不太常用的特性,即@import 导入功能,它允许在一个css文件中导入其他css文件.然而,结果是只有执行到@import 规则时,浏览器才会去下载其他c ...

  4. vue-cli项目中引入全局scss

    加载一个全局设置文件 在每个组件里加载一个设置文件,而无需每次都将其显式导入,是一个常见的需求.比如为所有组件全局使用 scss 变量.为了达成此目的: npm install sass-resour ...

  5. vue全局引入公共scss样式,子组件调用

    前提 已引用并使用scss npm install sass-loader --save-dev npm install node-sass --sava-dev 配置 在vue.config.js中 ...

  6. vue - scss 引入 外部 在线 css

    <style lang="scss"> @import url('https://fonts.googleapis.com/css2?family=Lobster&am ...

  7. vue 引入通用 css

    1.在入口 js 文件 main.js 中引入,一些公共的样式文件,可以在这里引入. import Vue from 'vue' import App from './App' // 引入App这个组 ...

  8. angular4(3)angular脚手架引入scss

    scss..sass....sccc...ssss...ccccc......MMP················· 先说下scss和sass的异同: SCSS 是 Sass 3 引入新的语法,其语 ...

  9. 使用vue搭建应用三引入scss

    Css.Sass.Scss的含义及区别 Css(Cascading Style Sheets) 层叠样式表 Sass(Syntactically Awesome StyleSheets) 是一款强化 ...

随机推荐

  1. Golang之如何(优雅的)比较两个未知结构的json

    这是之前遇到的一道面试题,后来也确实在工作中实际遇到了.于是记录一下,如何(优雅的)比较两个未知结构的json. 假设,现在有两个简单的json文件. { "id":1, &quo ...

  2. java架构《并发线程中级篇》

    java多线程的三大设计模式 本章主要记录java常见的三大设计模式,Future.Master-Worker和生产者-消费者模式. 一.Future模式 使用场景:数据可以不及时返回,到下一次实际要 ...

  3. CSS开发过程中的20个快速提升技巧

    摘要:本文涵盖了20个CSS技巧,可以解决许多工作中常见的问题, 让你也成为一个CSS高手. 1.使用CSS重置(reset) css重置库如normalize.css已经被使用很多年了,它们可以为你 ...

  4. 一统江湖的大前端(10)——inversify.js控制反转

    <大史住在大前端>前端技术博文集可在下列地址访问: [github总基地][博客园][华为云社区][掘金] 字节跳动幸福里大前端团队邀请各路高手前来玩耍,团队和谐有爱,技术硬核,字节范儿正 ...

  5. PTA 1014 Waiting in Line (30分) 解题思路及满分代码

    题目 Suppose a bank has N windows open for service. There is a yellow line in front of the windows whi ...

  6. hdu 6681 Rikka with Cake(扫描线)

    题意:给你一个n*m的的矩形框 现在又k条射线 问这个矩形框会被分为多少个区域 思路:之前的想法是枚举边界然后线段树扫一遍计算一下矩形个数 复杂度果断不行 后面发现其实答案就是交点数+1 然后就用线段 ...

  7. 2019牛客暑期多校训练营(第一场)H XOR(线性基)

    题意:给你n个数字,然后让你求所有满足异或和为0的子集的大小之和. 先对n个数求线性基,设线性基大小为r,可以分别计算线性基内数的贡献和线性基外数的贡献 1.线性基外:共n-r个数,枚举每个数x,将线 ...

  8. P4570 [BJWC2011]元素 (线性基)

    题意:n个石头 每个石头有a,b两个属性 要求选出一些石头使得没有一个子集的a属性xor和为0 且b属性和最大 题解:线性基例题了.. 好像需要理解一些性质 1.原序列里任一数都可有由线性基xor得到 ...

  9. Acwing 154 滑动窗口(单调队列)经典模板

    给定一个大小为n≤106n≤106的数组. 有一个大小为k的滑动窗口,它从数组的最左边移动到最右边. 您只能在窗口中看到k个数字. 每次滑动窗口向右移动一个位置. 以下是一个例子: 该数组为[1 3 ...

  10. Java进阶专题(二十五) 分布式锁原理与实现

    前言 ​ 现如今很多系统都会基于分布式或微服务思想完成对系统的架构设计.那么在这一个系统中,就会存在若干个微服务,而且服务间也会产生相互通信调用.那么既然产生了服务调用,就必然会存在服务调用延迟或失败 ...