Sass

首先要安装 Ruby for Window rubyinstaller: http://rubyinstaller.org/downloads/ JRuby: http://jruby.org/download 下载并解压zip包到 C:\，将 ruby.exe 所在的 bin 目录加入到 PATH 环境变量中 然后安装 SASS 和 Compass # gem install sass # gem install compass 让 SCSS 编译的时候，能够找到 Compass 自带的 mixins 先找到 compass mixins 安装的目录： # set COMPASS_LIB=C:\ruby-1.9.3\lib\ruby\gems\1.9.1\gems\compass-0.12.2\frameworks\compass\stylesheets # scss --compass --load-path %COPMASS_LIB% --no-cache --update demo.scss demo.css 来源： oschina 链接： https://my.oschina.net/u/870897/blog/115083

1.下载rubyinstaller，安装sass、compass需要使用ruby环境，因此首先安装ruby环境。在win系统下要安装ruby需要使用rubyinstaller。具体的ruby安装可以参考 https://www.ruby-lang.org/zh_cn/downloads/ 以下简述rubyinstaller安装： 1）进入rubyinstaller官网下载相应的版本（ http://rubyinstaller.org/downloads/ ） 下载完毕，可以傻瓜式安装，但其中一个要说明的步骤是：勾选 Add Ruby executable to your PATH 2.安装compass（安装compass的同时会自动安装sass）： 1）这里的安装在compass的官网有详细的说明（ http://compass-style.org/install/ ）: win+R打开win下的终端，首先是用命令——gem，测试rubyinstaller是否安装成功； 如果出现这样的结果则是表名安装成功，然后正式开始安装： gem install compass 来源： oschina 链接： https://my.oschina.net/u/2487410/blog/749112

由于重新装了一个系统，很多环境配置要重新配置。在想run 一个项目时，出现下面的错误： error in ./src/page/Index.vue Module build failed: Error: Cannot find module 'node-sass' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15) at Function.Module._load (internal/modules/cjs/loader.js:507:25) at Module.require (internal/modules/cjs/loader.js:637:17) at require (internal/modules/cjs/helpers.js:22:18) at Object.sassLoader (E:\trip_user_ui\node_modules\sass-loader\lib\loader.js:46:72) @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue"

#千锋逆战班，打卡第二天# sass是css的预编译语言，比css更高更快更强 将sass语言写在后缀为 .sass 或者 .scss 的文件里面。 .sass文件 和 .scss 文件的区别 在 . scss文件里面和写css语法基本一致 在 . sass文件里面就没有大括号和分号，全部依靠缩进来维持关系 这两个文件被编译成css文件以后是一样的 sass工具编译 .sass 和 .scss文件 1. sass单文件编译 + 先写好一个 . scss 或者 . sass后缀的文件 + 打开命令行，切换到文件的目录 + 输入指令 - > sass 要编译的文件 编译后的文件名 + 每次修改scss文件都需要从新编译一下 2. sass 单文件实时编译 => 你先写好一个 . sass 或者 . scss 后缀的文件 => 打开命令行 , 切换到文件的目录 => 输入指令 - > sass -- watch 要编译的文件 : 编译后的文件名 => 一个终端只能监控一个文件 , 你要是想监控多个文件 , 需要开启很多终端 3. sass 文件夹实时编译 => 把一个文件夹里面的 sass 文件全部编译到另一个文件夹里面 => 先准备好一个文件夹 , 这个文件夹是专门来写 sass 文件的 => 代开命令行 , 切换到这个文件夹的目录 => 输入指令 - > sass -- watch

一、安装sass-loader和node-sass依赖 npm install sass-loader node-sass --save-dev 二、打开react的webpack配置 node_modules/react-scripts/config/webpack.config.js 找到module下的rules，oneOf数组 在oneOf数组中添加以下对象 { test:/\.scss$/, loaders: ['style-loader', 'css-loader', 'sass-loader'] } 来源： CSDN 作者： Mo_zifeng 链接： https://blog.csdn.net/Mo_zifeng/article/details/104536970

Sass作为一门具有编程性质的CSS扩展语言，它具有独立的文件名称，因为其历史原因，它的后缀名可以有两个选择，分别为sass和scss，其中sass的编写格式不符合CSS编程语法规范，其不能使用大括号和分号，需要的严格的缩进来做定界。如下所示： body background: #eee font-size:12px p background: #0982c1 scss完全符合CSS语法，我们可以直接使用CSS语法，如下所示： body { background: #eee; font-size:12px; } p { background: #0982c1; } 在前面笔者就反复强调，Sass只是用来生成CSS文件的，那么它的如何生成的呢？是通过sass的编译命令来进行的。最基本的编译命令语法如下： sass文件名.scss 这种编译模式不会生成文件，会在命令行显示编译后的CSS代码，如图1所示： 图1 命令行编译 编译命令包含多种模式，那么就由笔者来一次介绍： 1．生成指定文件名的编译方式 下面这条命令会在当前目录生成一个指定文件名的CSS文件名，如下所示： sass文件名.scss:指定文件名.css 效果如图2所示： 图2 命令行编译 上图中我们不仅生成了指定的css文件，并且还生成了两个额外的文件，其中sass-cache文件时编译产生的缓存文件，可以删除；demo

在了解完Sass之后，相信大多数人更期望了解它到底如何将我们编写CSS代码的效率提高的？到底是如何让我们的CSS代码更具有可维护性的？到底如何让我们编写的CSS代码更具有重用性的？那么笔者就来讲述一个Sass编码的实例，来解答这些疑问。 首先我们先拟定一个需求，让HTML中按钮有相同的大小和不同的款式，那么笔者根据这一需求，使用Sass编写出了如下代码： 首先笔者来分析一下，上述代码的具体含义。在20行以前笔者将按钮的背景色，字体颜色、按钮背景色、边框线颜色定义成了变量；在21行到25行，笔者将按钮的主体设置封装成了一个混合宏（与函数概念类似），并接受三个参数，分别为笔者所定义的变量；从26行到39行，笔者将按钮的基本模型定义了一段CSS代码；第39行到最后，笔者使用类选择器，分别调用了相应混合宏，并传递了三个参数。 上述的Sass源码编译之后的代码就是这样的，如下所示： 编译后的CSS与源码对比来看，我们先总结以下区别： 1．变量和混合宏没有在编译后出现 2．混合宏生成对应的代码 对比之后相信各位读者也有所发现，Sass的源码从代码上要多于CSS代码，这是因为我们考虑了扩展性和维护性。 那么可以想象一下，假如我们需要对颜色微调，不需要去寻找内部代码，只需要更改头部的变量即可，维护性增强；再假如我们需要扩展一个按钮的颜色，那么我们只需要再额外增加三个变量，然后去调用

在了解基本的Sass语法之后，那么笔者给各位读者抛出一个需求，使用Sass语法实现七色板，效果图1所示： 图1 七色板示意图 在初步了解Sass之后，可能在思路上还没有从CSS转换过来，那么笔者就带领各位读者一起来分析这个需求的特点。 Ø　七色板由七种颜色组成，分别为红橙黄绿蓝灰紫　　 Ø　每一种颜色都是自左向右颜色逐渐加深　　 Ø　每一行格子有十一个 Ø　每一行的都有一个基色，并且基色的位置位于中间位置，小于基色位置则依次变浅，大于基色位置则依次加深。　 既然分析出了特点或需求，那各位读者就来看看在之前的讲述中是否有哪些基本语法可以为这次需求所用到，笔者将解决方案总结如下。 Ø　七种颜色可以定义为变量，或者列表解决七色问题。 Ø　颜色加深函数“darken”和变浅函数“lighten”解决颜色问题。　　 Ø　流程控制语句中的@for循环，解决相同格子与类似行的问题。 Ø　流程控制语句中的@if语句，解决加深和变浅问题。　 既然基本语法都能够解决分析出来的每一个需求，那么只需要理清思路就能实现这个七色板，那么笔者就带着大家理一下实现的思路。 首先将前台的HTML代码实现，如下所示： 其二，笔者先将七色板分解，仅实现第一行的红色板，如下所示： 可以看到，第一行实现成功。其实第一行实现成功后，仅需要替换对应的选择器和颜色值即可让它实现其余色板。那么，各位读者有没有想到

本文重点在于HTML5与CSS3的学习和使用，HTML与CSS不属于编程范畴，更偏向于设计，而Sass是编程化的CSS的扩展语言，对于没有接触过编程的读者可能会有点吃力，这里不做对语法详细介绍，仅作为基本介绍，让读者了解Sass的优越性，如果对Sass感兴趣，请自行查阅相关资料。 Sass基本语法 在大部分编程语言之中，其基本语法都包括这样一些东西，比如说变量、数据类型、运算符、流程控制语句、函数等，具体的这些名词都具有什么功能呢？那么笔者来依次进行介绍。 1．变量 变量，顾名思义，就是可以动态改变的值。可以将它看做一个占位符，开发者可以动态改变这个占位符的值。比如说可以将像素值、颜色值等提炼出来作为一个变量出现。就像下面这样： 其实在上例中根本看不出变量实际效益在哪里，仅仅是解释了其占位符的含义。不过假如说网页总体设计时有一个基调，或者说基色，其余网页颜色都由这个基色进行延伸，那么我们只需要定义一个基色，然后我们对基色进行加深、变浅、反转就可以得出网页中其它要素的颜色了，当我们改变该变量时，那么网页中所有的颜色都会根据这个基色进行改变。 那么可能有读者问了，如何对基色进行加深、变浅等操作呢？Sass其实包含大量的内置函数，这些函数可以对颜色执行加深、变浅等操作，那么变量存在的意义就远不止占位符那么简单了，读者还可以对其进行算数运算等操作等等。 2．数据类型 什么是数据类型呢