scss

Prism is a lightweight, robust, elegant syntax highlighting library. 👣 Steps Create a Vue project and install Prism and Vue Prism Component. npm i -g @vue/cli vue create vue-demo cd vue-demo npm i prismjs vue-prism-component Register Prism in src/main.js. import "prismjs" ; import "prismjs/themes/prism-funky.css" ; import "prismjs/components/prism-scss.min" ; import "prismjs/plugins/autolinker/prism-autolinker.min" ; import "prismjs/plugins/autolinker/prism-autolinker.css" ; import Prism from "vue-prism-component" ; Vue . component ( "prism" , Prism ) ; Use Prism, e.g. in src/views/prism.vue.

描述：我们想把scss的变量写在一个scss文件中，然后自动导入到.vue文件中直接调用。 1.通过使用 vue-cli-plugin-style-resources-loader 　　前提：导入sass-loader以及node-sass依赖 npm install -D sass-loader node-sass 　　安装： vue add style-resources-loader 　2.配置相关文件（vue.config.js） const path = require('path') module.exports = { pluginOptions: { 'style-resources-loader': { 'preProcessor': 'scss', 'patterns': [ path.resolve(__dirname, './src/styles/abstracts/*.scss'),//导入的scss文件的路径 ] } } } 　然后便可以实现，其他less等也是同等操作， 最后附上官方文档： https://cli.vuejs.org/zh/guide/css.html 来源： https://www.cnblogs.com/kongbaifeiye/p/12149028.html

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 本地安装好SCSS后，用WebStorm工具新建一个'*.scss'文件，就会自动提醒是否'Add watcher'，直接点击一下就OK啦；前提是要本机安装了Ruby和SCSS才行; 这样WebStorm就会自动新建一个scss的'watcher'： 现在，当我们在项目里新建一个'style.scss'后，WebStorm就会自动也生成一个'style.css'； 因为，我们是想要把'style.css.map'文件也一起生成，所以需要修改'SCSS'的'File Watcher'； ctrl + alt + s，打开'Settings'--'File Watchers'，然后双击'SCSS'：下面是默认的'SCSS File Watcher' 修改下面两个地方就可以一起生成'*.map'文件啦： 'Arguments': --no-cache --update $FileName$:$FileNameWithoutExtension$.css 修改后： 'Arguments': --no-cache --update --sourcemap --watch $FileName$:$FileNameWithoutExtension$.css 另一处： 'Output paths to refresh':

这是一个比较笨的方法，有几个主题写几套样式，优点使用起来比较简单 ，缺点不高级维护起来比较麻烦 基于scss 1.首先先在你的文件夹下新建文件夹如下： theme.scss //.el-header,.el-footer 的背景色 $background - main - color1 : # 3 b69d6 ; //背景色 $background - main - color2 : # 209 F5C ; //背景色 $background - main - color3 : # 283444 ; //背景色 $background - main - color4 : #c73c27 ; //背景色 style.scss //可以写颜色由于多个页面避免重复的样式编写 @ import "./theme.scss" ; //引入声明的皮肤文件 //初次进入调用 @mixin background - main - color ( $color ) { //@mixin 后面的函数名称为自定义。 background - color : $color ; //背景色默认为参数 [ background - main - color = "background-main-color2" ] & { //如果条件成立，背景色则用$background-main-color2

FIS3是国内百度公司产出的一款前端工程构建工具，FIS3可以解决前端工程中性能优化、资源加载（异步、同步、按需、预加载、依赖管理、合并、内嵌）、模块化开发、自动化工具、开发规范、代码部署等问题，首先来简单的实现资源合并压缩提高性能等问题。 安装fix3 npm install -g fis3 创建项目目录 cd 进入此目录中初始化，执行 fis3 init 对需要的插件进行安装 ，比如安装scss编译插件： npm install -g --save-dev fis-parser-node-sass 注意：如果 fis-parser-node-sass 安装失败，请卸载nodejs，安装低版本即可 让 fis3 产出能够支持相对路径。 npm install -g fis3-hook-relative 常用fis3插件 http://fis.baidu.com/fis3/docs/common-plugin.html 配置文件 打开fis-conf.js 做相应的配置 // 保持发布使用相对路径 fis.hook('relative'); fis.set('domain_test', ''); // 预发布环境 fis.set('domain_pre', 'http://test.zuobaiquan.com'); // 线上环境 fis.set('domain_build',

1.Drawer 抽屉中如果页面太长，需要实现可以滚动下面是代码 注意css样式必须在 scss中不能再 scoped中 <style rel="stylesheet/scss" lang="scss"> .el-drawer.rtl{ overflow: scroll ] </style> .rtl为抽屉打开方向，根据自己的自行修改 来源： CSDN 作者： cnsummerLi 链接： https://blog.csdn.net/qq_39689605/article/details/103770641

首先要了解什么是CSS 预处理器？ SCSS是一种CSS预处理语言 定义了一种新的专门的编程语言，编译后形成正常的css文件，为css增加一些编程特性，无需考虑浏览器的兼容性（完全兼容css3），让css更加简洁、适应性更强，可读性更佳，更易于代码的维护等诸多好处。CSS预处理语言有SCSS (SASS) 和LESS、POSTCSS 那么SCSS和SASS 有什么区别呢 · 文件扩展名不同，文件后缀分别是“.scss”和“.sass” · sass是以严格缩进语法规则来编写代码的，不包括大括号和分号，而scss的语法和css书写语法类似；sass的安装和使用不细说了； · scss是sass3.0引入的语法，可以理解scss是sass的一个升级版本，是一种SCSS-like语言，弥补了sass和css之间的鸿沟； 这篇文章是记录的在VUE项目中SCSS的使用 vue项目上安装SCSS和开发入门 ① 使用vue-cli模板创建新项目：vue init webpack myvue ② 安装sass 依赖包 ，在cmd界面输入： npm install sass-loader --save-dev npm install node-sass --sava-dev ③ 在build文件夹下的webpack.base.conf.js的rules里面添加配置 { test: /\.scss$/

主要采用scss 编程式思想实现 以上文件从上到下进行说明 _variables.scss 文件主要写主题色 字体边框等变量 内容如下： ————————————————————————————————————————————————— // colors $colors: ( // 主题色 'primary': #0066ff, "header-bg":#fff, "header-text":#000, 'pages-bg': #f6f7fb, 'border-color': #f2f2f2, 'page-bottom': #d4d9de, 'status-color': #c3672c, 'info': #4b67af, 'danger': #791a15, 'blue-1': #1f3695, 'blue': #1e78ff, 'gree': #07c160, 'white': #fff, 'white-1': #fcfcfc, 'white-2': #eceef0, 'light': #f9f9f9, 'light-1': #d4d9de, 'grey': #808080, 'grey-1': #666, 'dark-1': #343440, 'dark': #222, 'black': #212121, 'end': #fcb102, //warrary 页面steps

Sass(Syntactically Awesome Style Sheets) ,是一种css预处理器和一种语言, 它可以用来定义一套新的语法规则和函数，以加强和提升CSS. 它有很多很好的特性，但是它有类似Ruby的语法，没有花括号，没有分号，遵循严格的缩进 它在书写规则，变量命名方面和CSS代码有着很大的区别。于是，后来官方在2010年推出了一个全新的语法，叫做SCSS, 意思是 Sassy CSS. 这个语法带来了对CSS友好的语法，试图弥合Sass和CSS之间的差别. 那么，它到底有哪些特性呢，我们来看一下: https://www.cnblogs.com/wphl-27/p/9765647.html SCSS 教程： https://www.jianshu.com/p/a99764ff3c41 https://www.jianshu.com/p/3259976b414b css媒体查询 MDN JS new Date()格式化 来源： CSDN 作者： Benjaminpcm 链接： https://blog.csdn.net/yexudengzhidao/article/details/103638062

起因：需要搭建一个自动打包处理 sass / js （es6），自动监听文件变化时浏览器自动刷新的开发环境 先放 gulpfile.js 文件，其他的详细配置稍后再介绍 const { src, dest, parallel,series, watch } = require('gulp'); const sass = require('gulp-sass'); const less = require('gulp-less'); const minifyCSS = require('gulp-csso'); const concat = require('gulp-concat'); const babel = require('gulp-babel'); const autoprefixer = require('gulp-autoprefixer') const browserSync = require('browser-sync').create() sass.compiler = require('node-sass'); // Static server async function serve() { await browserSync.init( { server: { baseDir: './build', } } ) } // html 复制 function