Sass知识基础

Sass安装：

安装Ruby ,gem
　Sass是用Ruby语言写的，但是两者的语法没有关系，所以学 Sass 不用学 Ruby，只是必须先安装Ruby，然后再安装Sass。https://rubyinstaller.org/downloads/
　
安装完成
完成后运行cmd进入命令符，输入ruby -v查看版本号，如果能正确显示版本号，则说明ruby安装成功

然后输入gem install sass进行安装

查看sass是否安装成功：sass -v
sass更新：gem update sass
sass卸载：gem uninstall sass

Sass的使用

自动编译sass
sass --watch sass:css //按ctrl +c 停止编译
类似这样：C:\Users\NT\Desktop\test\sass_test>sass --watch sass\core.sass:css\init.css
具体的文件路径以你的为准 –watch是用于监测文件是否有变化：后是用于输出css文件，也就是你sass写好过后输出的css样式，注意文件路径中不要有中文路径。
执行成功后

>>> Sass is watching for changes. Press Ctrl-C to stop.
      write branch\public\static\css\core\init.css
      write branch\public\static\css\core\init.css.map

修改编译输出的css格式
包括： nested 嵌套 compct 紧凑 expanded 扩展 compressed 压缩，影响输入的css格式

nested（嵌套）默认的格式是nested嵌套的格式，嵌套格式如果出现子级样式，会往右边缩进
compact（紧凑）输出格式，输入如下命令
sass --watch sass-lzf:css --style compact
expanded（扩展）输出格式，输入如下命令(这种格式便于阅读)
sass --watch sass-lzf:css --style expanded
compresed（压缩）输出格式，输入如下命令
sass --watch sass-lzf:css --style compressed

sass和scss的区别
sass 3.0版本后，新增scss语法

sass是靠缩进表示嵌套关系，scss是花括号

//sass 太费眼了
.father
    width:100px;
    .son
        width:50px;
//scss 适合我这种眼瘸手残患者
.father{
    width:100px;
    .son{
        width:50px;
    }
}

scss功能很强大的样子，能做运算、写函数

嵌套
变量 $color : #111111;
混入 @mixin
继承 @extend

@mixin、@extend、%placeholder

mixin 可以传变量
extend 不可以传变量，相同样式直接继承，不会造成代码冗余；基类未被继承时，也会被编译成css代码
placeholder 基类未被继承时不会被编译成css代码

sass的变量使用（sass使用$符号来标识变量）


$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
  border: $highlight-border;
}
//编译后
.selected {
  border: 1px solid #F90;

sass的嵌套（选择器嵌套，属性嵌套）
&表示父元素选择器

css.style

css.style
sass 的Mixins(混合)
Mixin 是 Sass 中用来方便地复用代码的方法，你可以简单点理解成函数，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值，返回的是一组 CSS 属性或代码。@mixin的调用方式是@include，%的调用方式是@extend。@include产生的样式是以复制拷贝的方式存在的，而@extend产生的样式是以组合申明的方式存在的。

无参数

@mixin center-block {
     margin-left: auto; margin-right: auto;
  }
  //使用
	#header{ 
	width:1000px; 
	@include center-block;
	 }
	.gallery{ 
	  width:600px; 
	  @include center-block; 
	  }

多个参数

// 禁用样式，加!important
 @mixin disabled($bgColor:#e6e6e6,$textColor:#ababab){ 
 background-color: $bgColor !important; 
 color: $textColor !important; 
 cursor: not-allowed !important; 
 }
 //使用
 .disabled{ @include disabled; }
//解析后的css
.disabled { 
	background-color: #e6e6e6 !important; 
	color: #ababab !important; 
	cursor: not-allowed !important; 
}

@mixin opacity($opacity) {
    opacity: $opacity;
    $opacity-ie: $opacity * 100;
    filter: alpha(opacity=$opacity-ie); //IE8
}

.faded-text {
    @include opacity(0.8);
}

一个属性可以有多个属性值的，传参的时候变量得加…

@extend （继承）

@import （引入其他sass样式）
@import base
如果你有一个 SCSS 或 Sass 文件需要引入，但是你又不希望它被编译为一个 CSS 文件，这时，你就可以在文件名前面加一个下划线，就能避免被编译。这将告诉 Sass 不要把它编译成 CSS 文件。然后，你就可以像往常一样引入这个文件了，而且还可以省略掉文件名前面的下划线。
你有一个文件叫做 _colors.scss。这样就不会生成 _colors.css 文件了，而且你还可以这样做：
@import "colors";//不用加下划线来引入 _colors.scss 文件。
sass注释
（1）//注释内容；(编译后不保留)（2）/注释内容/；（编译后保留）（3）/!注释内容/。（在注释内容前面加上一个“!”，这种压缩工具就不会删除这条注释信息了。不过这种注释方式用得很少，一般在CSS文件顶部为了声明版权信息才会使用）
sass 的数据类型 type of
sass的颜色函数

rgb颜色函数(1):
rgb颜色只是颜色中的一种表达方式，其中R是“red"表示红色，而G是“green”绿色，B是“blue”蓝色。在Sass中6个函数

 rgb($red,$green,$blue)：根据红、绿、蓝三个值创建一个颜色；
 rgba($red,$green,$blue,$alpha)：根据红、绿、蓝和透明度值创建一个颜色；
 red($color)：从一个颜色中获取其中红色值；
 green($color)：从一个颜色中获取其中绿色值；
 blue($color)：从一个颜色中获取其中蓝色值；
 mix($color-1,$color-2,[$weight])：把两种颜色混合在一起。

$ sass -i //在终端运行这个命令，开启Sass的函数计算


$ sass -i
>> rgb(200,40,88) //根据r:200,g:40,b:88计算出一个十六进制颜色值
#c82858
>> rgba(#c82858,.65) //根据#c82858的65%透明度计算出一个rgba颜色值
rgba(200, 40, 88, 0.65)
>> red(#c82858) //从#c82858颜色值中得到红色值200
200
>> green(#c82858) //从#c82858颜色值中得到绿色值40
40
>> blue(#c82858) //从#c82858颜色值中得到蓝色值88
88
>> mix(#c82858,rgba(200,40,80,.65),.3) //把#c82858和rgba(200,40,88,.65)两颜色按比例混合得到一个新颜色

主要讲rgba()函数用法
rgba($red,$green,$blue,$alpha) //将一个rgba颜色转译出来，和未转译的值一样
rgba($color,$alpha) //将一个Hex颜色转换成rgba颜色
主要讲Mix()函数
Mix函数是将两种颜色根据一定的比例混合在一起，生成另一种颜色。
```
mix($color-1,$color-2,$weight);
```
$color-1和$color-2指的是你需要合并的颜色，颜色可以是任何表达式，也可以是颜色变量。$weight合并的比例，默认值为50%，其取值范围是0~1之间
实例：


//SCSS
$color1: #a63;
$color2: #fff;
$bgColor1: #f36;
$bgColor2: #e36;
$borderColor1:#c36;
$borderColor2:#b36;
 
.mix {
    background: mix($bgColor1,$bgColor2,.75);
    color: mix($color1,$color2,.25);
    border-color: mix($borderColor1,$bgColor2,.05);
}
 
//CSS
.mix {
    background: #ee3366;
    color: #fefefe;
    border-color: #ed33

Sass知识基础

hsl()函数(2)
HSL给我们带来了一个更直观的颜色控制，我们时常需要让一个颜色比另一个颜色更暗一点或者说更亮一点。比如说“a:hover”状态下我们需要把一个颜色变暗一点，那么使用“HSL”是非常方便的，反而我们使用十六进制那就需要更多的时间调试。而这个“HSL”他只是一个简单的数量变化。
“HSL”所表示的是“H:色相”，“S：饱和度”，“L：亮度”。色相是在色盘上的颜色（见下图），颜色的选择是使用饱和度：“0度是红色”，“120度为绿色”和“240度为蓝色。

用法：
hsl($hue,$saturation,$lightness)：通过色相（hue）、饱和度(saturation)和亮度（lightness）的值创建一个颜色；
hsla($hue,$saturation,$lightness,$alpha)：通过色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）的值创建一个颜色；

 hue($color)：从一个颜色中获取色相（hue）值；
 saturation($color)：从一个颜色中获取饱和度（saturation）值；
 lightness($color)：从一个颜色中获取亮度（lightness）值；
 adjust-hue($color,$degrees)：通过改变一个颜色的色相值，创建一个新的颜色；
 lighten($color,$amount)：通过改变颜色的亮度值，让颜色变亮，创建一个新的颜色；
 darken($color,$amount)：通过改变颜色的亮度值，让颜色变暗，创建一个新的颜色；
 saturate($color,$amount)：通过改变颜色的饱和度值，让颜色更饱和，从而创建一个新的颜色
 desaturate($color,$amount)：通过改变颜色的饱和度值，让颜色更少的饱和，从而创建出一个新的颜色；
 grayscale($color)：将一个颜色变成灰色，相当于desaturate($color,100%);
 complement($color)：返回一个补充色，相当于adjust-hue($color,180deg);
 invert($color)：反回一个反相色，红、绿、蓝色值倒过来，而透明度不变

在HSL函数中，hsl()和hsla()函数主要是通过颜色的H、S、L或者A几个参数获取一个rgb或rgba表达的颜色，这两个函数与CSS中的无太大区别，只是使用这两个函数能帮助您知道颜色的十六进制表达式和rgba表达式。
而hue()、saturation()和lightness()函数主要是用来获取指定颜色中的色相值、饱和度和亮度值。对于颜色表达没有太多的实际作用。
HSL函数中最常见的应该是lighten()、darken()、saturate()、desaturate()、grayscale()、complement()和 invert()几个函数。

lighten() & darken()函数：
两个函数都是围绕颜色的亮度值做调整的

$baseColor: #ad141e;
//SCSS
.lighten {
    background: lighten($baseColor,10%);
}
.darken{
    background: darken($baseColor,10%);
}
 
//CSS
.lighten {
  background: #db1926; 
}
 
.darken {
  background: #7f0f16;

Sass知识基础

saturate() & desaturate()函数
通过改变颜色的饱和度来得到一个新的颜色

$baseColor: #ad141e;
//SCSS
.saturate {
  background: saturate($baseColor,30%);
}
.desaturate {
  background: desaturate($baseColor,30%);
}
 
//CSS
.saturate {
  background: #c1000d; 
}
 
.desaturate {
  background: #903137;

Sass知识基础

adjust-hue()函数
通过调整颜色的色相换算一个新颜色。他需要一个颜色和色相度数值。通常这个度数值是在-360deg至360deg之间，当然了可以是百分数

$baseColor: #ad141e;
//SCSS
.adjust-hue-deg {
  background: adjust-hue($baseColor,30deg);
}
.adjust-hue-per {
  background: adjust-hue($baseColor,30%);
}
 
//CSS
.adjust-hue-deg {
  background: #ad5614; 
}
 
.adjust-hue-per {
  background: #ad5614;

Sass知识基础

grayscale()函数
这个函数会颜色的饱和度值直接调至0%，所以此函数与desaturate($color,100%)所起的功能是一样的。一般这个函数能将彩色颜色转换成不同程度的灰色
complement（）函数
complement()函数也是非常的神奇，可以在原色上得到一个补充色。这个函数与adjust-hue($color,180deg)取得的效果是一样的
invert（）函数
invert()函数也是一个神奇的函数。根据颜色的R、G和B单独进行反相，然后合并到一起，当然其中的透度值A也可以结合进来

//SCSS
$baseColor1: #ad141e;
$baseColor2: #d90fec;
 
.invert1 {
  background: invert($baseColor1);
}
.invert2 {
  background: invert($baseColor2);
}
 
//CSS
.invert1 {
  background: #52ebe1; 
}
 
.invert2 {
  background: #26f013; 
}

Sass知识基础

opacity()函数(3)
在CSS中除了可以使用rgba、hsla和transform来控制颜色透明度之外，还可以使用opacity来控制，只不过前两者只是针对颜色上的透明通道做处理，而后者是控制整个元素的透明度。

 alpha($color) /opacity($color)：获取颜色透明度值；
 rgba($color, $alpha)：改变颜色的透明度值；
 opacify($color, $amount) / fade-in($color, $amount)：使颜色更不透明；
 transparentize($color, $amount) / fade-out($color, $amount)：使颜色更加透明。

sass的list列表
list类型有点像js中的数组。list数据可通过空格，逗号或小括号分隔多个值，可用nth($var,$index)取值。关于list数据操作还有很多其他函数如length($list)，join($list1,$list2,[$separator])，append($list,$value,[$separator])等。

// 将背景颜色值定义成变量
$red : #FF0000;
$orange : #FFA500;
$yellow : #FFFF00;
$green : #008000;
$bluegreen : #00FFFF;
$blue : #0000FF;
$purple : #800080;

// 定义一个list储存背景颜色
$bgcolorlist: $red $orange $yellow $green $bluegreen $blue $purple;

// 使用SASS for循环语句为每一个li设置background-color
@for $i from 1 to length($bgcolorlist)+1 {
    #main-container ul li:nth-child(#{$i}) {
        background-color: nth($bgcolorlist,$i);
    }
}