Sass

本文将介绍 CSS 中一个非常有意思的属性 mask 。 顾名思义，mask 译为遮罩。在 CSS 中，mask 属性允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。 其实 mask 的出现已经有一段时间了，只是没有特别多实用的场景，在实战中使用的非常少，本文将罗列一些使用 mask 创造出来的有意思的场景。 语法 最基本，使用 mask 的方式是借助图片，类似这样： { /* Image values */ mask: url(mask.png); /* 使用位图来做遮罩 */ mask: url(masks.svg#star); /* 使用 SVG 图形中的形状来做遮罩 */ } 当然，使用图片的方式后文会再讲。借助图片的方式其实比较繁琐，因为我们首先还得准备相应的图片素材，除了图片，mask 还可以接受一个类似 background 的参数，也就是渐变。 类似如下使用方法： { mask: linear-gradient(#000, transparent) /* 使用渐变来做遮罩 */ } 那该具体怎么使用呢？一个非常简单的例子，上述我们创造了一个从黑色到透明渐变色，我们将它运用到实际中，代码类似这样： 下面这样一张图片，叠加上一个从透明到黑色的渐变， { background: url(image.png) ; mask: linear

报错信息： npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! node-sass@4.14.0 postinstall: `node scripts/build.js` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the node-sass@4.14.0 postinstall script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. 解决方案：直接在当前目录下进行node-sass 的数据源设置 npm config set sass_binary_site=https: // npm.taobao.org/mirrors/node-sass 再次执行： npm i 来源： oschina 链接： https://my.oschina.net/zhenggao/blog/4298870

本文字数：349 预计阅读时间：1.5分钟 问题：Vue中使用 scss 配置全局变量时 报错 ~ 版本信息： Vue 2.6.11 Cli 4.5.00 sass-loader 10.0.2 node-sass 4.14.1 Sass、Less是强化 CSS 的辅助工具，它并不是一门语言，但能有效提高开发效率，最直白的感受是大幅度减少了各种寻找Class，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。 本次记录在Vue中引入sass以及如何解决配置全局变量时报错的问题； 1、安装sass-loader： npm install -D sass-loader sass 然后你就可以导入相应的文件类型，或在 所有的 .vue 文件中这样来使用：(注意style标签必须设置lang属性为scss) <style lang="scss"> //@import '全局变量scss' $color: red; </style> 2、配置全局变量： 如果在每一个.vue文件都引入import scss文件，还是比较麻烦的，所以直接全局搞定，无需任何地方引入 步骤如下： 安装node-sass： npm install node