SASS的了解与使用

一、了解SASS

1、什么是SASS

        Sass 是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。Sass 完全兼容所有版本的 CSS。Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承、内置函数等等特性。Sass 生成良好格式化的 CSS 代码，易于组织和维护。Sass 文件后缀为 .scss。

2、SASS预处理技术

        css不是一种编程语言，仅仅只能用来编写网站祥式，在web初期时，网站的搭建还比较基础，所需要的样式往往也比较简单，但是随着用户需求的增加以及网站技术的升级，css- -成不变的写法也逐渐不再满足于项目,没有类似js这样的编程语言所有的变量、常量以及其他的编程语法，css的代码难免会显得臃肿以及难以维护，但是又没有css的替代品，于是CSS预处理 器就作为css的扩展，出现在了前端技术中。Sass是-款强化CSS的辅助工具，它在CSS语法的基础上增加了变量(variables). 嵌套(nested rules).混合(mixins).导入(inline imports)等高级功能，这些拓展令CSS更加强大与优雅。使用Sass以及Sass的样式库有助于更好地组织管理样式文件，以及更高效地开发项目。

 3、SASS语法格式

        Sass (Syntactically Awesome StyleSheets),可翻译为“语法上很棒的样式表”，它有两种语法格式，首先是SCSS (SassyCSS) --也是本文示例所使用的格式--这种格式仅在 CSS3语法的基础上进行拓展，所有CSS3语法在SCsS中都是通用的，同时加入Sass的特色功能。此外，SCsS 也支持大多数CSS hacks写法以及浏览器前缀写法(vendor-specific syntax),以及早期的IE滤镜写法。这种格式以.sCss作为拓展名。

二、如何使用SASS

        Sass 可以通过以下三种方式使用：作为命令行工具；作为独立的 Ruby 模块 (Ruby module)；或者作为 Rack-enabled 框架的插件，无论哪种方式都需要先安装 Sass gem 

我是通过下载VScode中的插件来使用的

 1、嵌套规则 

//编译前
   div {
        width: 500px;
        height: 300px;

        ul li {
            color: #fff;
            background-color: pink;
        }

    }
//编译后
body div{width:500px;height:300px}body div ul li{color:#fff;background-color:pink}

2、使用部分SASS文件

1、部分SASS文件的引用

//引用SASS文件，引用多个文件中用逗号隔开
@import"_demo","01_demo"

        当通过@import把sass样式分散到多个文件时，你通常只想生成少数几个css文件。那些专门为Qimport命令而编写的sass文件,并不需要生成对应的独立css文件,这样的sass文件称为局部文件。对此，sass有- 个特殊的约定来命名这些文件。
        此约定即，sass 局部文件的文件名以下划线开头。这样，sass 就不会在编译时单独编译这个文件输出css,而只把这个文件用作导入。当你Qimport -个局部文件时，还可以不写文件的全名，即省略文件名开头的下划线。举例来说，你想导入_night-sky . scss这个局部文件里的变量，你只需在样式表中写Qimport "night-sky";。
        局部文件可以被多个不同的文件引用。当- -些样式需要在多个页面甚至多个项目中使用时，这非常有用。在这种情况下，有时需要在你的样式表中对导入的样式稍作修改，sass 有一个功能刚好可以解决这个问题,即默认变量值。

2、默认变量值

        一般情况下， 你反复声明-一个变量,只有最后- -处声明有效且它会覆盖前边的值。举例说明:

$link-color: blue;
$link-color: red;
a{
color: $link-color;
}

        通过@import导入的sass库文件,你可能希望导入者可以定制修改sass库文件中的某些值。使用sass的!default标签可以实现这个目的。它很像css属性中! important标签的对立面，不同的是!default用于变量,含义是:如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。

$fancybox -width: 400px !default;
。fancybox {
width: $fancybox - width;
}

3、静默注释

        sass 另外提供了一种不同于 css 标准注释格式 /*... */ 的注释语法，即静默注释，其内容不会出现在生成的 css 文件中。 静默注释的语法跟 JavaScriptJava 等类 C 的语言中单行注释的语法相同，它们以 // 开头，注释内容直到行末。

body {
   color: #333; // 这种注释内容不会出现在生成的css文件中
   padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}