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) 是一款强化 ...
随机推荐
- SparkSQL访问Hive源,MySQL源
SparkSQL访问Hive源,MySQL源 一.SparkSQL访问Hive源 软件环境 SparkSQL命令行模式可以直接连接Hive的 Java程序SparkSQL连接Hive 二.SparkS ...
- linux最初配置( vimrc设置 、tab键设置 inputrc、中文输入法等等)
1..vimrc设置 syntax on set tabstop=4 set softtabstop=4 set autoindent set cindent set nu set ruler & ...
- Kubernetes -- secret (敏感数据管理)
https://www.kubernetes.org.cn/secret secret 主要解决密码.token.密钥等敏感数据的配置问题,而不需要把这些敏感数据暴露到镜像或者Pod Spec中 Se ...
- Docker --volume(数据持久化)
数据卷 volume 数据卷 是一个可供一个或多个容器使用的特殊目录,实现让容器中的一个目录和宿主机中的一个文件或者目录进行绑定.数据卷 是被设计用来持久化数据的 第一种:bind mount vol ...
- OpenStack (glance 镜像服务)
glance介绍 glance 提供云虚拟机上的服务镜像(Image)功能,该模块可看成车间里的模具生产部门,其功能包括虚拟机镜像的查找.注册和检索等.该模具最基本的使用方式就是在为云虚拟机实例提供安 ...
- 第2层交换和生成树协议(STP)__MAC地址表
1.MAC(Media Access Control, 介质访问控制)地址是识别LAN节点的标识.网卡的物理地址通常是由网卡生产厂家烧入网卡的EPROM(一种闪存芯片,通常可以通过程序擦写),它存储的 ...
- dedecms织梦的安全问题解决办法
很多新手用户在使用织梦CMS程序过程中,难免会碰到挂马中毒现象,所以事先我们要对网站及服务器安全做好预防备份处理. 织梦作为国内第一大开源免费CMS程序,无疑是很多HACK研究的对象,在本身不安全的互 ...
- Java中finalize()方法的作用
finalize方法是Object提供的的实例方法,使用规则如下: 当对象不再被任何对象引用时,GC会调用该对象的finalize()方法 finalize()是Object的方法,子类可以覆盖这个方 ...
- Unity3d开发中遇到的问题记录
安装Unity unity官方提供免费的community版本,功能健全,下载时还有Visual Studio,非常方便. 官方文档 Unity的官方文档非常权威!详尽!可靠!很多关于函数细节的疑惑都 ...
- Preliminaries for Benelux Algorithm Programming Contest 2019
A. Architecture 如果行最大值中的最大值和列最大值中的最大值不同的话,那么一定会产生矛盾,可以手模一个样例看看. 当满足行列最大值相同条件的时候,就可以判定了. 因为其余的地方一定可以构 ...