一、了解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文件中 */
}

SASS的了解与使用相关推荐

sass文件编译的三种方式【舒】
[舒:]sass文件编译的三种方式方式一: 1.webstorm打开evtGulp项目或者mcake-activity项目 2.中,开启gulp->default/develop,启动watc ...
vue 项目配置sass
1.运行npm install node-sass --save-dev npm install sass-loader --save-dev 2.打开build文件夹下面的webpack.base. ...
mysql实现sass_使用sass绘制三角形
用border生成三角形的@mixin: // triangle @mixin triangle($direction, $size, $borderColor ) { content:"& ...
sass的继承，混合宏，占位符的用法总结
SCSS中混合宏使用 @mixin mt($var){ margin-top: $var; }.block { @include mt(5px);span { display:block; @incl ...
Sass函数：Sass Maps的函数-map-has-key($map,$key)
map-has-key($map,$key) 函数将返回一个布尔值.当 $map 中有这个 $key,则函数返回 true,否则返回 false. 前面的示例,当 $key 不在 $map 中时,使用 ...
Sass (Syntactically Awesome StyleSheets)
Sass (Syntactically Awesome StyleSheets) Sass 是对 CSS 的扩展,让 CSS 语言更强大.优雅. 它允许你使用变量.嵌套规则. mixins.导入等众多 ...
前端CSS预处理器Sass
前面的话 "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...
Vue 应用 Sass、Scss、Less 和 Stylus
Vue项目中应用预处理器,可以有效减少css代码量, 推荐使用Sass.Scss.Less预处理器.在创建项目的时候可以选择预处理器 (Sass/Less/Stylus). 如果当时没有选择,内置的 ...
VUE中使用sass
1.安装sass依赖包 (sass-loader依赖于node-sass) npm install --save-dev sass-loader npm install --save-dev node ...
您详细比较三个 CSS 预处理器（框架）：Sass、LESS 和 Stylus
2019独角兽企业重金招聘Python工程师标准>>> CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS ...

SASS的了解与使用