SCSS 预处理器
- SCSS 是SASS 3.0 之后的称呼
强化 CSS
的辅助工具,在 CSS 的语法上增加了额外的功能(嵌套、变量、运算、函数……)- scss没办法直接被浏览器识别,需要转换成css(使用webpack)
1、SCSS 预处理器
1、嵌套
对 CSS 选择器的嵌套
- 如上,有嵌套
- scss里,可以直接
用& 表示直接的父标签
2、变量
用变量来存储 CSS 中复用的信息
$变量名:变量值;
3、函数与运算
自定义函数,用来计算想要的结果
@function 函数名($参数名){
@return $px*2 +px
}
- scss里:变量用$标记,关键词 用@标记
2、计算场景
实际开发中,我们希望一套代码适配多种不同像素的设备,无论在pc 或手机上,硬件设备总是存在各种各样不同像素的屏幕,而我们常用的像素值 px 是一个绝对值
目标:定义相同的文字大小,但在不同的设备上应该展示不同的像素数
rem:相对于标签元素 fontSize 大小的单位
- rem是一个相对值,所以可以通过rem来尽量的抹平不同像素设备间展示的差异
- 根据屏幕的宽度定义根元素 fontSize 的大小,让不同的设备拥有不同的根元素大小,不同的设备rem不同
- 但是我们开发的时候没办法准确感知rem的大小,比如0.43的rem是多大,所以 定义函数把像素转化为 rem,把我们能感觉出大小的像素 转换成 无法感觉大小的rem (给函数传入像素,函数生成对应的rem)
- 根据屏幕的宽度,定义动态的根元素字体的大小
- 定义不同屏幕尺寸下对应的rem–html的字体大小
// src/assets/js/htmlFontSize.js -- 定义不同屏幕尺寸下对应的rem--html的字体大小
// 定义最大的 fontSize
const MAX_FONT_SIZE = 42;
// 监听 html 文档被解析完成的事件
document.addEventListener('DOMContentLoaded', () => {
// 获取 html 标签
const html = document.querySelector('html');
// 获取根元素 fontSize 标准,屏幕宽度 / 10
let fontSize = window.innerWidth / 10;
// 获取到的 fontSize 不允许超过我们定义的最大值
fontSize = fontSize > MAX_FONT_SIZE ? MAX_FONT_SIZE : fontSize;
// 定义根元素(html)fontSize 的大小 (rem)
html.style.fontSize = fontSize + 'px';
});
- scss里写一个函数,将像素转为rem
/*--- src/assets/css/dimens.scss -----*/
// 定义预计根元素 fontSize -> Iphone 6、6s、7、8
$rootFontSize: 375 / 10;
// 定义像素转化为 rem 的函数
@function px2rem ($px) {
@return $px / $rootFontSize + rem;
}
$titleSize: px2rem(16);
$infoSize: px2rem(14);
$minInfoSize: px2rem(12);
$radiusSize: px2rem(6);
$marginSize: px2rem(8);
$checkSize: px2rem(18);
$listGoodsImgSize: px2rem(100);
// statusBar 的高度
$statusBarHeight: px2rem(22);
3、 初始化样式reset.css 引入
/* -- src/assetes/css/reset.css ----*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
/* 不指定为0,那么图片之间默认会有一个间距 */
font-size: 0;
/* 不允许去选中文本 */
user-select: none;
/* IOS 下的滑动卡顿问题 */
-webkit-overflow-scrolling: touch;
/* IOS 下点击取消默认高亮效果 */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
4、配置别名
// vue.config.js
const path = require('path');
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置...
} else {
// 为开发环境修改配置...
// 只会在 开发环境中生效,当我们使用 build 去打包一个项目的时候,那么这里的配置不会生效
// return {
// resolve: {
// alias: {
// '@js': path.resolve(__dirname, './src/assets/js'),
// '@css': path.resolve(__dirname, './src/assets/css'),
// '@img': path.resolve(__dirname, './src/assets/imgs'),
// '@c': path.resolve(__dirname, './src/components'),
// }
// }
// }
}
return {
resolve: {
alias: {
'@js': path.resolve(__dirname, './src/assets/js'),
'@css': path.resolve(__dirname, './src/assets/css'),
'@img': path.resolve(__dirname, './src/assets/imgs'),
'@c': path.resolve(__dirname, './src/components'),
}
}
}
}
}
5、配置viewport
<!-- public/index.html -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
- 项目在手机中展示的时候,viewport-可视化区域,width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no 可视化区域宽度 = 设备宽度,初始缩放比例1,最大缩放比例1,不允许用户缩放