Sass 学习笔记

sass介绍
1. 官方定义 : Sass是世界上最成熟,稳定,高效的专业级CSS扩展语言.
2. CSS兼容性 : Sass能完全兼容各个CSS版本.团队在兼容性上下了很大的功夫,所以你可以无缝的使用任何CSS库.
3. 行业支持 :不用多说,行业内都把Sass作为它们首选的CSS扩展语言.
4. 丰富的功能 : 相比其他所有CSS扩展语言,Sass团队自认为拥有更多的功能.Sass的核心团队不停的工作,目的就是要向前探索和领导行业.
5. 庞大的社群 : Sass是由几个科技公司和上百位开发者组成的团体所积极支持和开发的.
6. 成熟: Sass的核心团队开发它有九年的历史.
7. 框架:有数不清的框架是用Sass建立的,比如Compass,Bourbon和Susy.

NPM 使用介绍
NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：
允许用户从NPM服务器下载别人编写的第三方包到本地使用。
允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

NodeJS官网安装Node.js,然后就自带npm
npm替换成淘宝镜像安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装sass
cnpm install -g sass

Sass使用SCSS作为文件后缀名，不能直接在<link> 标签中使用，需要编译为.css 文件。

CSS本身是很好玩的.但是随着项目的发展,样式表变得庞大,复杂,难以维护.这时候预处理工具(preprocessor)可以派上用场了,Sass提供了很多原生CSS所没有的功能,比如说
---变量(variables),
---嵌套(nesting),
---混合(mixins),
---继承(inheritance),
还有很多其他的好东西,让CSS变得有趣。

变量
Sass使用$符号来声明变量,例子如下
$www:blod;
$ccc:red;
ul{
    font-size: 15px;
    color: $ccc;
    li{
        list-style: none;
        font-weight: $www;
    }
}

嵌套
引用父选择器用&符号
nav {
    height: 100px;
    ul {
    margin: 0;
        li {
            float:left;
            list-style:none;
            padding: 5px;
        }
        a{
            display: block;
            color: #000;
            padding: 5px;
            &:hover{
                background-color: #0d2f7e;
                color: #fff;
            }
        }
    }
    & &-text{
        font-size: 15px;
    }
}
属性嵌套
body{
    font: {
        family: Helvetica, Arial, sans-serif;
        size: 15px;
        weight: normal;
    }
}
nav {
    border: 1px solid #000 {
        left: 0;
        right: 0;
    }
}

minin混合
@mixin标识符,@include调用
@mixin alert($text-color,$background){
    color: $text-color;
    background-color: $background;
    a{
        color: darken($text-color,10%);
    }
}
.alert-warning{
    @include alert(red,blue);
}
.alert-info{
    @include alert($background:green,$text-color:pink);
}

继承
会继承选择器包括它的子元素：写法：
@extend 选择器名称;

引入
引入文件时，引入的文件不需要写文件扩展名
@import "文件名";

注释
/*多行注释
会出现在编译后的css文件中*/
// 单行注释不会出现在编译后的css文件中

函数
命令行用法
sass -i

数学计算
type-of(查看类型的元素)
可以直接写入数学计算，比如1 + 1，(8 / 2)，5px * 2，5px - 2，3 + 2 * 5px，支持运算顺序

数字函数
abs(-10px)  绝对值
round(3.5)  四舍五入
ceil(3.2)   向上取整
floor(3.6)  向下取整
percentage(650px / 1000px)  百分比
min(1,2,3)  最小值
max(1,2,3)  最大值

字符串连接
"nin" + 8080
"nin8080"
ning - hao
"ning-hao"
ning / hao
"ning/hao"

字符串函数
生命一个字符串变量
>> $greeting: "Hello ninghao"
"Hello ninghao"
查看这个字符串
> $greeting
"Hello ninghao
全部变大写
>> to-upper- case($greeting)
"HELLO NINGHAO
全部变小写
>> to-Lower- case($greeting)
"hello ninghao"
字符串长度
>> str-Length($greeting)
13
查看在字符串中的位置
>> str-index($greeting, "Hello")
1
查看在字符串中的位置
> str-index($greeting, "ninghao")
7
字符串的添加
>> str-insert($greeting, ".net"，14)
"Hello ninghao.net"
>>

颜色函数
rgb(0，0，0)
rgba(0,0,0,0.5)
HSL表示色相（0-360），饱和度（0-100%），明度（0-100%）
例子background-color:hsl(60,100%,50%);
编译后background-color:yellow;
HSLA就是多了个透明度
adjust-hue就是调整hue色相的值
background-color:adjust-hue(#ffffff,60deg);
lighten和darken可以改变颜色的明度，lighten让颜色更亮，darken让颜色更暗
background-color:lighten(#ffffff,30%);
background-color:darken(#ffffff,20%);
saturate和desaturate可以改变颜色的饱和度，saturate增加饱和度，desaturate减少饱和度，用法同上
transparentize和opacify可以修改颜色的不透明度，transparentize提升颜色的透明度，opacify降低颜色的透明度，用法同上

列表函数
命令行用法
sass -i
列表的长度
>> Length(5px 10px)
2
>> Length(5px 10px 5px 0)
4
获取列表中第几项的值。
>> nth(5px 10px, 1)
5px
>> nth(5px 10px, 2)
10px
返回给定值在列表中的位置，如果值未找到，则返回 null。
>> index(1px solid red, solid)
2
将值加入到一个列表的尾部
>> append(5px 10px, 5px)
(5px 10px 5px)
合并两列表
>> join(5px 10px, 5px 0)
(5px 10px 5px 0)
第三项是分隔符
>> join(5px 10px, 5px 0, comma)
(5px, 10px, 5px, 0)

Map就是列表项目带名字的列表
格式，键值对:
$map: (key1: value1, key2: value2， key3: value3)
定义一个Map类型的数据：
>> $colors:(light: #ffffff, dark: #000000)
(light: f#fffff,dark: 000000)
查看这个Map列表中有几个项目
>> length($colors)
2
查找 map 对象中 key 所对应的 value 值
>> map-get($colors, dark)
#000000
>> map-get($colors, light)
#ffffff
提取 map 中所有的 key 值
>> map-keys($colors)
("light","dark")
提取 map 中所有的 value 值
>> map-values($colors)
(#fffff, #000000)
检测 map 中是否含有所需查询的 key
>> map-has-key($colors, light)
true
>> map-has-key($colors, gray)
false
合并两个 map 形成一个新的 map 类型，如果两个 map 中出现相同 key 值，$map2 将会覆盖 $map1 中的键值。
>> map-merge($colors, (light-gray: #e5e5e5))
(light: f#fffff,dark: 000000,light-gray: #e5e5e5)
删除一个键值对
>> map-remove($colors,light,dark)
(light-gray: #e5e5e5)

布尔值Boolean
用来表示数据的真实性

Interpolation
可以把一个值插入到另一个值里边
可以把变量或者表达式放在一组带#的花括号里
$name: "info" ;
$attr: " border";
alert-#{$name}{
  #{$attr}-color: #cCC;
}

控制指令-Control Directives

@if
格式
@if 条件 {
  ...
}
例子
$use-prefixes: true;
$theme:"haha";
body{
    @if $theme == dark {
        background-color: black;
    }@else if $theme == light {
        background-color: white;
    }@else {
        background-color: grey;
    }
}
.rounded{
    @if $use-prefixes {
        -webkit-border-radius: 5px ;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
    }
    border-radius:5px;
}

@for
格式1包含结束值
@for $var from <开始值> through <结束值> {
    ...
}
格式2不包含结束值
@for $var from <开始值> to <结束值> {
    ...
}

@each
在@each中，定义了一个变量，其中包含列表中每个项目的值。
语句
@each $var in <list or map>
$var: 它表示变量的名称。 @each规则将$var设置到列表中的每个项目，并使用值$var输出样式。

@while
与其他控制指令一样， @while 指令也采用SassScript表达式，直到语句计算结果为false，它迭代地输出嵌套样式。 要注意的关键是，计数器变量需要在每次迭代时递增/递减。
while(condition) {
  // CSS codes
}

自定义函数
格式
@function 函数名称(参数) {
    @return 返回值;
}

错误与警告
@warn指令用于给出有关问题的警告建议。它将SassScript表达式值显示到标准错误输出流。
@error指令将SassScript表达式值显示为致命错误。