sass（应用及详解）

1、安装sass

1.安装ruby

因为sass是用ruby语言写的，所以需要安装ruby环境
打开安装包去安装ruby，记住要勾选 下面选项来配置环境路径

• Add Ruby executables to your PATH
  安装完成之后继续下一步操作

---

2.安装sass

在cmd里通过gem安装sass

gem是ruby的包管理工具，类似于nodejs 的npm

gem install sass

这个时候如果不翻墙的话是会出问题的，因为：
由于国内网络原因（你懂的），导致 rubygems.org 存放在 Amazon S3 上面的资源文件间歇性连接失败。这时候我们可以通过gem sources命令来配置源，先移除默认的https://rubygems.org源，然后添加淘宝的源https://ruby.taobao.org/，然后查看下当前使用的源是哪个，如果是淘宝的，则表示可以输入sass安装命令gem install sass了

$ gem sources --remove https://rubygems.org/
$ gem sources -a https://ruby.taobao.org/ 【如果你系统不支持https，请将淘宝源更换成：gem sources -a http://gems.ruby-china.org】
$ gem sources -l
*** CURRENT SOURCES ***
https://ruby.taobao.org
# 请确保只有 ruby.taobao.org
$ gem install sass

安装好之后执行sass -v就可以看到sass的版本了
实在实在不行，就安装离线文件吧,但是失败率也很高
gem install ./…/sass-3.4.22.gem

2、编译sass文件的方式

1.命令行编译

可以通过cmd命令行执行sass方法来编译
例如：

sass scss/a.scss:css/a.css

sass 后面写要编译的sass文件的路径，‘：’后面写的是
要输出的目录及名字

• 需要注意的是：必须有这个文件夹才能在里面生成css
  这样的话写一句执行一次编译一次有些太麻烦
  可以开启一个watch来监听文件变化来进行编译

sass --watch scss:css

–watch表示要监听 ：前后的两个都是文件夹，表示scss文件夹的文件改变就编译到css文件夹

2.其他方式编译

除了命令行工具其实还可以用考拉、gulp等工具进行编译，但是ruby和sass是必须要安装的
考拉的方式就不多做介绍了，大家i自己去看一下
gulp的话呢是需要gulp-sass的模块来编译，使用方式类似于gulp-less
这里是网址，点击查看

3、sass四种风格

sass编译的格式

sass编译输出的css有四种格式

• nested 嵌套
• compact 紧凑
• expanded 扩展
• compressed 压缩

这些样式会影响输出的css的格式
简单介绍一下：
css默认输出的嵌套

ul{
       font-size:15px;
       li{
              list-style:none;
       }
}

—》

ul {
  font-size: 15px; }
  ul li {
    list-style: none; }

紧凑compact
在编译的时候需要执行

sass --watch scss:css --style compact

这个时候输出的代码就是

ul { font-size: 15px; }
ul li { list-style: none; padding: 5px; }

compressed 压缩
在编译的时候需要执行

sass --watch scss:css --style compressed

—>

ul{font-size:15px}ul li{list-style:none;animation:all 0.4s}

expanded 扩展
更像是平时写的css一样
在编译的时候需要执行

sass --watch scss:css --style expanded

—>

ul {
  font-size: 15px;
}
ul li {
  list-style: none;
  animation: all 0.3s;
}

compressed 压缩
更像是平时写的css一样
在编译的时候需要执行

sass --watch scss:css --style compressed

—>

.a{width:100px;height:100px;border:1px solid red}.a .b{background:red}

4、sass与scss

sass的两个语法版本

sass一开始用的是一种缩进式的语法格式
采用这种格式文件的后缀名是.sass
在sass3.0版本后我们常用的是sassy css语法，扩展名是.scss，更接近与css语法

两个版本的区别

• 后缀名不同 .sass和.scss
• 语法不同，请看下面
  新版：

/*新版本
多行文本注释*/
//新版本
//单行文本注释
@import "base";
@mixin alert{
       color:red;
       background:blue;
}
.alert-warning{
       @include alert;
}
ul{
       font-size:15px;
       li{
              list-style:none;
       }
}

老版本：

/*新版本
多行文本注释
//新版本
  单行文本注释
@import "base"
=alert
       color:red
       background:blue
.alert-warning
       +alert
ul
       font-size:15px
       li
              list-style:none

5、变量、嵌套、混合、继承拓展

变量的意义

在sass里我们可以定义多个变量来存放颜色、边框等等的样式，这样就可以在下面想要使用样式的时候使用变量了
这样的优点就是便于维护，更改方便

变量的使用

可以通过$来定义变量，在变量名字中可以使用-和_来作为连接，并且-和_是可以互通的，就是用起来一模一样。
变量的值可以是字符串、数字、颜色等等，在变量里还可以使用其他变量，使用的时候直接写变量名就好了
例如

$primary-color:#ff6600;
$primary-border:1px solid $primary_color;
div.box{
       background:$primary-color;
}
h1.page-header{
       border:$primary-border;
}

—》

div.box {
  background: #ff6600;
}
h1.page-header {
  border: 1px solid #ff6600;
}

---

嵌套的使用

合理的使用嵌套语法，可以使我们编写代码更为快捷
假设我们想写这样的css：

.nav {
  height: 100px;
}
.nav ul {
  margin: 0;
}
.nav ul li {
  float: left;
  list-style: none;
  padding: 5px;
}

在sass里我们可以这样写

.nav{
       height:100px;
       ul{
              margin:0;
              li {
                     float:left;
                     list-style:none;
                     padding:5px;
              }
       }
}

大家会发现，写出来的代码父和子之间都有空格隔开，如果我们需要给a加上伪类的话我们这样写

.nav{
    height:100px;
    a{
        color:#fff;
        :hover{
            color:#ff6600;
        }
    }
}

在里面就会出现这样的情况

.nav a :hover {
  color: #ff6600;
}

我们发现在a和:hover之间有了空格，这样是不好的，所以我们需要在写的时候在：hover之前把a加上，这样就需要用到在之类里引用父类选择器的方式，我们可以用&符号代替父类
例如：

.nav{
    height:100px;
    a{
        color:#fff;
        &:hover{
            color:#ff6600;
        }
    }
}

这样就好了，下面来个完整的代码：

.nav{
    height:100px;
    ul{
       margin:0;
       li{
              float:left;
              list-style:none;
              padding:5px;
       }
       a{
              display:block;
              color:#000;
              &:hover{
                     color:#f60;
                     background:red;
              }
       }
    }
    & &-text{
       font-size:15px;
    }
}

-----》

.nav {
  height: 100px;
}
.nav ul {
  margin: 0;
}
.nav ul li {
  float: left;
  list-style: none;
  padding: 5px;
}
.nav ul a {
  display: block;
  color: #000;
}
.nav ul a:hover {
  color: #f60;
  background: red;
}
.nav .nav-text {
  font-size: 15px;
}

---

嵌套属性

我们可以把一些个复合属性的子属性来嵌套编写，加快编写速度，例如

body{
       font:{
              family:Helvitica;
              size:15px;
              weight:bold;
       }
}
.nav{
       border:1px solid red{
              left:none;
              right:none;
       }
}
.page-next{
       transition:{
              property:all;
              delay:2s;
       }
}

-----》

body {
  font-family: Helvitica;
  font-size: 15px;
  font-weight: bold;
}
.nav {
  border: 1px solid red;
  border-left: none;
  border-right: none;
}
.page-next {
  transition-property: all;
  transition-delay: 2s;
}

---

mixin 混合

你可以把它想象成一个有名字的定义好的样式
每一个mixin都有自己的名字，类似于js里的函数定义方法如下

@mixin 名字(参数1，参数2...){
    ...
}

使用方法是在其他选择器css样式里通过@include引入，其实就相当于将mixin里的代码写入到这个选择器的css里，如下：

@mixin alert {
       color:#f60;
       background-color:#f60;
       a{
              color:pink;
       }
       &-a{
              color:red;
       }
}
.alert-warning{
       @include alert;
}

-----》

.alert-warning {
  color: #f60;
  background-color: #f60;
}
.alert-warning a {
  color: pink;
}
.alert-warning-a {
  color: red;
}

---

刚才是没有参数的mixin，mixin也可以拥有参数，需要注意的是：

• 形参的名字前要加$
• 传参的时候只写值的话要按顺序传
• 传参的时候不想按顺序的话需要加上形参名字
  例如：

@mixin alert($color,$background) {
       color:$color;
       background-color:$background;
       a{
              color:darken($color,10%);//把颜色加深百分之十
       }
}
.alert-warning{
       @include alert(red,blue);
}
.alert-info{
       @include alert($background:red,$color:blue);
}

------》

.alert-warning {
  color: red;
  background-color: blue;
}
.alert-warning a {
  color: #cc0000;
}
.alert-info {
  color: blue;
  background-color: red;
}
.alert-info a {
  color: #0000cc;
}

---

继承拓展 extend

如果我们有一个选择器想要拥有另一个选择所有的东西，不管是样式还是子元素等等，可以使用@extend来继承
大家需要注意的是，++b继承a的时候，a的子元素设置了样式，也会给b的子元素设置样式++，达到完全一样的情况，例如：

.alert {
       padding:5px;
}
.alert a {
       font:{
              weight:bold;
              size:15px;
       }
}
.alert-info {
       @extend .alert;
       backgournd:skyblue;
}

----》

.alert, .alert-info {
  padding: 5px;
}
.alert a, .alert-info a {
  font-weight: bold;
  font-size: 15px;
}
.alert-info {
  backgournd: skyblue;
}

---

partials

在以前咱们编写css的时候，一个css引入另一个css需要使用@import，其实这是不好的，会多发一次http请求，影响咱们站点的响应速度。
在sass里，咱们可以把小的sass文件分出去，叫做partials，在某个sass里通过@import ‘partials名’去引入，注意路径哟，这样的话就可以把partials里的代码引到咱们大的sass里一起编译

• 需要注意的是 partials的文件名前要加_

_base.sass :

body{
       margin:0;
       padding:0;
}

style.sass :

@import "base";
.alert {
       padding:5px;
}
.alert a {
       font:{
              weight:bold;
              size:15px;
       }
}
.alert-info {
       @extend .alert;
       backgournd:skyblue;
}

----------->

body {
  margin: 0;
  padding: 0;
}
.alert, .alert-info {
  padding: 5px;
}
.alert a, .alert-info a {
  font-weight: bold;
  font-size: 15px;
}
.alert-info {
  backgournd: skyblue;
}

这样的话我们就可以把模块化的思想引入到sass里了

comment注释

sass里的注释有三种

• 多行注释
• 单行注释
• 强制注释
  多行注释：压缩后不会出现在css里 /* /
  单行注释: 不会出现在css里 //
  强制注释：压缩后也会出现在css里 /! */

6、数据类型与函数

数据类型

在sass里有数字、字符串、列表、颜色等类型
在cmd里 输入

sass -i

就会进入到交互模式，输入的计算可以马上得到结果
type-of()可以用来得到数据类型，如：

type-of(5) -> number

注意数字类型的可以包含单位，如：

type-of(5px) -> number

字符串类型：

type-of(hello) -> string
type-of('hello') -> string

list类型：

type-of(1px solid red) -> list
type-of(5px 10px) -> list

颜色：

type-of(red)  -> color
type-of(rgb(255,0,0)  -> color
type-of(#333)  -> color

---

number 计算

2+9 -》10
2*8 -》16
(8/2) ->4 //除法要写括号

也可以包含单位

5px + 5px -> 10px
5px -2 ->3px
5px *2 ->10px
5px * 2px ->10px*px //这样就不对了哟
（10px/2px） -> 5//除法单位取消
3+2*5px->13px

好吧，都是一些小学的数学题，很简单对吧

处理数字的函数

绝对值

abs(10) -> 10;
abs(10px) -> 10px;
abs(-10px) -> 10px;

四舍五入相关

round(3.4)->3  //四舍五入
round(3.6)->4
ceil(3.2)->4  //向上取整
ceil(3.6)->4
floor(3.2)->3  //向下取整
floor(3.9)->3
percentage(600px/1000px) ->65%  //百分之
min(1,2,3) -> 1   //最小值
max(2,3,4,5) -> 5  //最大值

---

字符串相关

//带引号和不带引号的字符串想加为带引号的字符串
"a" + b ->"ab"
a + "b" ->"ab"
//字符串+数字
"ab" + 1 ->"ab1"
//字符串 - 和 / 字符串
"a" - b ->"a-b"
"a" / b ->"a/b"
//注意字符串不能相乘

---

字符串函数

大写：

$word:"hello";
to-upper-case($word) -> "HELLO"

小写：

$word:"Hello";
to-lower-case($word) -> "hello"

得到length：

$word:"Hello";
str-length($word) -> 5

得到字符串在字符串里的位置：

$word:"Hello";
str-index($word,"el") -> 2

字符串中插入字符串：

$word:"Hello";
str-insert($word,"aa",2) -> "Haaello"

---

颜色相关

在sass里除了关键字、十六进制、rgb和rgba之外还有一种颜色是HSL
分别表示的是 色相 0-360（deg） 饱和度 0-100% 明度 0-100%
例如：

body {
       background-color:hsl(0,100%,50%);
}
-》
body {
  background-color: red;
}

body {
       background-color:hsl(60,100%,50%);
}
-》
body {
  background-color: yellow;
}

也可以有透明哟

body {
       background-color:hsl(60,100%,50%，0.5);
}
-》
body {
  background-color: rgba(255,255,0,0.5);
}

---

颜色函数

lighten函数和darken函数可以把颜色加深或减淡，即调整明度，第一个参数为颜色，第二个参数为百分比，例如：

$color:#ff0000;
$light-color:lighten($color,30%);
$dark-color:darken($color,30%);
.a{
       color:$color;
       background:$light-color;
       border-color:$dark-color;
}

—》

.a {
  color: #ff0000;
  background: #ff9999;
  border-color: #660000;
}

saturate和desaturate函数可以调整颜色的纯度

$color:hsl(0,50%,50%);
$saturate-color:saturate($color,50%);
$desaturate-color:desaturate($color,30%);
.a{
       color:$color;
       background:$saturate-color;
       border-color:$desaturate-color;
}

–》

.a {
  color: #bf4040;
  background: red;
  border-color: #996666;
}

用transparentize来让颜色更透明
用opatify来让颜色更不透明

$color:rgba(255,0,0,0.5);
$opacify-color:opacify($color,0.3);
$transparentize-color:transparentize($color,0.3);
.a{
       color:$color;
       background:$opacify-color;
       border-color:$transparentize-color;
}

—》

.a {
  color: rgba(255, 0, 0, 0.5);
  background: rgba(255, 0, 0, 0.8);
  border-color: rgba(255, 0, 0, 0.2);
}

---

列表类型

在sass里，用空格或者逗号隔开的值就是列表类型
如：

1px solid red
Courier,microsoft yahei

---

列表函数

sass里的列表类似与数组

获取列表的长度
length(5px 10x)  2
获取列表中的第几个元素
nth(5px 10px,2)  10px
获取一个元素在一个列表里的下标
index(1px solid red,solid) 2
给列表里加入新的元素
append(5px 10px,5px)  5px 10px 5px
连接两个列表
join(5px 10px,5px 0) 5px 10px 5px 0

---

map类型

sass里的map类型类似与js里的object

$map:(key1:value1,key2:value2,key3:value3);

---

map 函数

//定义一个map
$color:(light:#ffffff,dark:#000000);
//获取map 的length
length($color)    ->2
//得到map里key对应的值
map-get($color,dark)   ->#000000
获取map里的所有键的列表
map-keys($color)   ->("light","dark") //列表类型
获取map里的所有值的列表
map-values($color)  -> ("#ffffff","#000000") //列表类型
判断map里是否含有这个key
map-has-key($color,light)   ->true
给map里添加键值对
map-merge($color,(light-gray:#cccccc))
->(light:#ffffff,dark:#000000,light-gray:#cccccc)
移除map里的某个键值对
map-remove($colors,light)  ->(dark:#000000,light-gray:#cccccc)

---

boolean类型

在sass里通过> < 比较得到的值就是布尔值 true 和false

5px>3px -> true
5px<2px -> false

在sass里也可以有或 且 非
且：

(5px > 3px) and (5px < 2px) -> false
(5px > 3px) and (5px > 2px) -> true

或：

(5px > 3px) or (5px < 2px) -> true
(5px < 3px) and (5px > 2px) -> false

非：

not(5px>3px) -> false

---

interpolation

在sass里可以通过interpolation的方式来在变量名和属性名上拼接变量值，例如

$name:"info";
$attr:"border";
.alert-#{$name}{
       #{$attr}-color:red;
}

---->

.alert-info {
  border-color: red;
}

7、分支结构、循环结构、函数

分支结构

在sass里，可以使用@if让我们根据一些条件来应用特定的样式
结构：

@if 条件 {
   
}

如果条件为真的话，括号里的代码就会释放出来
例如：

$use-refixes:true;
.rounded{
   @if $use-refixes {
       -webkit-border-radius:5px;
       -moz-border-radius:5px;
       -ms-border-radius:5px;
       -o-border-radius:5px;
   }
   border-radius:5px;
}

—>

.rounded {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

如果是另外一种情况

$use-refixes:false;

—》

.rounded {
  border-radius: 5px;
}

if else在sass里的写法是：

body{
       @if $theme == dark {
              background:black;
       } @else if $theme == light {
              background:white;
       } @else {
              background:gray;
       }
}

---

for循环

在sass里的for循环是这样的

@for $var form <开始值> through <结束值> {
    ...
}

还有一种是

@for $var form <开始值> to <结束值> {
    ...
}

注意，开始值和结束值的关系可以是升序也可以是倒序，但是每次只能+1或者-1
这两种有什么区别呢？
区别就是 from 1 to 4 的话是执行三次，i的变化是 1 2 3
from 1 through 4 的话是执行四次，i的变化是 1 2 3 4
如：
from to

$columns:4;
@for $i from 1 to $columns{
       .col-#{$i}{
              width:100% / $columns * $i;
       }
}

—》

.col-1 {
  width: 25%;
}
.col-2 {
  width: 50%;
}
.col-3 {
  width: 75%;
}

from through

$columns:4;
@for $i from 1 through $columns{
       .col-#{$i}{
              width:100% / $columns * $i;
       }
}

—>

.col-1 {
  width: 25%;
}
.col-2 {
  width: 50%;
}
.col-3 {
  width: 75%;
}
.col-4 {
  width: 100%;
}

---

each 遍历list类型

在sass里可以利用each方法来遍历咱们的list类型的数据
list类型在js里类似于数组，那么each类似于for in遍历，结构如下：

@each $item in $list{
    ...
}

例如：

$colors:success error warning;
$map:(success:green,warning:yellow,error:red);
@each $color in $colors{
       .bg-#{$color}{
              background:map-get($map,$color);
       }
}

—>

.bg-success {
  background: green;
}
.bg-error {
  background: red;
}
.bg-warning {
  background: yellow;
}

---

@while 循环

在sass里，拥有@while循环，比@for会更好用一些,@for循环只能从一个数到另一个数变化之间执行，每次变化都是1，while设置循环结构的话更为灵活；
结构：

@while 条件{
   
}

eq：

$i:6;
@while $i>0{
       .item-#{$i}{
              width:$i*5px;
       }
       $i:$i - 2;
}

注意：$i - 2 需要用空格隔开哟
---------》

.item-6 {
  width: 30px;
}
.item-4 {
  width: 20px;
}
.item-2 {
  width: 10px;
}

---

自定义函数

在sass里也可以定义函数，并且也可以有返回值
结构：

@function 名称 (参数1，参数2){
    @return ...
}

例如，我们做一个返回map里key对应的值的函数：

$colors:(light:#ffffff,dark:#000000,gray:#555555);
@function color($key){
       @return map-get($colors,$key);
}
body{
       background:color(light);
       color:color(dark);
       border-color:color(gray);
}

—》

body {
  background: #ffffff;
  color: #000000;
  border-color: #555555;
}