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) 是一款强化 ...
随机推荐
- hibernate学习笔记(1)结构与基本数据类型
一,概览 Hibernate负责从Java类到数据库表的映射,以及从Java数据类型到SQL数据类型的映射.另外还提供数据查询和检索功能.它可以显着减少在SQL和JDBC中手动处理数据的开发时间. ...
- mysql错误(Incorrect key file for table)
Incorrect key file for table 'C:\Windows\TEMP\#sql578_6e2_68d.MYI'; try to repair it mysql错误:mysql需要 ...
- codeforces 1461D,离线查询是什么神仙方法,为什么快这么多?
大家好,欢迎来到codeforces专题. 今天我们选择的题目是1461场次的D题,这题全场通过了3702人,从难度上来说比较适中.既没有很难,也很适合同学们练手.另外它用到了一种全新的思想是在我们之 ...
- Java基本类型的内存分配在栈还是堆
我们都知道在Java里面new出来的对象都是在堆上分配空间存储的,但是针对基本类型却有所区别,基本类型可以分配在栈上,也可以分配在堆上,这是为什么? 在这之前,我们先看下Java的基本类型8种分别是: ...
- Codeforces Round #649 (Div. 2) C. Ehab and Prefix MEXs
题目链接:https://codeforces.com/contest/1364/problem/C 题意 给出大小为 $n$ 的非递减数组 $a$,构造同样大小的数组 $b$,使得对于每个 $i$, ...
- 【hdu 1576】A/B(数论--拓展欧几里德 求逆元 模版题)
题意:给出 A%9973 和 B,求(A/B)%9973的值. 解法:拓展欧几里德求逆元.由于同余的性质只有在 * 和 + 的情况下一直成立,我们要把 /B 转化为 *B-1,也就是求逆元. 对于 B ...
- Codeforces Round #494 (Div. 3) D. Coins and Queries (贪心,数学)
题意:给你一组全是\(2^d\ (d\ge0)\)的数,询问q次,每次询问一个数,问这个数是否能够由原数组中的数相加得到,如果能,输出最少用多少个数,否则输出\(-1\). 题解:首先贪心得出结论:如 ...
- 2019 ICPC Asia Taipei-Hsinchu Regional Problem K Length of Bundle Rope (贪心,优先队列)
题意:有\(n\)堆物品,每次可以将两堆捆成一堆,新堆长度等于两个之和,每次消耗两个堆长度之和的长度,求最小消耗使所有物品捆成一堆. 题解:贪心的话,每次选两个长度最小的来捆,这样的消耗一定是最小的, ...
- Incorrect string value: '\xF0\x9F\x93\xB7</...' for column 'content' at row 1
出现原因:当insert数据中有表情时发生.而这些表情是按照4个字节一个单位进行编码的,而我们使用的utf-8编码在mysql数据库中默认是按照3个字节一个单位进行编码的. 解决方法:将表字段字符集设 ...
- Jenkins+ant+Jmeter接口自动化框架搭建
工具准备 JDK: jdk1.8.0_111 Ant: apache-ant-1.9.9 Jmeter: apache-jmeter-3.1 Jenkins: jenkins-2.7.4 JDK安装 ...