Sass

Vue CLI CSS pre-processor option: dart-sass VS node-sass?

由 馋奶兔 提交于 2020-02-26 06:45:36
问题 When creating a new project with CLI (v3.7.0), there is an option to choose between dart-sass or node-sass compiler. How do these compare to each other, to be more specific than declared in Vue docs? A Tip on Sass Performance Note that when using Dart Sass, synchronous compilation is twice as fast as asynchronous compilation by default, due to the overhead of asynchronous callbacks. To avoid this overhead, you can use the fibers package to call asynchronous importers from the synchronous code

sass计算高度

由 坚强是说给别人听的谎言 提交于 2020-02-25 22:15:19
页面布局时，有时候需要两个div充满父div空间，设定一个div尺寸后，可以使用css计算高度设置另一个尺寸： <style> .wrap{ width:1000px; } .left{ width:200px; } .right{ /*计算函数 calc()*/ width:calc(100%-200px); } </style> <div class="wrap"> <div class="left"></div> <div class="right"></div> </div> 使用sass预编译css，可以参考如下代码 .table{ // 计算高度 height: calc(100% - #{$--operation-height}); } 来源： https://www.cnblogs.com/donfaquir/p/12363985.html

node-sass 下载失败 解决方案

由 ⅰ亾dé卋堺 提交于 2020-02-25 19:39:13
//建议不要用cnpm 安装有各种诡异的bug 可以通过如下操作解决npm速度慢的问题 npm install --registry= https://registry.npm.taobao.org 试过上面方法还不行的同学 ，可以把package.json中的node-scss依赖改为："node-sass": "^4.5.0", npm install --registry= https://registry.npm.taobao.org执行的时候， 出现错误 gyp ERR! configure error gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable. 然后又去下载python2安装后设置了环境变量， 然后又重新执行npm install --registry= https://registry.npm.taobao.org 启动项目，一直报没有sass-loader和node-sass模块， 然后我的解决方案是分别执行这两条命令： 1、npm install sass-loader --save-dev 2、npm install node-sass --save-dev 来源： https://www.cnblogs.com

vue中引入sass

由 萝らか妹 提交于 2020-02-25 18:09:14
1.配置 (1)命令行： cnpm install node-sass --save-dev cnpm install sass-loader --save-dev cnpm install style-loader --save-dev （2）webpack.base.conf.js的module中加入 { test: /\.scss$/, loaders: ["style", "css", "sass"] } (3)代码： <style lang="scss"></style> 2.如果sass-loader版本过高报错则 命令行 npm uninstall sass-loader npm install sass-loader@7.3.1 --save-dev 来源： CSDN 作者： ??or?? 链接： https://blog.csdn.net/zhangyr_student/article/details/104497557

Which version of SASS is my WebCompiler extension using?

由 江枫思渺然 提交于 2020-02-25 08:30:36
问题 I'm using the WebCompiler extension for VS and I'm trying to find out what version of SASS it's using. I can't for the life of me figure it out. I've tried looking in the extension information (in VS), on the github repo, and in the changelog. Now I'm wondering if it uses on internal version of SASS of if it references it from somewhere else. Please can somebody point me in the right direction? 回答1: Look like the latest node-sass https://github.com/madskristensen/WebCompiler/blob

Webpack - how to determine output style of CSS file?

由 与世无争的帅哥 提交于 2020-02-25 05:16:48
问题 When using Gulp to convert Sass to CSS, I can choose output style of the CSS file between: nested, expanded, compact and compressed. Do I have the same opportunity using Webpack? If yes, can you show me how to configurate Webpack to achieve my goal? Below is my current webpack.config.js - it converts sass to css, translate ES6 to ES5 and it works perfectly: const ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = { entry: [ "./js/app.js", "./scss/main.scss" ], output

Webpack - how to determine output style of CSS file?

由 风流意气都作罢 提交于 2020-02-25 05:16:04
问题 When using Gulp to convert Sass to CSS, I can choose output style of the CSS file between: nested, expanded, compact and compressed. Do I have the same opportunity using Webpack? If yes, can you show me how to configurate Webpack to achieve my goal? Below is my current webpack.config.js - it converts sass to css, translate ES6 to ES5 and it works perfectly: const ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = { entry: [ "./js/app.js", "./scss/main.scss" ], output

Sass-loader error 'options has an unknown property 'indentedSyntax'' when upgrading Vuetify from 1.5 to 2

由 吃可爱长大的小学妹 提交于 2020-02-25 04:11:08
问题 I am upgrading Vuetify in my Vue CLI 3 project from version 1.5 to 2. I have followed these instructions, doing a full install. Since the upgrade, running 'npm run serve' gives me a ton of errors looking like this: error in ./node_modules/vuetify/src/components/VGrid/_grid.sass Module build failed (from ./node_modules/sass-loader/dist/cjs.js): ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema. - options has an

CSS selector to match class with number greater than

由 拟墨画扇 提交于 2020-02-24 11:04:10
问题 I have a mobile hybrid application developed with Sencha Touch 2 which needs some customization based on the iOS version it is running on. I used to have the following selector in my Sass stylesheet: .x-ios-7 { /* put here iOS7 customizations */ } Now with iOS8 the framework adds a x-ios-8 class instead of x-ios-7 and the customizations are obviously broken. Is there a way to select all classes with x-ios-{i} where {i} >= 7? [EDIT] Sass usage is allowed. I don't want to hardcode known cases.

2：什么是sass？

由 大憨熊 提交于 2020-02-22 18:02:07
sass诞生于2007年，是最早的css预处理语言，是采用ruby编写的，因此必须先安装ruby，在安装sass sass早期文件后缀是.sass，采用严格的缩进式语法，通过tab键来控制缩进，来源于ruby，没有大括号以及分号，所以早期不如less，但是后期sass改为scss，sass采用scss为后缀名，Scss不采用缩进式，采用和普通css的语法书写，符合前端人员的开发习惯，因此sass发展迅速。其实sass和scss是一种东西，都称为sass。 官网描述 Sass是一种高于css的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通css更加强大的功能。Sass能提供更简洁，更优雅的语法，提供多种功能创建可维护和管理的样式表 来源： https://www.cnblogs.com/bijiapo/p/5422205.html
订阅 Sass