知行合一

Window 系统下，我们可以使用 RubyInstaller 来安装 Ruby 环境，下载地址为：请点击这里下载。下载 rubyinstaller 之后，解压到新创建的目录下：双击 rubyinstaller-2.2.3.exe 文件，启动 Ruby 安装向导。点击 Next，继续向导，记得勾选 直到 Ruby 安装程序完成 Ruby 安装为止。查看一下是否安装成功！在cmd.exe里输入

@while指令也需要SassScript表达式（像其他指令一样），并且会生成不同的样式块，直到表达式值为false时停止循环。这个和@for指令很相似，只要@while后面的条件为true就会执行。scss语法：$types: 4;$type-width: 20px;@while $types > 0 { .while-#{$types} { width: $t

@if指令是一个SassScript，它可以根据条件来处理样式块，如果条件为true返回一个样式块，反之false返回另一个样式块。scss语法：$boolean: true !default;@mixin longzhoufeng-mixin { @if $boolean { @debug "$boolean is #{$boolean}"; displa

1. 简单的栗子2

全局安装 vue-clinpm install --global vue-cli创建一个基于 webpack 模板的新项目vue init webpack my-project安装依赖cd my-projectnpm install为了使用sass，我们需要安装sass的依赖包npm install --save-dev sass-loader//sass-loader依赖于node-sass

Sass嵌套属性，有些属性的前面是一样的，可以用一个:{}冒号加一个花括号把它合并起来

at-root：是Sass3.3.0中新增的功能，用来跳出选择器嵌套的。默认所有的嵌套，继承所有上级选择器，但有了这个就可以跳出所有上级选择器。1、普通跳出嵌套Sass编译//没有跳出.parent-1 { color:#f00; .child { width:100px; }}//单个选择器跳出.parent-2 { color:#f00;

Sass变量的使用，在变量的前面加一个”$”美元符号就可以了，如下图

1、安装browser-sync（在命令行中输入）npm install --save-dev browser-sync下面列一些安装其它的插件，如需用到可以安装下面的这些插件npm install --save-dev gulp-concat //js合并插件npm install --save-dev gulp-uglify //js压缩插件npm install --s

@each指令形式@each $var in <list>var就是一个变量名,list是一个SassScript表达式，他将返回一个列表值。变量var就是一个变量名,list是一个SassScript表达式，他将返回一个列表值。变量var会在列表中做遍历，并且遍历出与$var对应的样式块。scss语法：$list: aa,bb,cc,dd,ee;//多个变量，可以用空格，也可以用逗号分隔@mix

@for指令有两种形式。第一种形式是：@for $var from <start> through <end>从start开始循环，到end结束，非常简单明了scss语法：$picon-images: picon !default;@for $i from 1 through 5 { .#{$picon-images}#{$i}{ background: url("icon

SCSS 的”%” 与 “.” 功能类似，但是不会输出代码scss语法：%btn-status { // margin-top: 20px; background: #F00;}$flag: "status";%longzhoufeng{ background-color: red;}.foo { @extend %btn-#{$flag}; @exte

sass编译成css时显示乱码，需要在scss中加入：@charset "UTF-8";注：@charset “UTF-8”;是大写的UTF，如果是小写可能会出错

在使用样式，有时候会有很多的样式是重复的，我们通过sass可以简化一下

Sass嵌套时调用父选择器

1、mixin混合使用时，首先声明用@mixin后面空格加“名字”如果有参数加一个括号，里面加参数@mixin(参数1，参数2)，如图2、调用@mixin需要用到@include指令： 3、调用@mixin需要用到@include传参：

1、import方式引入scss文件，后面必须带后缀名scss@import "main.scss";2、Partials方式引入base.scss文件,文件必须以（下划线）开头，可以不用带后缀名@import "base";如图：

Sass继承和扩展

Sass使用for循环，遍历样式.item的宽，从1到100百分比

前面的已经安装好了，那么现在要如何开始呢？我们写了一个scss文件，然后如何去编译它呢？1：比如你在webstorm或者其它的IDE工具里创建了一个sass文件，叫index.scss，需要编译成css文件(index.css);在当前目录下，输入命令sass index.scss:index.csssass是编译，后面跟着要编译的index.scss文件，：冒号后面是要编译成css的文件（inde

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style type="text/css"&gt;