1.安装：
GFW拦了，Ruby可能装不了
先清除原Ruby源，然后切换到淘宝源
gem sources --remove rubygems.org/
gem sources -a ruby.taobao.org/
gem install sass （有可能权限不够，那就sudo）
国际惯例 -v查版本，看是否安装成功。
2.两种后缀
.scss和.sass
两者的区别在于
.sass是一开始用的语法后缀，缩进式，靠缩进区分代码块，类似Python（比较老）
.scss是v3.0后的新语法后缀，Sassy CSS，更贴合css的语法，靠{}区分代码块（更常用，优选）
exp：
sass：/ * 多行注释 只要缩进就代表继续 直到不缩进了，注释结束
// 单行注释也是这样 只要缩进就是继续
@import reset=des color: #777 font-size: 12px.new-content +desul list-style: none li margin: 0scss:/* 跟css多行注释一样 前后都需要星号*标记 */
// 单行注释也跟css一样// 每行注释都需要“//”
@iixin des { mport “reset”;@mcolor: #777; font-size: 12px;}.new-content { @include des;}ul { list-style: none; li { margin:0; }}3.编译sass
sass 1.scss:1.css
4.自动编译
sass —watch 1.scss:1.css
也可以自动编译整个目录
sass —watch scss目录:css目录
5.编译有四种格式
nested：嵌套（缺省值，编译后的同样按照嵌套缩进）
compact：紧凑（所有声明变成单行模式）
expanded：扩展（变成易读模式，美化后的规范格式，一个声明一行）
compressed：压缩（去掉不必要的空格和换行变成压缩模式.min）
sass —watch scss:css —style 格式
exp：sass —watch scss:css —style compact
6.变量
$light-color: #fff;
$light-border: 1px solid $light-color;
-和_虽然可以混合使用（$light-color == $light_color），但最好还是统一
7.嵌套
.nav {
margin: 0;
padding: 0;
ul {
list-style: none;
li {
font-size: 16px;
font-weight: bold;
color: #777;
}
}
}
8.嵌套时调用父选择器用&
.nav {
margin: 0;
li {
list-style: none;
a {
font-size: 16px;
&:hover {
color: #fff;
}
}
}
& &-item {
border: 1px solid #ddd;
}
}
9.属性嵌套
.des {
font-size: 15px;
font-weight: bold;
font-family: "Microsoft YaHei";
border: 1px solid #f60;
border-left: none;
border-right: 0;
}
.des {
font: {
size: 15px;
weight: bold;
family: "Microsoft YaHei”;
}
border: 1px solid #f60 {
left: none;
right: 0;
}
}
10.@mixin（混合：定义好的可带参数的样式模块）
@mixin content {
font-size: 16px;
.title {
color: #777;
}
.des {
font-size: 12px;
}
}
.news-content {
@include content;
color: #f60;
}
@mixin content($des-size:16px, $title-color:#666) {
font-size: 16px;
.title {
color: $title-color;
}
.des {
font-size: $des-size;
}
}
.news-content {
@include content();
color: #f60;
}
.news-content {
@include content(14px, #ddd);
color: #f60;
}
.news-content {
@include content($title-color:#777,$des-size:12px );
color: #f60;
}
11.@extend （继承 or 扩展）
.des {
font-size: 14px;
}
.des a {
color: blue;
}
.content {
@extend .des;
color: #ddd;
.title {
font-size: 20px;
}
}
12.@import Partials
_reset.scss （partials的文件名要以_下划线开头，这样会认为该文件为partials，就不会单独的去编译它）
body {
margin: 0;
padding: 0;
}
1.scss
@import "reset"
……
13.注释
/*
* 多行注释
* 与css的一样
* 会在编译输出的css里出现
* 但不会出现在压缩模式下编译输出的css里
*/
// 单行注释与css的也一样，不会出现在编译输出的css里
/*!
* 强制注释
* 就是多行注释内容第一个字符以 ! 开头
* 会一直在编译输出的css里出现
*/
14.数据类型
函数：type-of()
有数字类型、字符串类型、列表类型、颜色类型
15.数字类型
可进行数学运算
但注意：1.乘法如果每个乘数都有单位，那结果将带有多个单位，所以请保证只有一个乘数有单位。
2.除法符号 / 因为在css中冲突，所以用 ( ) 将除法运算包起来
3.除法如果被除数和除数带有相同的单位，则结果的单位会被抵消。
16.数字函数
abs() 绝对值（有单位带单位，无单位就是纯数字）
round() 四舍五入
ceil() 进位取整 ceil(5.1) // return 6
floor() 退位取整 floor(6.9) // return 6
percentage() 变成百分数 percentage(65px / 100px) // return 65%（请把单位抵消，或者都不带单位，否则报错）
min(1,2,3,5) // return 1
max(2,10,5,6) // return 10
17.字符串
"字符串类型"
""+abc = "abc"
123 + "abc" = "123abc"
mao-123 = "mao-123"
123/mao = "123/mao"
mao*123（报错，字符串相乘是没有意义的）
18.字符串函数
$str : "Hello"
to-upper-case($str) // 全部大写
to-lower-case($str) // 全部小写
str-length($str) // 返回字符串长度
str-index($str, "H") // 返回指定字符串的索引，从1开始计算
str-insert($str, "要插入的字符串内容", 要插入的起始位置索引，从1开始算)
19.颜色
16进制：#ff0000，#f00
rgb(255, 0, 0)
hsl(0, 100%, 50%) //色相、饱和度、明度
20.rgb & rgba
red green blue
red green blue alpha（不透明度 0 - 1，0完全透明，1完全不透明）
21.hsl & hsla
hue 色相 0 - 360°
s 饱和度 0 - 100
l 明度 0 - 100%
alpha（不透明度 0 - 1，0完全透明，1完全不透明）
22.颜色函数 adjust-hue()
调整色相
$hex-color: #f00
$hsl-color: hsl(0, 100, 50%)
background-color: adjust-hue($hex-color, 120deg) // deg角度，可加可不加
background-color: adjust-hue($hsl-color, -120deg) // 可以是负数角度
23.颜色函数 lighten() 和 darken()（更亮和更暗）
$color: #def
lighten($color, 30%) // 提高30%明度
darken($color, 20%) // 降低20%明度
24.颜色函数 saturate() 和 desaturated()
$color: #cde
saturate($color, 50%) // 增加50%饱和度
desaturated($color, 20%) // 减少20%饱和度
25.颜色函数 opacify() 和 transparentize()
$color: hsla(120, 100%, 50%, .5);
opacify($color, .3) // 增加0.3不透明度 更不透明
transparentize($color, .2) // 减少0.2不透明度 更透明
26.List类型 列表类型
1px solid #ddd
0 auto
5px 3px 6px 5px
27.列表函数
$list:5px 10px 4px 8px;
$list2: 111px 222px;
length() // return 列表项数 length($list) return 4
nth() // return 列表指定项 nth($list, 3) return 4px
index() // return 指定列表项的索引 index($list, 4px) return 3
append() // return 追加列表项 append($list, 6px, auto) return 5px 10px 4px 8px 6px
第三个参数可选comma space auto
join() // return列表合并 join($list, $list2, comma) return 5px,10px,4px,8px,111px,222px
第三个参数可选comma space auto
28.Map类型 键值对
$map:(key1: val1, key2: val2);
$map2:(key3: val3, key4: val4);
$map3:(key1: val1, key2: val2, key3: val3, key4: val4)
29.Map函数
length() // return Map的键值对数量 length($map) return 2
map-get($map, key2) // return Map中指定键的值 return val2
map-keys($map) // return Map中的所有键 return (“key1", “key2")
map-values($map) // return Map中的所有值 return (val1, val2)
map-has-key($map, key1) // return Map中是否存在指定键 return true
map-merge($map, $map2) // return Map合并 return (key1: val1, key2: val2, key3: val3, key4: val4)
map-remove($map, key2, key1) // return 去掉了指定项的Map return (key3: val3, key4: val4)
29.boolean 布尔值
5px > 10px // return false;
8px > 2px // return true;
>, <, <=, >=, ==
and, or, not
(5px > 3px) and (3px < 6px) // return true
(5px < 3px) or (3px < 6px) // return true
not (3px < 6px) // return false
30.Interpolation
变量模板用法 #{变量}
$ver: "1.0.0";
/* 项目当前版本是 #{$ver} */
31.@if 判断
@if 条件 {
……
}@else if 条件2 {
……
}@else {
……
}
32.@for 循环
@for $var from <开始值> through/to <结束值> {
} // through 包含结束值，to不包含结束值
$j: 5;
@for $i from 1 through $j {
.col-#{$i} {
width: 100% / $j * $i;
}
} // 到5结束
@for $i from 1 to $j {
.col-#{$i} {
width: 100% / $j * $i;
}
} // 到4结束
33.@each 遍历
@each $var in $list {
……
}
$status: success error warning;
@each $i in $status {
.icon-#{$i} {
background-image: url(../images/status/#{$i}.png);
}
}
34.@while
@while 条件 {
……
}
$i: 10;
@while $i > 0 {
.menu-item#{$i} {
width: 2px * $i;
}
$i: $i - 2;
}
35.@function 函数
@function 名字 (参数1, 参数2) {
……
}
$fontsize: (big: 24px, small: 12px);
@function size($map, $key) {
@return map-get($map, $key);
}
size($fontsize, big);
36.警告信息 error warning
@function size($map, $key) {
@if map-has-key($map, $key) {
@return map-get($map, $key);
} @else {
@warn "在 $map 中没有找到 #{$key} 这个key";
}
}
@function size($map, $key) {
@if map-has-key($map, $key) {
@return map-get($map, $key);
} @else {
@error "在 $map 中没有找到 #{$key} 这个key";
}
}
