前端进阶攻略之Sass

前端进阶攻略之Sass

一.SASS是什么？

官方回答：世界上最成熟、最稳定、最强大的专业级CSS扩展语言！

sass是css预处理器；

优点：

 用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就 只要  使用这种语言
 进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文
 件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使
 用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强、可读性更
 佳，更易于代码的维护等诸多好处。

缺点：

 css的文件体积和复杂度不可控、调试难度增加、成本等

补充：

它在CSS的语法基础上增加了变量（variable）、嵌套（nested rules）、混合（mixins)、导入（inline imports）等高级功能，这些拓展令CSS更加强大与优雅。

使用Sass以及Sass的样式库（如compass）可以更好地组织管理样式文件、以及更高效的开发项目。

二.如何使用sass

VScode三个关于sass的插件

.vscode-Sass------sass/scss文件语法提示。（sublime text也有）

.vscode-Easy Sass------scss编译成css，min.css。(不错的一个sass编译工具)

.vscode-Sass Formatter---------scss自动格式 缩进

2.1vscode中安装sass

第一步，再vscode中安装easy sass 下图是已经安装成功的状态

第二步，修改vscode的配置

点击设置按钮

然后将这段复制到json文件里面
expanded：没有缩进的、扩展的css代码。
compact：简洁格式的 css 代码。
compressed：压缩后的 css 代码

"easysass.compileAfterSave": true, 
 "easysass.formats": [ //nested：嵌套缩进的 css 代码。
//expanded：没有缩进的、扩展的css代码。
//compact：简洁格式的 css 代码。
//compressed：压缩后的 css 代码

        {
            "format": "expanded",
            "extension": ".css"
        },
        {
            "format": "compressed",
            "extension": ".min.css"
        }
    ],
    "easysass.targetDir": "css/" //路径

第三步创建一个后缀为.sass

它会自动生成2个css，一个是压缩后的css（上线后使用），一个是代码格式化的css（测试使用）

三.sass的语法

less与css都是在{}当中写属性，而在sass当中可以不写{}，直接写属性，如果写了{}就会报错。

// less写法
.content{
     width: 200px;
     height: 200px;
     border: 1px solid;
} 
// sass写法
.content
    width: 200px;
    height: 200px;
    border: 1px solid;
    .div1 
        width: 100px;
        height: 100px;
        border: 1px solid;

3.1.1 .变量-(声明变量的符号“$”,变量名称,赋予变量的值)

Sass 采用 $ 符号来声明变量。而less是用@符号来声明变量

$width : 500px;   
.content   
    width : $width;  
    height: $width;
    background-color: red;

3.1.2.默认变量-(!default )

在声明变量的过程中，可以给变量添加默认值(!default)标志。如果在其变量值没有单独设定，那么就用添加默认值的变量值。如果设定了，那么就用重新设定的变量值。如下

$width : 500px !default;   
.content 
      width : $width;  
      height: $width;
      background-color: red;  
        
$width : 200px
.demo2
      width: $width;
      height: $width;
      background-color: green;
      
编译后
.content {
  width: 500px;
  height: 500px;
  background-color: red;
}

.demo2 {
  width: 200px;
  height: 200px;
  background-color: green;
}

3.1.3.声明多个变量

变量可以一个一个的声明，也可以多个一起声明。多个一起声明，用起来是比较方便的，特别是声明相似功能的变量。

$size : 30px  15px !default;   
.content 
      font-size: nth($size,1);  
.demo2
      font-size: nth($size,2);  

3.1.4.全局变量和局部变量

a.全局变量就是定义在元素外面的变量
b.局部变量只会在局部范围内覆盖全局变量

$color: green !default;//定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量)
.content 
  width: 200px;
  height: 200px;
  background-color: red;
  $color: pink;//定义局部变量
  .div1 
    width: 100px;
    height: 100px;
    background-color: $color;//调用局部变量

.demo2 
  width: 200px;
  height: 200px;
  background-color: $color;//调用全局变量

3.2.插值应用-( #{} )

变量不仅可以用在属性值，还可以用在选择器或者是属性上面。下面是变量使用在选择器上的小实例

$class : content;  
.#{$class} 
    width : 20px;  
  

3.3 计算功能

3.3.1sass变量可以进行加减乘除运算操作。

$width: 500px;
$height: 200px;
.content 
  width: $width - $height;
  height: $height + $width;
  background-color: red;

3.3.2.颜色也可以进行加减乘除运算

$width: 500px;
$height: 200px;
.content 
  width: $width - $height;
  height: $height + $width;
  background-color:  #010203 + #040506;

3.3.3.字符拼接

$content: "Hello" + "" + "Sass!";
.content:before 
  content: " #{$content} ";
  cursor: e + -resize;

3.4嵌套

3.4.1.除了选择器可以嵌套，属性也可以嵌套

.content
     .div1
        background-color: red;
//属性也可以嵌套，比如border-color属性，可以写成：
.content
     border: 1px solid
             color: red;

3.4.2

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

.content
     &:hover 
             background-color: red;

3.5. 注释

SASS共有两种注释风格。
标准的CSS注释 / * */ ，会保留到编译后的文件。
单行注释 // ，只保留在sass源文件中，编译后被省略。
在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。
3.6 继承
SASS允许一个选择器，继承另一个选择器。需要用到 @extend命令

.content
        border: 1px solid red;
.demo2        
      @extend .content;

3.6.2. 混合宏@Mixin

当你的样式变得越来越复杂，需要重复使用大段的样式时， Sass 中的混合宏就会有重大意义。
.不带参数声明：
其中 @mixin 是用来声明混合宏的关键词，有点类似 CSS 中的 @media、@font-face 一样。border-radius 是混合宏的名称。大括号里面是复用的样式代码。

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

带参数的混合宏：

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

3.6.3调用混合宏

通过 @mixin 关键词声明了一个混合宏，那么在实际调用中，其匹配了一个关键词“@include”来调用声明好的混合宏。

@mixin border-radius
    -webkit-border-radius: 3px;
    border-radius: 3px;

button 
    @include border-radius;

3.6.4混合宏的参数

传一个不带值的参数：

@mixin border-radius($radius)
  -webkit-border-radius: $radius;
  border-radius: $radius;

//在调用的时候可以给这个混合宏传一个参数值：
.box 
  @include border-radius(3px);

传一个带值的参数：

@mixin border-radius($radius:10px)
  -webkit-border-radius: $radius;
  border-radius: $radius;

//在调用的时候可以给这个混合宏传一个参数值：
.box 
  @include border-radius;

传多个参数：
多个参数。在实际调用和其调用其他混合宏是一样的：

@mixin center($width,$height)
  width: $width;
  height: $height;

//调用
.box-center 
  @include center(500px,300px);

3.7占位符%placeholder

通过 @extend 调用的占位符，编译出来的代码会将相同的代码合并在一起。这也是我们希望看到的效果，也让你的代码变得更为干净。

%mt5 
  margin-top: 5px;

%pt5
  padding-top: 5px;

.btn 
  @extend %mt5;
  @extend %pt5;

四.less与sass的区别

1.编译环境不同，Less是基于JavaScript运行,所以Less是在客户端处理。Sass是基于Ruby的，是在服务器端处理的。

2.变量符不一样，Less是@，而Scss是$，而且变量的作用域也不一样。

3.输出设置，Less没有输出设置，Sass提供4中输出选项：nested, compact, compressed 和 expanded。

4.Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。

5.Sass和Less的工具库不同，Sass有工具库Compass, Less有UI组件 Bootstrap