sass
1、安装ruby
https://rubyinstaller.org/downloads/
要下载哪个版本？
如果你不知道要安装什么版本并且开始使用Ruby，我们建议你使用Ruby + Devkit 2.4.X作为x64或x86安装程序。这些提供了最大数量的兼容gem并安装了MSYS2-Devkit和Ruby，因此可以立即编译带有C扩展的gem。
加上devkit之后，你的ruby中便具有了一个mingw32的本地编译环境，而且这个本地编译环境是自动调用的。只有在你要安装的gem需要本地编译时，才会调用devkit。
2、sass详细了解，直接看sass中文网
3、编译过程中出现的错误
编译的命令语句：命令行输入： sass 装有scss的文件名/你想要编译的scss文件名 : 你的css文件夹名/想要把scss编译后的内容放入的某css文件名字
如：sass sass1/style.scss:css1/style.css
编译后出现以下错误
Errno::ENOENT: No such file or directory @ rb_sysopen - sass1/style.scss
Use --trace for backtrace.原因：你的编译时文件名输入错误，也就是命令行拼写错误
4、不用每次都进行编译，使用watch进行监视文件夹是否有变化，自动进行编译
sass --watch 放scsass --watchss的文件夹名：放css的文件夹名
例如，sass --watch sass :css
停止监视 Ctrl+c
5、sass输出格式有四种
嵌套 nested 、紧凑 compact、扩展 expanded、压缩 compressed
/*嵌套 sass --watch 放scsass --watchss的文件夹名：放css的文件夹名*/
/*.scss*/ ul{ font-size: 16px; li{ color: pink; } } /*.css*/ ul { font-size: 16px; } ul li { color: pink; }
6、scss与sass区别
7、用 $ 符号进行变量定义
8、& 表示and意思当已经嵌套了一个像嵌套第二个时加上这个表示直接父级。
9、属性嵌套
/*第一种嵌套*/
/*.scss*/ body{ font:{ family: 微软雅黑; weight: body; size: 16px; } } /*.css*/ body { font-family: 微软雅黑; font-weight: body; font-size: 16px; }
/*第二种嵌套*/ /*.scss*/ body{ border:1px solid #ccc{ left:5px; bottom: 15px; } } /*.css*/ body { border: 1px solid #ccc; border-left: 5px; border-bottom: 15px; }
10、混合Mixin：定义样式
scss定义mixin是@mixin 名字（参数1，参数2，...）{......},然后用@include来引用mixin定义的 样式
/*第一种不带参数*/
/*.scss*/ @mixin alert{ color:#C96F6F; background-color:#7B52DA; } .alert-quote{ @include alert; } /*.css*/ .alert-quote { color: #C96F6F; background-color: #7B52DA; }
/*第二种带参数*/ /*.scss*/ @mixin alert($text-color,$background){ color:$text-color; background-color:$background; a{ color:darken($text-color,10%); } } .alert-quote{ @include alert(#635656,#6356F9); } /*.scss*/ .alert-quote { color: #635656; background-color: #6356F9; } .alert-quote a { color: #483e3e; }
11、继承扩展 inheritance：用的标志是 @extend 类名
/*.scss*/ /*继承扩展 inheritance*/ .alert{ padding: 15px; } .alert-info{ @extend .alert; background-color: #E62121; } /*.scss*/ /*继承扩展 inheritance*/ .alert, .alert-info { padding: 15px; } .alert-info { background-color: #E62121; }
12、@import
/*.scss*/ /*导入 @import,但每次使用浏览器都会重新发送一个http请求*/ /*一个文件包含另外的.scss文件*/ /*partials文件的名字要用下划线开头，*/ /*下划线开头的.scss文件是partials文件sass不会去编译他*/ @import "base"; /* 引入是下划线与后缀名省去*/ .alert{ padding: 15px; } .alert-info{ @extend .alert; background-color: #E62121; } @charset "UTF-8"; /*.css*/ /*导入 @import,但每次使用浏览器都会重新发送一个http请求*/ /*一个文件包含另外的.scss文件*/ /*partials文件的名字要用下划线开头，*/ /*下划线开头的.scss文件是partials文件sass不会去编译他*/ body { padding: 0px; margin: 0; } /*上面这段是_base.scss文件中的内容*/ .alert, .alert-info { padding: 15px; } .alert-info { background-color: #E62121; }
13、注释
/*.scss*/ /*看得到注释*/ //单行注释编译后看不到 //压缩方式编译的.css会去掉所有的注释：sass --watch scss1:css1 --style compressed /*! 加了感叹号的注释，即使是压缩编译也会留下这行注释：强制输出的注释内容*/
14、sass -i (sass提供的交互工具指令)
type-of(内容)
15、数字
sass可通过交互模式指令-进行加减乘除等数字运算（除法记得加上括号，原因：css中）
有 类似font：14px/28px用到了“ / ”;
16、数字函数
sass可通过交互模式指令-进行操作
abs(绝对值)、round(四舍五入)、ceil(向上取整)、floor(向下取整)、min()、max()、percepercentage()
17、字符串
sass可通过交互模式指令-进行操作
没有乘法符号，因为字符串连接乘法符号没有意义
18、字符串函数
to-upper-case()
str-length()
str-index()等
19、颜色函数
rgb()与rgba()
hsl()与hsla()
adjust-hue(调整的颜色，调整的度数如90deg)，调整颜色
lighten(调整的颜色，调整的度数)与darken() 改变颜色明度
saturate()与desaturate()，改变颜色纯度，也就是饱和度
opacity()与transparentize()，改变颜色透明度
20、列表list
21、列表函数
nth(列表，第几个)
index(列表，哪个项目)，返回项目的索引值
append(列表，新增列表项目)增加
join(列表，列表)组合
22、map()与相关函数
$map:(key1: value1,key2: value2,.......)
$map-get()
$map-keys()
$map-values()
$map-has-key()
$map-merge()
$map-remove()
23、布尔值
24、Interpolation 讲一个值插入另外一组中 #{ ..}
/*.scss*/ /*Interpolation*/ $name:'info'; $attr:"border"; .alert-#{$name}{ #{$attr}-color:#ccc; } /*.css*/ .alert-info{border-color:#ccc}
25、控制指令-control directive
@if 条件 {.....} 条件判断
@for 进行循环输出
@each in 循环输出列表
@while
26、用户自定义函数
@function 名称 (参数1，参数2){
........
}
27、警告语错误
@warn
@error
参考文献：https://www.sass.hk/
