Sass

名称 简述 Auto Close Tag 自动闭合 HTML 标签 Auto Import import 提示 Auto Rename Tag 修改 HTML 标签时 , 自动修改匹配的标签 Airbnb react snippets react 编码规范 AutoFileName 自动补全文字名 Babel JavaScript babel 插件 , 语法高亮 Babelrc .babelrc 文件高亮提示 Beautify css/sass/scss/less css/sass/less 格式化 Better Align 对齐赋值符号和注释 Better Comments 编写更加人性化的注释 Bookmarks 添加行书签 Bracket Pair Colorizer 用不同颜色高亮显示匹配的括号 Can I Use HTML5 、 CSS3 、 SVG 的浏览器兼容性检查 Code Runner 运行选中代码段（支持多数语言） Code Spell checker 单词拼写检查 CodeBing 快速打开 Bing 并搜索，可配置搜索引擎 Color Highlight 颜色值在代码中高亮显示 Color Info 小窗口显示颜色值， rgb,hsl,cmyk,hex 等等 Color Picker 拾色器 CSS-in-JS CSS-in-JS 高亮提示和转换

1、问题分析 由于node-sass这个包很大，同时npm服务器在国外，所以下载时会不稳定，导致下载失败或者出现这个错误. 2、问题解决办法 使用cnpm进行安装，步骤如下： 卸载node-sass cnpm uninstall --save node-sass 重新安装 cnpm install --save node-sass 来源： oschina 链接： https://my.oschina.net/u/3481095/blog/3123073

本节我们学习 Sass 中的嵌套，嵌套大家应该不陌生，在 HTML 中就支持标签的嵌套。Sass 中允许一个 CSS 样式嵌套进另一个样式中，内层样式仅适用于外层样式的选择器范围内。 示例： 例如下面这段 CSS 代码： .big { color: #ccc; } .big .small { font-size: 14px; } 如果我们要使用 Sass 中的嵌套语法来写，如下所示： 从上图我们可以看到，嵌套的语法其实很简单，相较于 CSS 语言中后代选择器的写法，嵌套规则看起来要直观很多。 使用 Sass 嵌套来写代码，可以减少父类选择器的重复，不过需要注意的是，我们最好不要嵌套太多层选择器，因为嵌套层数越多性能越低。一般我们在实际应用中，嵌套三层左右就差不多啦。 引用父选择器 & 在嵌套 CSS 规则时，有时候我们需要直接使用到嵌套外层的父选择器，比如当给某一个元素设定 hover 样式时或者是当 body 元素有个 classname 时，可以用 & 符号来表示嵌套规则外层的父选择器。 示例： 例如下面这段代码： a { color: #ccc; font-size: 12px; } a:hover { color: #000; } 我们可以这样写： 上图中 & 符号被解析为选择器 a ，即父选择器。一般 & 符号是出现在选择器的前面位置，例如上述代码中的 &:hover 。

本节我们来学习 Sass 的编译，我们写好的 Sass 代码，浏览器是不能识别的，Sass 只不过是作为一个预处理工具，只有将 Sass 代码编译成 CSS 代码后，才能够使用。那么 Sass 要如何编译成 CSS 代码呢，这就是我们本节需要讲到的内容。 Sass 的编译方法有很多，例如： 命令行编译模式：比较简单，可以直接在终端中输入 Sass 指令来编译，本节我们主要讲命令行编译模式的使用。 GUI工具编译：有的比较多的看一工具有 Koala、CodeKit、Scout、Compass.app 等，这些工具都需要安装。 自动化编译：可以使用 Grunt 或者 Gulp 来配置 Sass 自动化编译。 命令编译 命令编译就是在终端中输入 sass 命令来编译 Sass 代码，这种编译方式使用起来很简单。 示例： 假设现在有一个Sass文件，文件名为 style.scss （Sass 文件的扩展名名 .scss ），我们需要将这个文件中的代码编译成 CSS 代码，可以执行如下命令： sass style.scss style.css 命令执行成功后，会自动创建一个 style.css 文件。但是这样有一个问题，就是每次更改了 style.scss 文件中的内容，都需要执行一次编译命令，就会很麻烦。 如果要解决上述问题，可以使用监听命令 --watch ，例如： sass -

一.前言 webpack配置较为繁杂，大部分教程开篇就从基本术语开始讲起，容易让人望而生畏。so，我已实用为目的写了这篇文章。 项目地址 github 码云 二.目标 <input type="checkbox" checked disabled>支持热替换 <input type="checkbox" checked disabled>支持scss，自动添加前缀 <input type="checkbox" checked disabled>支持eslint <input type="checkbox" checked disabled>支持babel <input type="checkbox" checked disabled>支持图片压缩 <input type="checkbox" checked disabled>支持多js入口，多html模板 三.搭建环境 创建 package.json 文件 npm init -y 首先，安装 webpack，webpack-cli 和 cross-env npm install --save-dev webpack webpack-cli cross-env 其中 cross-env 主要是用于比较方便的跨平台设置 process.env.NODE_ENV ,用于区分开发环境和生产环境。 新建目录src，目录下创建index

webpack 是什么？ 打包工具 （静态资源打包工具） webpack 的特点？ js依赖进行整合处理 （打包整合） 一些预处理的sass，less可以在环境中进行编译 （转换） 可以对js、html、图片等进行压缩 （优化） webpack的核心？ entry 入口文件 // 好比main.js output 出口文件 // 好比dist 打包之后的文件夹 plugin 插件 // 自动生成html文件等插件 loader 转换器 // sass less 转换成我们想要的文件类型 dev-serve 服务器 // 使我们webpack在本地运行 服务 mode 模式 // 可以切换开发环境 和 生成环境 webpack 手动搭建步骤 创建一个文件夹，然后在小黑框进行安装 npm install webpack --save-dev npm install webpack-cli --save-dev 确认 当前环境有没有 webpack -v 在想要成为 打包文件的文件夹中，使用 npm init -y 初始化一个package.json 创建一个src，src下面创建一个index.html ,里面加一个div div随便起一个 id 名字，让引入bundle.js < ! DOCTYPE html > < html lang = "en" > < head > <