Sass基础

Sass中文网(https://www.sass.hk/docs/)
一、Sass基础
　　1、Sass和Scss有什么区别？
　　　　1)文件扩展名不同----.sass和.scss
　　　　2)语法书写方式不同----Sass以严格的缩进式语法规则来书写，不带大括号和分号
　　　　　　　　　　　　　----Scss的语法书写和css的语法书写方式非常类似
　　　　例：

$font-stack: Helvetica, sans-serif //定义变量
$primary-color: #333 //定义变量

//Sass
body
font: 100% $font-stack
color: $primary-color //sass

//Scss
body{
　　font: 100% $font-stack;
　　color: $primary-color;
}    

　　2、Sass安装
　　　　1)到 Ruby 的官网（http://rubyinstaller.org/downloads）下载对应需要的 Ruby 版本。
　　　　2)Ruby 安装完成后，在开始菜单中找到新安装的 Ruby，并启动 Ruby 的 Command 控制面板。
　　　　3)打开电脑的命令终端，输入下面的命令：gem install sass
　　　　4)检查sass是否安装成功：sass -v
　　3、Sass更新----gem update sass
　　4、Sass卸载----gem uninstall sass

　　5、Sass编译：
　　　　1)命令编译{
　　　　　　单文件编译：
　　　　　　　　sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css
　　　　　　多文件编译：
　　　　　　　　sass sass/:css/
　　　　　　watch功能：
　　　　　　sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css
　　　　}
　　　　2)GUI编译----Koala等编译工具
　　　　3)如果使用sublime，安装sass Build 插件后，使用快捷键 Ctrl + B 即可编译，编译后的css文件存放在当前目录 
　　　　4)sass常见的编译错误：
　　　　　　字符编译----sass不支持GBK编码格式，创建时就应设置为utf-8
　　　　　　文件路径----不能有中文字符
　　6、Sass不同样式风格的输出方法
　　　　1)嵌套输出方式 nested 
　　　　　　编译时带上参数" --style nested";例：sass --watch test.scss:test.css --style nested
　　　　　　编译结果：

nav ul {
    margin: 0;
    padding: 0;
    list-style: none; }

　　　　2)展开输出方式 expanded 
　　　　　　在编译的时候带上参数“ --style expanded”;例：sass --watch test.scss:test.css --style expanded
　　　　　　这个输出的 CSS 样式风格和 nested 类似，只是大括号在另起一行，同样上面的代码，编译出来：

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

　　　　3)紧凑输出方式 compact 
　　　　　　在编译的时候带上参数“ --style compact”;例：sass --watch test.scss:test.css --style compact
　　　　　　编译后的代码如下：

nav ul { margin: 0; padding: 0; list-style: none; }
nav li { display: inline-block; }

　　　　4)压缩输出方式 compressed 

　　　　　　在编译的时候带上参数“ --style compressed”;例：sass --watch test.scss:test.css --style compressed
　　　　　　压缩输出方式会去掉标准的 Sass 和 CSS 注释及空格。也就是压缩好的 CSS 代码样式风格：

nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}

　　7、Sass调试

　　基础：css浏览器调试
　　　　1)F12打开Chrome浏览器控制面板
　　　　2)切换至Sources选项
　　　　3)右侧Sources空白处右键单击，选择 Add folder to workspace添加本地目录到工作区
　　　　4)选择项目目录，单击确认
　　　　5)在新添加的本地文件上单击鼠标右键，选择Map to network resources映射到服务器文件
　　　　   或者单击服务器上的文件，选择Map to file system resources映射到本地文件
　　　　6)建立映射后，在浏览器中调试修改.css/.html等文件保存后即可修改本地文件；Elements面板调试 会自动保存到本地
　　
　　8、Sass声明变量
　　　　$width:300px;
　　　　$----变量声明符
　　　　width----变量名
　　　　300px----变量值
　　如果值后面加上!default则表示默认值 含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。
　　9、Sass变量的调用
　　　　调用 变量声明符+变量名
　　10、Sass局部变量和全局变量
　　　　在选择器、函数、混合宏...的外面定义的变量为全局变量
　　　　局部变量在其作用域内会覆盖重名的全局变量
　　　　!global----将局部变量转换为全局变量
　　11、Sass嵌套
　　　　1)选择器嵌套
　　　　将一套css样式嵌套进另一套样式中，内层样式将它外层的选择器作为父选择器
　　　　例:

main{
    color:red;
    .greenText{
        color:green;
    }
}        

　　　　---->编译结果：

main {
    color: red; }
main .greenText {
    color: green; }

　　　　父选择器 & :代表嵌套规则外层的父选择器
　　　　例:

main{
    color:red;
    .greenText{
        color:green;
    　　& p{
        　　color:yellow;
        }
    }
}    

　　　　---->编译结果：

main {
    color: red; }
main .greenText {
    color: green; }
main .greenText p{
    color:yellow; }

　　　　2)属性嵌套

　　　　css中有一些属性前缀相同，只是后缀不一样,比如border-top和border-left等,
　　　　这些属性都遵循相同的命名空间(border),可将属性嵌套在相同的命名空间中。
　　　　例:

.box{
    border:{
        top:1px solid red;
        left:1px solid green;
    }
}    

　　　　---->编译结果：

.box {
    border-top:1px solid red;
    border-left:1px solid green; }

　　　　命名空间也可以包含自己的属性值。
　　　　例:

.text{
    font:20px/24px {
        style:normal;
        weight:bold;
    }
}

　　　　---->编译结果：

.text{
    font:20px/24px;
    font-style:normal;
    font-weight:bold; }

　　　　3)伪类嵌套
　　　　其本质还是选择器嵌套,借助父选择器 & ($:after{})
　　12、Sass混合宏
　　　　1)声明混合宏 @mixin 混合宏的名称{复用的样式代码}
　　　　　　Ⅰ不带参数混合宏
　　　　　　例：

@mixin border-radius{
    -webkit-border-radius:5px;
    border-radius:5px;
}

　　　　　　Ⅱ带参数混合宏

　　　　　　例：

@mixin border-radius($radius:5px){
-webkit-border-radius:$radius;
border-radius:$radius;
}

　　　　　　Ⅲ复杂的混合宏(逻辑运算)

　　　　　　例：

//$shadow...表示可以接收多个参数
@mixin box-shadow($shadow...) {
    @if length($shadow) >= 1 {
        @include prefixer(box-shadow, $shadow);
    } @else{
        $shadow:0 0 4px rgba(0,0,0,.3);
        @include prefixer(box-shadow, $shadow);
    }
}

　　　　2)调用混合宏 @include 混合宏名称;
　　　　例：

.box{
    @include border-radius;
}

　　　　---->编译结果：

.box{
    -webkit-border-radius:5px;
    border-radius:5px;}

　　　　3)混合宏的参数

　　　　　　Ⅰ传一个不带值的参数(调用时传参)
　　　　　　Ⅱ传一个带值的参数(调用且不传参时该值作为参数的默认值)
　　　　　　Ⅲ传多个参数
　　13、Sass扩展/继承 @extend
　　继承已存在的类样式块，从而实现代码的继承，减少混合宏的冗余问题
　　@extend可以继承类样式块中所有样式代码，而且编译出来的css会将选择器合并到一起，形成组合选择器。
　　例：

.btn {
    border: 1px solid #ccc;
    padding: 6px 10px;
    font-size: 14px;
}
.btn-primary {
    background-color: #f36;
    color: #fff;
    @extend .btn;
}

　　---->编译结果：

.btn, .btn-primary {
    border: 1px solid #ccc;
    padding: 6px 10px;
    font-size: 14px; }

.btn-primary {
    background-color: #f36;
    color: #fff; }

　　14、Sass占位符 %placeholder

　　取代以前css中的基类造成的代码冗余的情形。
　　%placeholder声明的代码,如果不被@extend调用的话，不会产生任何代码。
　　例：

%mt{
    margin:{
        top: 5px;
        left:10px
    }
}
%pt{
    padding:{
        top:10px;
        left:5px;
        bottom:5px;
        right:10px;
    }
}
.btn,.btn1{
    @extend %mt;
    @extend %pt;
}    

　　---->编译结果：

.btn, .btn1 {
    margin-top: 5px;
    margin-left: 10px; }

.btn, .btn1 {
    padding-top: 10px;
    padding-left: 5px;
    padding-bottom: 5px;
    padding-right: 10px; }

　　15、Sass插值 #{}

　　如果变量需要嵌套在字符串中，就必须写在#{}中
　　例：

$side:left;
.box{
    border-#{$side}-radius:5px;
}

　　---->编译结果：

.box{
    border-left-radius:5px; }

　　16、Sass注释

　　　　1) /**/ 注释内容会显示在编译出来的css中
　　　　2) // 注释内容会不显示在编译出来的css中
　　17、Sass数据类型
　　　　1)数字:如1、2、3、10px;
　　　　2)字符串:如-有引号字符串"String"、'String'或无引号字符串String;
　　　　3)颜色:如red、#0091db、rgba(0,0,0,.3);
　　　　4)布尔型:true、false;
　　　　5)空值:null;
　　　　6)值列表:用空格或逗号分开，如1.5em 1em 0 2em、Helvetica, Arial, sans-serif
　　18、Sass运算

二、Sass的控制命令
　　1、 @if
　　@if指令是一个SassScript，它可以根据条件来处理样式块。还可以配合@else if和@else一起使用。
　　例：

@mixin blockOrNone($boolean:true){
    @if($boolean){
        display:block;
    }@else{
        displaynone;
    }
}
.box-block{
    @include blockOrNone;
}
.box-none{
    @include blockOrNone(false);
}

　　---->编译结果：

.box-block{
    display:block; }
.box-none{
    display:none; }

　　2、 @for循环

　　Sass的@for循环中有两种方式：
　　　　@for $i from <start> through <end>
　　　　@for $i from <start> to <end>
　　　　　　$i----表示变量
　　　　　　start----表示起始值
　　　　　　end----表示结束值
　　　　　　through表示 包括 end这个数
　　　　　　to表示 不包括 end这个数
　　例：@for $i from <start> through <end>

@for $i from 1 through 3{
    .item-#{$i}{width:2em * $i;}
}

　　---->编译结果：

.item-1{
    width:2em; }
.item-2{
    width:4em; }
.item-3{
    width:6em; }

　　例：@for $i from <start> to <end>

@for $i from 1 to 3{
    .item-#{$i}{width:2em * $i;}
}

　　--->编译结果：

.item-1{
    width:2em; }
.item-2{
    width:4em; }

　　3、@while循环

　　@while指令也需要SassScript表达式（像其它指令一样），并且会生成不同的样式块，直到表达式值为false时停止循环。
　　例：

$types:4;
$type-width:20px;

@while $types > 0 {
    .while-#{types}{
        width:$type-width + $types ;
    }
    $types:$types -1 ;
}

　　---->编译结果：

.while-4{
    width:24px; }
.while-3{
    width:23px; }
.while-2{
    width:22px; }
.while-1{
    width:21px; }

　　4、@each循环

　　@each循环就是去遍历一个列表，然后从列表中去除对应的值。
　　@each $var in <list>
　　　　$var----变量名
　　　　<list>----SassScript表达式
　　例：

$list:adam john wynn mason kuroir //定义列表

@mixin author-iamges{
    @each $author in $list{
        .photo-#{$author}{
            background:url("/images/avatars/#{$author}.png") no-repeat;
        }
    }
}
.box{
    @include author-iamges;
}

　　---->编译结果：

.box .phooto-adam{
    background:url("/images/avatars/adam.png") no-repeat; }
.box .phooto-john{
    background:url("/images/avatars/john.png") no-repeat; }
.box .phooto-wynn{
    background:url("/images/avatars/wynn.png") no-repeat; }
.box .phooto-mason{
    background:url("/images/avatars/mason.png") no-repeat; }
.box .phooto-kuroir{
    background:url("/images/avatars/kuroir.png") no-repeat; }

三、Sass的函数

　　Sass函数主要包括：
　　　　字符串函数
　　　　数字函数
　　　　列表函数
　　　　颜色函数
　　　　三元函数
　　　　Introspection函数
　　　　自定义函数
　　1、字符串函数
　　　　unquote()函数----unquote($String)删除字符串中的引号（只能删除字符串最前和最后的引号）;
　　　　quote()函数----quote($String)给字符串添加双引号。如果字符串，自身带有引号会统一换成双引号 ""
　　　　字符串中间有单引号或者空格时，需要用单引号或双引号括起或去掉空格，否则编译的时候将会报错。
　　　　同时 quote() 碰到特殊符号，比如： !、?、> 等，除中折号 - 和 下划线_ 都需要使用双引号括起，否则编译器在进行编译的时候同样会报错。
　　　　To-upper-case()函数----To-upper-case($string)将字符串中的小写字母转换成大写字母。
　　　　To-lower-case()函数----Tolower-case($STRING)将字符串中的大写字母转换为小写字母。
　　2、数字函数
　　　　precentage()函数----precentage($num)将一个不带单位的数值转换成百分比形式
　　　　　　>> precentage(.2) 20%
　　　　　　>> precentage(2px / 10px) 20%
　　　　round()函数----round($num)四舍五入到整数
　　　　ceil()函数----ceil($num)向上取整
　　　　floor()函数----floor($num)向下取整
　　　　abs()函数----abs($num)绝对值
　　　　min()函数、max()函数----min($num...)、max($num...)返回多个参数中的最小、最大值
　　　　random()函数----random()获取一个随机数
　　3、列表函数
　　　　length()函数----length($list)返回一个列表中有几个值。注：列表参数之间用空格隔开。
　　　　nth()函数----nth($list,$n)返回列表$list中第$n个值。 >> nth(10px 20px 30px,1)---->10px
　　　　join()函数----join($list1,list2,$separator)将两个列表合并成一个列表。
　　　　　　注：只能合并另个列表。
　　　　　　$separator = comma(逗号) || space(空格)
　　　　append()函数----append($list,$obj,$separator)将某个值($obj)插入到列表尾部
　　　　zip()函数----zip($list...)将多个列表值转换成一个多维列表
　　　　　　>> zip(1px 2px 3px,solid solid solid,green blue red)
　　　　　　---->((1px solid green),(2px solid blue),(3px solid red))
　　　　index()函数----index($list,$data)返回某个值($data)在列表中的索引值(从1开始),没有找到则返回false
　　4、Introspection函数
　　　　type-of()函数----type-of($value)返回一个值的类型
　　　　　　number
　　　　　　string
　　　　　　bool
　　　　　　color
　　　　unit()函数----unit($num)返回一个值的单位
　　　　unitless()函数----unitless($num)判断一个值是否带有单位
　　　　comparable()函数----comparable($num1,$num2)判断两个值是否可以做加、减和合并
　　5、三元函数
　　　　if($condition,$if-true,$if-false)
　　　　当$condition条件成立时，返回值为$if-true,否则返回$if-false。
　　6、Map
　　　　Sass的map常常被称为数据地图或数组，总以key:value的形式出现
　　　　声明map：
　　　　$map : (
　　　　　　$key1 : $value1,
　　　　　　$key2 : $value2,
　　　　　　$key3 : $value3)
　　　　map-get()函数----map-get($map,$key)根据给定的key，返回map中对应的值。如不存在则返回null。
　　　　map-merge()函数----map-merge($map1,$map2)将两个map合并成一个新的map
　　　　map-remove()函数----map-remove($map,$key)从map中删除一个key，返回一个新的map
　　　　map-keys()函数----map-keys($map)返回map中所有的key
　　　　map-values()函数----map-values($map)返回map中所有的value
　　　　map-has-key()函数----map-has-key($map,$key)根据给定的 key 值判断 map 是否有对应的 value 值，如果有返回 true，否则返回 false。
　　　　keywords()函数----keywords($args)返回一个函数的参数，这个参数可以动态的设置 key 和 value。
　　7、颜色函数
　　RGB颜色函数
　　　　rgb($red,$green,$blue)根据红、绿、蓝三个值创建一个十六进制颜色
　　　　rgba($red,$green,$blue,$alpha)或rgba($color,$alpha)根据颜色和透明度值创建一个颜色
　　　　red($color)从一个颜色中获取其中红色值
　　　　green($color)从一个颜色中获取其中绿色值
　　　　blue($color)从一个颜色中获取其中蓝色值
　　　　mix($color1,$color2,[$weight])把两种颜色按比例混在一起.第三个参数是第一种颜色的比例值
　　HSL颜色函数 忽略
　　Opacity函数 控制整个元素的透明度
　　alpha($color)/opacity($color)获取颜色透明度值
　　rgba($color,$alpha)改变颜色的透明度值
　　opacify($color,$amount)/fade-in($color,$amount)使颜色更不透明
　　transparentize($color,$amount)/fade-out($color,$amount)使颜色更透明
四、Sass的 @ 规则
Sass 支持所有 CSS3 的 @ 规则， 以及一些 Sass 专属的规则，也被称为“指令（directives）”。
　　1、@import 引入文件
　　2、@media 媒体查询
　　3、@extend 扩展选择器或占位符
　　4、@at-root 跳出根元素
　　5、@debug 调试，Sass 代码在编译出错时，在命令终端会输出你设置的提示 Bug
　　6、@warn 调试
　　7、@error 调试