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) 是一款强化 ...
随机推荐
- 使用 Shiro,从架构谈起,到框架集成!
使用 Shiro,从架构谈起,到框架集成! 一.架构 1.使用用户的登录信息创建令牌 2.执行登陆动作 3.判断用户 4.两条重要的英文 二.实现Realm 1.缓存机制 2.散列算法与加密算法 3. ...
- centos安装Qt
转:http://blog.csdn.net/wavelee/article/details/7855727 在编译Qt4.8.6版本的库时,在配置时 ./configure 出现了如下的错误: Ba ...
- css按钮样式
style='height:22px;padding:1 17px;font-size: 8px;font-weight: 100;line-height: 25px;'http://www.boot ...
- OSPF特殊区域和LSA
OSPF路由计算优选次序: (1) 直连路由:本路由器发起的LSA 1.2: (2) 区域内路由:O: LSA 1.2: (3) 区域间路由:O IA: LSA 3: (4) 1类外部路由:O E1: ...
- Java 复习整理day08
package com.it.demo02_lambda; //接口, 表示动物. //public abstract class Animal { //报错, Lambda表达式只针对于接口有效 p ...
- CSS开发过程中的20个快速提升技巧
摘要:本文涵盖了20个CSS技巧,可以解决许多工作中常见的问题, 让你也成为一个CSS高手. 1.使用CSS重置(reset) css重置库如normalize.css已经被使用很多年了,它们可以为你 ...
- P1020 导弹拦截(LIS)
题目描述 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到达任意的高度,但是以后每一发炮弹都不能高于前一发的高度.某天,雷达捕捉到敌国的导弹 ...
- fzu2202 犯罪嫌疑人
Problem Description 福尔摩斯是个大侦探,他总是在解决疑难案件.这一次的案件也不例外,案件是这样的:有编号为1到N的N位嫌疑犯,他们其中有一个犯了罪,然后每个嫌疑犯都被询问,&quo ...
- 线段树扫描线(一、Atlantis HDU - 1542(覆盖面积) 二、覆盖的面积 HDU - 1255(重叠两次的面积))
扫描线求周长: hdu1828 Picture(线段树+扫描线+矩形周长) 参考链接:https://blog.csdn.net/konghhhhh/java/article/details/7823 ...
- poj3661 Running
Description The cows are trying to become better athletes, so Bessie is running on a track for exact ...