Vue2工程中使用SCSS定义工具样式

2022-10-10 22:29| 来源: 网络整理| 查看: 265

Sass世界上最成熟、稳定和强大的CSS扩展语言 | Sass中文网Sass(Scss)是世界上最成熟、稳定和强大的专业级CSS扩展语言,Sass(Scss)中文网主要致力于Sass(Scss)在中国的推广，通过Sass(Scss)来改变前端工程师，提高效率，降低成本。https://www.sass.hk/

工具样式的优点：当提前定义好工具样式后，后面就可以直接用它写样式了，无需频繁增加新的class来写样式。

1. 安装SASS（SCSS）包 # SASS（SCSS）用于生成css工具类，和less差不多 npm i -D sass sass-loader 2. 项目结构

在/src/assets/scss文件夹下创建两个文件，_variables.scss文件用来存变量，style.scss用来定义工具类。

3. 在main.js入口文件中引入工具类 // /src/main.js // 工具样式SASS（类似于less） import './assets/scss/style.scss' 4. 在 _variables.scss 中定义变量 // /src/assets/scss/_variables.scss // color 变量 $colors:( "primary":#db9e3f, "info":#4b67af, "blue":#4394e4, "blue-1":#1f3695, "danger":#791a15, "white":#fff, "light":#f9f9f9, "light-1":#d4d9de, "grey":#999, "grey-1":#666, "dark-1":#343440, "dark":#222, "black":#000, ); $border-color:map-get($colors, "light-1"); //边框颜色 // font-size 变量 $font-sizes:( "xxs":0.6154, //8px "xs":0.7692, //10px "sm":0.9231, //12px "md":1, //13px "lg":1.0769, //14px "xl":1.2308, //16px ); $base-font-sizes:1rem; // 主轴 $flex-jc:("start":flex-start, "end":flex-end, "center":center, "between":space-between, "around":space-around, ); // 交叉轴 $flex-ai:("start":flex-start, "end":flex-end, "center":center, "stretch":stretch, //交叉轴等高 ); // 常用边距 spacing $spacing-types:(m:margin, p:padding,); $spacing-directions:(t:top, r:right, b:bottom, l:left,); $spacing-base-size:1rem; $spacing-sizes:(0:0, 1:0.25, 2:0.5, 3:1, 4:1.5, 5:3,); 5. 在 style.scss 中定义工具类

按照BootStrap的命名规则定义工具类：Bootstrap v4 工具类中文文档

// /src/assets/scss/style.scss @import './_variables.scss'; //变量 // 因为文件名前有下划线可以直接这样引用 @import './variable'; // 1、样式重置 reset * { box-sizing: border-box; //以边框为准，防止网页撑大 outline: none; //去除高亮 } html { font-size: 13px; //基础字体大小 } body { margin: 0; font-family: Arial, Helvetica, sans-serif; //字体家族 line-height: 1.2em; //行高 background: #f1f1f1; //背景 -webkit-font-smoothing:antialiased;//字体平滑 } a { color: #999; } p { line-height: 1.5em; } // 2、网站色彩和字体定义 // colors 工具类 @each $colorKey,$color in $colors { .text-#{$colorKey} { color: $color; } .bg-#{$colorKey} { background-color: $color; } } // text 工具类 // text align @each $var in (left, center, right) { .text-#{$var} { text-align: $var !important; } } // font size @each $sizeKey,$size in $font-sizes { .fs-#{$sizeKey} { font-size: $size*$base-font-sizes; } } // text overflow 文字超出一行溢出隐藏 .text-ellipsis{ display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; //不换行 } // 宽度样式 .w-100{ width: 100%; } .h-100{ height: 100%; } // 3、通用flex布局样式定义 .d-flex { display: flex; } .flex-column { //纵向排列 flex-direction: column; } .flex-wrap{ //换行 flex-wrap: wrap; } // 主轴 @each $key,$value in $flex-jc { .jc-#{$key} { justify-content: $value; } } // 交叉轴 @each $key,$value in $flex-ai { .ai-#{$key} { align-items: $value; } } .flex-1 { //占据剩余的所有空间 flex: 1; } .flex-grow-1 { flex-grow: 1; } // 4、常用边距定义 spacing @each $typeKey,$type in $spacing-types { //.m-1 @each $sizeKey,$size in $spacing-sizes { .#{$typeKey}-#{$sizeKey} { #{$type} : $size*$spacing-base-size; } } //.mx-1 .my-1 @each $sizeKey,$size in $spacing-sizes { .#{$typeKey}x-#{$sizeKey} { #{$type}-left : $size*$spacing-base-size; #{$type}-right : $size*$spacing-base-size; } .#{$typeKey}y-#{$sizeKey} { #{$type}-top : $size*$spacing-base-size; #{$type}-bottom : $size*$spacing-base-size; } } //.mt-1 @each $directionKey,$direction in $spacing-directions { @each $sizeKey,$size in $spacing-sizes { .#{$typeKey}#{$directionKey}-#{$sizeKey} { #{$type}-#{$direction}: $size*$spacing-base-size; } } } } // 5、其他所需全局样式 // 按钮 button .btn{ border: none; border-radius: 0.1538rem; font-size: map-get($font-sizes, 'sm')*$base-font-sizes; //从之前预定义的尺寸中选择一个 padding: 0.2rem 0.6rem; } // 导航 nav .nav{ display: flex; //横向排布 .nav-item{ //普通导航 border-bottom: 3px solid transparent; //加透明边框是为了保证对齐 padding-bottom: 0.2rem; &.active{ //加上&符号表示为上一层的本身，因为active不是nav-item的子集 color: map-get($colors, 'primary'); border-bottom-color: map-get($colors, 'primary'); } } &.nav-inverse{ //反色导航 .nav-item{ color: map-get($colors, 'white'); &.active{ border-bottom-color: map-get($colors, 'white'); } } } } // 边框 borders @each $dir in (top,right,bottom,left) { .border-#{$dir} { border-#{$dir}: 1px solid $border-color; } } // 6、精灵图 Sprite // 定位工具http://www.spritecow.com/ // 使用定位工具时记得开启2*和% .sprite{ background: url(../images/index.png) no-repeat 0 0; //背景图片，不重复，左上角对齐 background-size: 28.8462rem; //375px 背景尺寸，一般设计图是双倍像素750px display: inline-block; //为了设置宽高 &.sprite-news{ //爆料站图标 background-position: 63.546% 15.517%; width: 1.7692rem; //23px height: 1.5385rem; //20px } &.sprite-story{ //故事站图标 background-position: 90.483% 15.614%; width: 1.7692rem; //23px height: 1.5385rem; //20px } &.sprite-arrow{ //上箭头图标 background-position: 38.577% 52.076%; width: 0.7692rem; //10px height: 0.7692rem; //10px } } 6. 在 /src/views/ArticleView.vue 文件中使用工具类，并通过SCSS语法规则编写css

SCSS语法规则：嵌套规则、父选择器&、属性嵌套（Sass教程 Sass中文文档 | Sass中文网）

{{model.title}} 2019-06-19 相关资讯 {{item.title}} export default{ props:{ id:{required:true} }, data(){ return{ model:{} } }, methods:{ async fetch(){ const res=await this.$http.get(`articles/${this.id}`) this.model=res.data }, // 编程式导航实现后退功能 goBack() { this.$router.go(-1) }, }, created(){ this.fetch() }, watch:{ //单页面要想跳转到相同组件，需要监听/:id id:'fetch', // id(){ // this.fetch() // }, } } .page-article { .article-body { img { max-width: 100%; height: auto; } } .icon-back { font-size: 1.5rem; } } 7. SCSS编写小技巧

（1）px to rem插件：

写下物体的px大小后点击option+Z可以转换为rem。option+S：设置默认字体大小数值。

（2）精灵图片定位工具

定位2x图时，使用定位工具记得开启 2* 和 %

Sprite Cow - Generate CSS for sprite sheetshttp://www.spritecow.com/

参考文章：

[第三章]NodeJs + VueJs (Express + ElementUI) 全栈开发王者荣耀手机端官网和管理后台 - 第三章_哔哩哔哩_bilibili免费不易，淘宝同名店铺《全栈之巅》求关注QQ2群 839167184，微信加小姐姐732500779拉群Git 源码: https://github.com/wxs77577/node-vue-moba，代码都在各个分支里，持续更新中，欢迎 star；编辑器 vscode，主题 material theme，字体mononoki；请先安装 nodejs 10+ ，mongodb server，nohttps://www.bilibili.com/video/BV1S4411W79F?p=22&spm_id_from=333.1007.top_right_bar_window_history.content.clickcss --- > 使用scss生成常用的基本css样式_栗子好好吃的博客-CSDN博客_使用scss生成常用的基本css样式"工具样式"的概念和 SASS(SCSS)在webpack中使用sass安装sass和sass-loader$ npm i sass sass-loader由于使用了脚手架,安装完毕后重启前端即可样式重置其实就是样式的初始化// reset* { box-sizing: border-box; // 以边框为准. css3盒模型 outline: none; // 不需...https://blog.csdn.net/piano9425/article/details/104960783

【本文地址】

公司简介

联系我们