Sass的安装以及使用_sass安装使用的步骤是什么

(2)打开安装包，出现如下图，点击OK

(3)选择（I accept the License） 点击next

(4)出现这个图，我们最好选择第二个（会把Ruby放到你的环境变量里面，不然后面配置环境变量会很麻烦），然后点击install

(5)完成后运行cmd进入命令符，输入ruby -v查看版本号。

如果能正确显示版本号，则说明ruby安装成功。但因为国内网络的问题导致gem源间歇性中断因此我们需要更换gem源。
（使用淘宝的gem源https://ruby.taobao.org/）如下：
//1.删除原gem源
gem sources --remove https://rubygems.org/

//2.添加国内淘宝源
gem sources -a https://ruby.taobao.org/

//3.打印是否替换成功
gem sources -l

//4.更换成功后打印如下
*** CURRENT SOURCES ***
https://ruby.taobao.org/

然后输入gem install sass进行安装。
安装成功后出现下面的截图

至此，Sass安装已经安装完成了！

三，Sass的使用(基本用法快速入门)

1、语法格式

Sass语法格式有两种，这个根据个人的喜好进行选择吧（个人比较倾向于第二种，个人感觉相对于css的书写方式来说，比较好理解）

(1) 通过 tab 键控制缩进的一种语法规则，而且这种缩进要求非常严格

$def-color: #333 
body 
font: 100% 
color: $def-color
1
2
3
4

(2) 和正常的css差不多，代码都包裹在一对大括号里，并且末尾结束处都有一个分号

$def-color: #333 
body{ 
font: 100%； 
color: $def-color； 
}
1
2
3
4
5

2、变量的声明以及引用

(1) SASS允许使用变量，所有变量以$开头来进行标识。

比如：$base-color和$theme-width
1

注意：当变量定义在css规则块内，那么该变量只能在此规则块内使用。

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}
1
2
3
4
5
6

//编译后

nav {
  width: 100px;
  color: #F90;
}
1
2
3
4

在这个例子中，$nav-color这个变量定义在了规则块外边，所以在这个样式表中都可以像 nav规则块那样引用它。$width这个变量定义在了nav的{ }规则块内，所以它只能在nav规则块 内使用。这意味着是你可以在样式表的其他地方定义和使用$width变量，不会对这里造成影响。

另外，声明变量用的中划线进行分割（也可以用下划线）,中划线和下划线是互通。 例如：编译前

$color-lins:#ccc; body{ color: $color_lins; } 
1

编译后的css

body {
color: #ccc; }
1
2

(2) 变量的引用

• 父选择器的标识符&

• #scss
  div a{
    color: #333;
    &:hover{
      color: red;
    }
    //如果body的class .ies
    body.ies & {
      color:#888;
    }
  }
  #编译后的css
  div a {
    color: #333; 
  }
  div a:hover {
    color: red; 
  }
  body.ies div a {
    color: #888; 
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21

  • 普通变量和默认变量

  普通变量可以全局使用，默认变量则需要加上!default
  sass 的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可。
  #scss  
  $font-color:#f7f7f7;//普通变量
  $font-size:16px;//重新声明变量
  $font-size:14px !default;//默认变量
  1
  2
  3
  4
  5
  6
  1
  2
  3
  4
  5
  6

  .main{
    color: $font-color;
    font-size: $font-size;
  }
  #编译后的css
  .main {
    color: #f7f7f7;
    font-size: 16px; }
  1
  2
  3
  4
  5
  6
  7
  8

  • 全局变量和局部变量
  #全局变量就是定义在元素外面的变量

  #scss
  $color:#333 !default;//全局变量
  h1{
    color: $color;//引用全局变量
    a{
      $color:red;//重新定义变量，局部变量
      span{
        color: $color;//引用局部变量
      }
    }
    $color:#999;//重新定义变量，局部变量
    span{
      color:$color;//引用局部变量
    }
  }
  #编译后的css
  h1 {
    color: #333; 
  }
  h1 a span {
      color: red; 
  }
  h1 span {
      color: #999; 
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25

  3、计算

  Sass允许在代码中使用算式，支持数字的加减乘除运算、取整运算 (+, -, *, /, %)，颜色运算，布尔运算（ and, or, 和 not ）等，例如：

  //数字运算
  body {
  　　　margin: (14px/2);
  　　　top: 50px + 100px;
  　　　right: $var * 10%;
  　}
  //颜色运算　
  //如果颜色值包含 alpha channel（rgba 或 hsla 两种颜色值），必须拥有相等的 alpha 值才能进行运算，因为算术运算不会作用于 alpha 值。
  html{
    color: #010203 + #040506;
  }
  计算方式：1+4=5   2+6 = 7   3+6 = 9
  
  #编译后的css
  html {
  color: #050709; }
  
  html {
  color: #010203 * 2;
  }
  
  #编译后的css
  html {
  color: #020406; }
  
  and运算
  #scss
  $age:10;
  html{
    @if ($age > 10 and $age < 25) {
          color: green;
     }@else{
       color:red;
     }
  }
  
  #编译后的css
  html {
    color: red; }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39

  4、嵌套

  Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器，例如：

  div span {
  　　　　color : red;
  　　}
  1
  2
  3

  我们可以写成下面这样的：

  div {
  　　　　span{
  　　　　　　color:red;
  　　　　}
  　　}
  1
  2
  3
  4
  5

  • 嵌套-属性嵌套
  • 类似于font,border,margin,padding这些属性我们也可以进行嵌套，例如：

  #scss
  【注意：】属性嵌套的时候属性的后面必须跟冒号，比如：border：{......}
  .main{
    border:{
      top:1px solid #444;left:1px solid #000;
    }
    margin: {
      top:25px;left:36px;right: 65px;bottom: 23px;
    }
    padding: {
      top: 2px;left: 26px;right: 12px;bottom: 28px;
    }
  }
  #编辑后的css
  .main {
    border-top: 1px solid #444;
    border-left: 1px solid #000;
    margin-top: 25px;
    margin-left: 36px;
    margin-right: 65px;
    margin-bottom: 23px;
    padding-top: 2px;
    padding-left: 26px;
    padding-right: 12px;
    padding-bottom: 28px; }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25

  在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成：

  a {
  　　　　&:hover { color: #ffb3ff; }
  　　}
  1
  2
  3

  5、导入Sass文件

  如果我们现在有一个color.scss的配置文件，需要引入到style.scss，我们可以用@import命令，来插入外部文件。例如：

  @import "path/color.scss";
  1

  此时，我们就可以在style里面使用color.scss的变量了，例如：$sys-color是color.scss的变量

  header h1{font-size: 14px;color: $sys-color}
  1

  6、混合器的使用

  通常网站会有很多重复的代码存在，比如圆角，或者按钮的css,为了避免写重复的代码，所以我们可以选择用混合器。这就有点像C语言的宏，是可以重用的代码块

  混合器使用@mixin标识符定义

  #定义混合器
  @mixin borderRadius {
    border-radius: 5px;
    -webkit-border-radius；5px；
    -moz-border-radius:5px;
  }
  1
  2
  3
  4
  5
  6
  1
  2
  3
  4
  5
  6

  #通过@include来使用这个混合器
  h1{
  font-size: 28px;color: #333;
  @include borderRadius;
  }
  
  #编译后的css
  h1 {
  font-size: 28px;
  color: #333;
  //混合器里面被编译出来的代码
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15

  另外，混合器的另一个强大之处是里面还可以传参
  混合器并不一定总得生成相同的样式。可以通过在@include混合器时给混合器传参，来定制混合器生成的精确样式。当@include混合器时，参数其实就是可以赋值给css属性值的变量。类似js的function

  //定义可传参数混合器
  @mixin border-radius($size){
    border-radius:$size;
    -webkit-border-radius:$size;
    -moz-border-radius:$size;
  }
  h1{
  font-size: 28px;color: #333;
  @include border-radius(10px);
  }
  
  
  #编译后的css
  h1 {
  font-size: 28px;
  color: #333;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20

  7、继承

  Sass允许一个选择器，继承另一个选择器使用@extend命令。

  比如，现有class1：

  .class1 {
  　　　　border: 1px solid #ddd;
  　　}
  1
  2
  3

  class2要继承class1，就要使用@extend命令：

  .class2 {
  　　　　@extend .class1;
  　　　　font-size:120%;
  　　}
  1
  2
  3
  4

  8、占位符 %placeholder

  Sass 额外提供了一种特殊类型的选择器：占位符选择器 (placeholder selector)。与常用的 id与 class 选择器写法相似，只是 #或.替换成了%。必须通过@extend指令调用，当占位符选择器单独使用时（未通过 @extend调用），不会编译到 CSS 文件中。

  #scss 声明%变量
  %padTop5{
    padding-top: 5px;
  }
  %padBot5{
    padding-bottom: 5px;
  }
  .ulo{
    @extend %padTop5;
    @extend %padBot5;
  }
  
  
  #编译后的css
  .ulo {
  padding-top: 5px; }
  .ulo {
  padding-bottom: 5px; }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18

  但是占位符有一个缺点，就是生成的css里面无法合并。

  9、注释

  Sass共有两种注释风格。

  (1) 标准的CSS注释 /* comment */ ，会保留到编译后的文件。

  (2) 单行注释 // comment，只保留在SASS源文件中，编译后被省略。

  在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。例如：

  　/*! 
  　　　　这个地方是重要注释！
  　　*/
  1
  2
  3

  这就是Sass中我们经常使用的一些基本的用法，另外Sass还给我们提供了像@if和@else的条件语句，循环语句，自定义函数等其他的用法，这里不再详述，想了解的小伙伴们可以去Sass的中文网上查看。

  →Sass官网