scss | 易学教程

webpack4 scss文件处理

阅读更多关于 webpack4 scss文件处理

1.安装依赖 npm i sass-loader node-sass style-loader css-loader -D 2.创建index.html <html> <head> <meta charset="UTF-8"> <title>index</title> </head> <body> </body> </html> 3.新建index.scss html{ background-color: red; } 4.在main.js文件中引用scss import './css/index.scss' 5.在webpack.config.js中配置处理scss module: { rules: [ { test:/\.scss$/, use:['style-loader','css-loader','sass-loader'] } ] } 来源： https://www.cnblogs.com/lemonzwt/p/11756205.html

Sass/Scss

阅读更多关于 Sass/Scss

　　一、什么是Sass/Scss. 　　 Sass和Scss是指的是同一个东西。Sass的语法更近ruby，而Scss更接近css代码。Sass/Scss是对css的扩展，但是scss/sass不能之间直接运行在浏览器中，需要编译成css. 　　　　二、在命令行中安装Sass和使用　　首先需要在电脑上安装node.然后使用npm安装Sass. 　　　npm install -g sass 　　常用的命令　　sass main.scss main.css 　　sass --watch main.scss:main.css 　　三、Sass的语法　　 a、nesting(嵌套) 　 #main p { color: #00ff00; width: 97%; .redbox { background-color: #ff0000; color: #000000; } } 　　编译后： #main p { color: #00ff00; width: 97%; } #main p .redbox { background-color: #ff0000; color: #000000; } 　　属性嵌套：　　 .container { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex;

Sass(SCSS)中文手册――入门

阅读更多关于 Sass(SCSS)中文手册――入门

简书原文 https://www.jianshu.com/p/e82c27aa05c7 前言该中文手册是我在 Sass中文文档的基础上编辑的，或者也可以理解为就是Sass中文文档的翻版。之所以有这篇文章的原因还是在于Sass中文文档并没有全部翻译成中文，这样每次我查找文档的时候又需要对其再理解一次，与其如此，不如我自己完善这份文档，并且加上一些我自己的理解或者注解，这样以后我查阅的时候可以更好的使用该份文档。同时，我将这篇文章公开出来，当然，如果喜欢看原文的可以去Sass官网看中文文档，这完全没有问题，不可否认，那才是正版，我只是希望我写的东西能帮助到读者，仅此而已。考虑到写成一篇整体篇幅太大，因此将中文手册分成两篇，这篇只是大概对Sass进行介绍，下篇才是具体的语法。大纲 1、什么是Sass? 2、为什么使用Sass? 3、Sass和SCSS的区别和联系 4、Sass的安装和使用 5、Sass的输出样式 1、什么是Sass? Sass (Syntactically Awesome StyleSheets) CSS(Cascading Style Sheets)(层叠样式表) Sass 是对 CSS 的扩展，让 CSS 语言更强大、优雅。它允许你使用变量、嵌套规则、 mixins、导入等众多功能，并且完全兼容 CSS 语法。 Sass 有助于保持大型样式表结构良好，

鍦╒ue椤圭洰涓娇鐢⊿ass-----锛坰css锛夊畨瑁呰瑙ｏ紝鏂版墜璺熺潃鍋氬嵆鍙?/span>

阅读更多关于鍦╒ue椤圭洰涓娇鐢⊿ass-----锛坰css锛夊畨瑁呰瑙ｏ紝鏂版墜璺熺潃鍋氬嵆鍙?/span>

鎻愮ず锛氫笉鐢ㄥ畨瑁呭叾浠栫幆澧?-缃戜笂鍏朵粬鍦版柟璇翠粈涔堝畨瑁卹ubby锛熺幆澧冿紝鍦ㄨ繖涓嶇敤-- - Vue椤圭洰涓婂畨瑁卻css-- 1.浣跨敤vue-cli妯℃澘鍒涘缓鏂伴」鐩細 vue init webpack myvue 2.瀹夎sass 渚濊禆鍖锛屽湪cmd鐣岄潰杈撳叆锛欬/span> 3. 鍦╞uild鏂囦欢澶逛笅鐨剋ebpack.base.conf.js鐨剅ules閲岄潰娣诲姞閰嶇疆 { test: /\.scss$/, loaders: ['style', 'css', 'sass'] } 4.浣跨敤scss鏃跺€欏湪鎵€鍦ㄧ殑style鏍峰紡鏍囩涓婃坊鍔爈ang=鈥漵css鈥濆嵆鍙簲鐢ㄥ搴旂殑璇硶锛屽惁鍒欐姤閿橖/strong> scss浣跨敤娴嬭瘯锛氬涓嬫祴璇曚慨鏀瑰瓧浣撻鑹秉/strong> */ /*--> */ 5.鏁堟灉鏂囩珷鏉ユ簮: https://blog.csdn.net/AIB_Kasic/article/details/90719731

Sass/Scss

阅读更多关于 Sass/Scss

銆€銆€ 涓€銆佷粈涔堟槸Sass/Scss. 銆€銆€ Sass鍜孲css鏄寚鐨勬槸鍚屼竴涓笢瑗裤€係ass鐨勮娉曟洿杩憆uby锛岃€孲css鏇存帴杩慶ss浠ｇ爜銆係ass/Scss鏄css鐨勬墿灞曪紝浣嗘槸scss/sass涓嶈兘涔嬮棿鐩存帴杩愯鍦ㄦ祻瑙堝櫒涓紝闇€瑕佺紪璇戞垚css. 銆€銆€ 銆€銆€浜屻€佸湪鍛戒护琛屼腑瀹夎Sass鍜屼娇鐢?/span> 銆€銆€棣栧厛闇€瑕佸湪鐢佃剳涓婂畨瑁卬ode.鐒跺悗浣跨敤npm瀹夎Sass. 銆€ 銆€銆€npm install -g sass 銆€銆€甯哥敤鐨勫懡浠｜/span> 銆€銆€sass main.scss main.css 銆€銆€sass --watch main.scss:main.css 銆€銆€ 涓夈€丼ass鐨勮娉旤/span> 銆€銆€ a銆乶esting(宓屽) 銆€ #main p { color: #00ff00; width: 97%; .redbox { background-color: #ff0000; color: #000000; } } 銆€銆€ 缂栬瘧鍚庯細 #main p { color: #00ff00; width: 97%; } #main p .redbox { background-color: #ff0000; color: #000000; }

Vue-cli3.0搭建和一些坑

阅读更多关于 Vue-cli3.0搭建和一些坑

[2018-07-31更新]： vue-cli 3.0正式版的中文文档已经出来了，详细的可以参考： https://cli.vuejs.org/zh/guide/ 一、安装Vue和创建项目: # 安装 npm install -g @vue/cli注：快捷键win+R，输入cmd并运行，默认C盘，可设置对应的磁盘，如F盘，输入cd\到C盘更目录，再输入f:进入F盘，最后就是自己自定义的文件夹cd vue # 查看已安装版本 vue --version 或者 vue -V # 卸载 npm uninstall @vue/cli -g # 新建项目 vue create my-project注：创建自定义项目(my-porject)的时候，可自定义设置项目相关配置，可以End默认，如果设置了的可以在vue.config.js配置文件中再次修改。 # 项目启动 npm run serve # 打包 npm run build 二、Vue相关配置--vue.config.js Vue-cli3.0的配置不同于之前版本，大大的简化了开发者工作，更人性化，只有一个配置文件-vue.config.js。常用配置：1、样式预处理less，sass，公共样式文件设置　　　　　2、端口设置和热加载　　　　　3、第三方插件 vue.config.js --- 基础模版 module

Sass/Scss 介绍

阅读更多关于 Sass/Scss 介绍

1、sass的特色功能兼容CSS3；在CSS基础上增加了变量、嵌套、函数、混合等功能；提供控制指令等高级功能自定义输出格式 2、sass的语法格式（两种） SCSS（Sassy CSS / 野蛮的CSS / 强硬的CSS）语法格式，基于CSS3进行扩展。以 .scss 作为扩展名；强制使用分号（；）; 强制使用CSS 大括号（ { } ） SASS（Indented Sass）是一种缩进的格式。以 .sass 作为扩展名； 3、sass 和 scss 的区别 sass和scss从本质上是一回事儿，只是两种不同的语法格式。它们统称为 sass 。scss是sass更新到3.0版本扩展出来的语法格式。我们平时开发大部分人都习惯了CSS的语法格式，也就是强制使用分号和选择器后要用花括号的习惯。那么scss是个不错的选择。下一篇文章我们介绍《 SASS - 嵌套规则 - CSS的功能扩展1 》来源： https://www.cnblogs.com/wangweizhang/p/11672624.html

vue-cli3 配置相关

阅读更多关于 vue-cli3 配置相关

引用全局变量，混入。scss为例: 1、安装依赖: 　　npm i style-resources-loader vue-cli-plugin-style-resources-loader -D 2、配置vue.config.js文件 pluginOptions: { 'style-resources-loader': { preProcessor: 'scss', // 引入全局样式变量 patterns: [ path.resolve(__dirname, 'src/assets/styles/var.scss'), path.resolve(__dirname, 'src/assets/styles/mixin.scss') ] } }, 　　让样式找到源开发环境，找到源的样式：未找到源的样式：配置文件： css: { // 让样式找到源 sourceMap: true, }, 　　 vue.config.js： const path = require('path') const resolve = function(dir) { return path.join(__dirname, dir) } module.exports = { css: { // 让样式找到源 sourceMap: true, }, pluginOptions: { 'style

scss定义全局变量引入sass-resources-loader报错

阅读更多关于 scss定义全局变量引入sass-resources-loader报错

开发jquery多页应用，引入sass-resources-loader后报 Make sure 'options.resources' is String or Array of Strings. 查找后发现是由于引入的路径错误造成的，最开始引入的时候是这样的 'sass-loader', { loader: 'sass-resources-loader', options: { // Provide path to the file with resources resources: '../src/assets/css/vars.scss' }, }, 由于写的是相对路径，可能解析不了还是什么原因，然后试了下绝对路径 'sass-loader', { loader: 'sass-resources-loader', options: { // Provide path to the file with resources resources: path.resolve(__dirname,'../src/assets/css/vars.scss') }, }, bingo，解决了。来源： https://www.cnblogs.com/dxzg/p/11660567.html

sass的语法及其用法

阅读更多关于 sass的语法及其用法

1、sass语法 1.1 css的编译模式 css --- 普通 sass / scss --- 高效 // ********* less --- 高效 1.2 sass介绍来源： ruby语言基础的版本，后缀名为sass：没有{},只能通过缩进来实现 -- 可读性差、难以维护 // css .box {width: 100px} // .sass .box width: 100px; // 据说是这样 .scss 后缀 --- 可读性高、便于维护 html { background: red } // scss语法--嵌套 --- 权重 .box { color: blue; .test { font-size: 20px; } } // ==》 .box {color: blue;} .box .test { font-size: 20px;} 1.3 如何使用scss 最终需要使用的是css文件，编写的scss文件转换工具 gulp / webpack / ruby工具 / 编辑器插件选用gulp来处理scss文件 2、sass用法 2.1 安装 sass 模块 cnpm i gulp-sass -S (推荐) cnpm i gulp-sass-china -S 2.2 配置处理scss文件gulp的任务 gulp.task('scss2css', () => {

订阅 scss