一、SASS(SCSS)

---

一、为什么有出现css预处理器

css不是一种编程语言，仅仅只能用来编写网站样式，随着用户需求增加以及网站技术升级，css一成不变的写法渐渐不能满足于项目。没有类似js这样的编程语言所有的变量，常量以及其他编程语法，css的代码会显得臃肿以及难以维护。于是css预处理器就作为css扩展，出现在前端技术中。

二、css预处理器(Sass/Scss、Less…)是什么？

css预处理器用一种专门的编程语言，进行web页面样式设计，然后再编译成正常的css文件，以供项目使用。

三、Sass和Scss的关系

sass从第三代开始，放弃了缩进式风格，并且完全向上兼容普通的css代码，这一代的sass也被称为scss。

四、配置Sass编译环境

Tips

我们在这里测试学习才会要这样安装配置，一般像vue脚手架都给我们配置好了，我们直接用就可以了。

{
    "liveSassCompile.settings.formats": [
        {
            /*
              :nested - 嵌套格式
              :expanded - 展开格式
              :compact -紧凑格式
              :compressed - 压缩格式
            */
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "~/../css"
        }
    ],
    /*排除目录*/
    "liveSassCompile.settings.excludeList": [
        "/**/node_modules/**",
        "/.vscode/**"
    ],
    /*是否生成对应的map*/
    "liveSassCompile.settings.generateMap": true,
    /*是否添加兼容前缀 例如: -webkit -moze- ....等*/
    "liveSassCompile.settings.autoprefix": [
    
        "> 1%",
        "last 2 versions"
    ],
    "explorer.confirmDelete": false
    
}

五、Sass语法拓展

5.1 先择器嵌套

原始css

.container{
    width: 1200px;
    margin: 0 auto;
}

.container .header{
    height: 90px;
    line-height: 90px;
}

.container .header .logo{
    width: 100px;
    height: 60px;
}

.container .center{
    height: 600px;
    background-color: #F00;
}
.container .footer{
    font-size: 16px;
    text-align: center;
}

使用sass语法嵌套改写

.container{
    width: 1200px;
    margin: 0 auto;
    .header{
        height: 90px;
        line-height: 90px;
        .logo{
            width: 100px;
            height: 60px;
        }
    }
    .center{
        height: 600px;
        background-color: #F00;
    }
    .footer{
        font-size: 16px;
        text-align: center;
    }
}

5.2父类选择器 &

原始css

.container{
    width: 1200px;
    margin: 0 auto;
}

.container a{
    color: #333;
}

.container a:hover{
    text-decoration: underline;
    color: #F00;
}

.container .top{
    border: 1px solid red;
}
.container .top-left{
    float: left;
    width: 200px;
}

使用sass改写

.container{
    width: 1200px;
    margin: 0 auto;
    a{
        color: #333;
        // &代表父
        &:hover{
            text-decoration: underline;
            color: #F00;
        }
    }
    .top{
        border: 1px solid red;
        // &代表父
        &-left{
            float: left;
            width: 200px;
        }
    }
}

5.3 属性嵌套

.container a{
    color: #333;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}

.container {
    a{
        color: #333;
        font: {
            size: 14px;
            family: Arial, Helvetica, sans-serif;
            weight: bold;
        }
    }
}

5.4 占位符选择器

scss

.button%base{
    font-weight: normal;
    text-align: center;
}

.btn-default{
    // 加上这一句就会应用上面的样式
    // 也叫继承样式
    @extend %base;
    color:#333;
}
.haha{
    @extend %base;
    color: pink;
}
.hehe{
    color: greenyellow;
}

sass编译后的css

.button.haha, .button.btn-default {
  font-weight: normal;
  text-align: center;
}

.btn-default {
  color: #333;
}

.haha {
  color: pink;
}

.hehe {
  color: greenyellow;
}/*# sourceMappingURL=css.css.map */

六、sass注释

/* 注释的内容*/ 会显示在源代码中
// 单行注释

七、sass变量

原来在css中定义变量

/* 所有的选择器中都可以使用 */
:root {
    --color: pink;
}

body{
    --border-color: green;
}

/* 只能在header选择器中才能使用 */
.header{
    --background-colr: #f8f8f8;
}

7.1 定义规则

• 变量以美元符号$开头，后面跟变量名
• 变量名是不以数字开头的可包含字母、数字、下划线、横线（连接符）
• 写法同css，即变量名和值之间用冒号分隔
• 变量一定要先定义后使用

连接符与下划线
通过连接符与下划线定义的同名变量为同一变量，建议使用连接符

$font-size:14px
$font_size:16px;
.continer{ font-sze:$font-size; }

7.2 变量值类型

SASS支持6种主要的数据类型

• 数字：1，2， 13， 10px
• 字符串，有引号字符串与无引号字符串，“foo”, ‘bar’, baz
• 颜色，blue, #f8f8f8, rgba(255.0,0,0.5)
• 布尔型：true, false
• 空值：null
• 数组(list),用空格或逗号分隔符, 1.53m 1em 0 2em, Arial, sans-serif
• maps:相当于javascript的object (key1:value1, key2:value2)

八、SASS导入@import

@import
SASS拓展了@import的功能，允许其导入SCSS或SASS文件，被导入的文件将合并编译到同一个css文件中，另外，被导入的文件中所包含的变量或者混合指令(mixin)都可以在导入的文件中使用。
如：
public.scss

$font-base-color:#333;

在index.scss里面使用

@import "public";
$color:#666;
.container{
    border-color:$color;
    color:$font-base-color;
}

如下几种方式，都将作为普通的css语句，不会导入任何sass文件
1、文件拓展名是 css;
2、文件名以http://开头;
3、文件名是url();
4、@import包含media quenes;

@import "public.css;
@import url(public);
@import "http://xxx.xom/xxx;
@import 'landscape' screen and (orientation:landscape);

Tips: 一个模块可以加一个scss比如_user.scss, _shop.scss等。
_public.scss

$base_font_size: pink;

css.scss

@import 'public';
p{
    color: $base_font_size;
}

九、SASS混合指令(Mixin Directives)

混合指令(Mixin)用于定义可重复使用的样式。

定义与使用混合指令@mixin

@mixin mixin-name(){
    /* css声明 */
}

定义

// 定义页面一个区块基本的样式
@mixin block{
    width: 96%;
    margin-left: 2%;
    border-radius: 8px;
    border: 1px solid red;
}

使用

.container{
    .block{
        @include block;
   }
}

十、插值语句

插值，执行时会取其变量的值。

$font-size: 12px;
$line-height: 30px;
p{
    font: #{$font-size}/#{$line-height} Helvetica;
}

十一、SASS为我们提供了很多函数

自己去看文档了