【Sass/SCSS】预加载器中的“轩辕剑”
博客阐明
文章所波及的材料来自互联网整顿和集体总结，意在于集体学习和教训汇总，如有什么中央侵权，请分割自己删除，谢谢！
阐明
随着前端技术倒退的越来越迅速，前端的款式也须要更加贴近时代的审美，那么CSS就须要承当更多的工作，（强调！这不是煽情！这是宣讲背景。😄），为了给CSS怼下来，预加载器呈现了，没错，CSS用上了武器。Sass/SCSS——预加载器中的“轩辕剑”，这也不是我帮它吹，是它本人说的，下图为例。
官网地址：SASS中文网
什么是Sass，它与SCSS是啥关系
感觉这里有点绕，这是怎么回事，明明是SASS，然而很多中央写的是SCSS，网上一搜SCSS呈现的全是SaSS的教程。
Sass (Syntactically Awesome StyleSheets)：
- 是由buby语言编写的一款css预处理语言，有严格的缩进格调。
-
和css编写标准有着很大的出入，是不应用花括号和分号的，这点让很多前端pym很难承受。
Sass 是一款强化 CSS 的辅助工具，是对 CSS 的扩大，它在 CSS 语法的根底上减少了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、继承(extend)、导入 (inline imports) 等高级性能，这些拓展令 CSS 更加弱小与优雅。应用 Sass 以及 Sass 的款式库（如 Compass）有助于更好地组织治理款式文件，以及更高效地开发我的项目， 其后缀是.sass。
长处：应用 “缩进” 代替 “花括号” 示意属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性，很多人认为这样做比 SCSS 更容易浏览，书写也更疾速。
SCSS (Sassy CSS)：
一款css预处理语言，SCSS 是 Sass 3 引入新的语法，其语法齐全兼容 CSS3，并且继承了 Sass 的弱小性能。也就是说，任何规范的 CSS3 样式表都是具备雷同语义的无效的 SCSS 文件。SCSS 须要应用分号和花括号而不是换行和缩进。SCSS 对空白符号不敏感，其实就和css3语法一样，其后缀名是别离为 .scss。
此外，SCSS 也反对大多数 CSS hacks 写法以及浏览器前缀写法 (vendor-specific syntax)，以及晚期的 IE 滤镜写法。
装置Sass
能够应用 npm来装置 Sass。
npm install -g sassSass变量
变量是一个比拟大的扭转，Sass 变量能够存储字符串、数字、色彩值、布尔值、列表、null 值
Sass 变量应用 $ 符号
语法
$variablename: value;示例
$base-font: Helvetica, sans-serif;
$my-color: red;
$my-font-size: 18px;
body {
font-family: $base-font;
font-size: $my-color;
color: $y-font-size;
}转换为CSS代码
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}其实就是把变量的应用间接放入对应的值内。
变量的作用域
Sass的变量其实是有作用域的，Sass 变量的作用域只能在以后的层级上有成果
$myColor: red;
h1 {
$myColor: green; // 只在 h1 外头有用，部分作用域
color: $myColor; // green
}
p {
color: $myColor; // red
}晋升全局变量
Sass 中能够应用 !global关键词来设置变量是全局的
$myColor: red;
h1 {
$myColor: green !global; // 全局作用域
color: $myColor; // green
}
p {
color: $myColor; // green
}对于Sass全局变量，能够用一个文件来存储，而后其余文件
@include来蕴含该文件，这样让代码构造清晰，批改也比拟不便。
Sass的嵌套规定
这个是不便咱们书写的好货色，也是最不言而喻的新增。
嵌套
看看代码的区别就理解了
scss代码
nav {
ul {
margin: 0;
padding: 20px;
}
li {
color: #FFFFFF;
}
}css代码
nav ul {
margin: 0;
padding: 0;
}
nav li {
color: #FFFFFF;
}发现上面的这种写法比拟麻烦，次要是对层级体现的不太显著。
嵌套属性
在sass中局部属性也是能够嵌套的。
CSS 属性中有一些有同样的前缀，例如：font-family, font-size 和 font-weight ， text-align, text-transform 和 text-overflow。这些公共的属性就能够抽离进去。
// scss
font: {
family: Helvetica, sans-serif;
size: 18px;
weight: bold;
}
// css
font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;导入文件@import
在组件化开发的年代，Sass当然也要卷起来，利用@import能够让咱们缩小 CSS 反复的代码，节俭开发工夫。
语法
@import filename;与CSS@import的区别
CSS @import 指令在每次调用时，都会创立一个额定的 HTTP 申请。
Sass @import 指令将文件蕴含在 CSS 中，不须要额定的 HTTP 申请。
下划线underscore格调命名
Sass的下划线宰割命名，我置信各位pym看了他人开源的代码也会发现很多吧，相似_partial.scss、_colors.scss ，然而这种命名绝不是闲的蛋疼，恰好是利用了Sass @import 导入文件的劣势，让导入的文件不被编译成CSS。这种格调也叫Sass Partials。
留神：请不要将带下划线与不带下划线的同名文件搁置在同一个目录下，比方，_colors.scss 和 colors.scss 不能同时存在于同一个目录下，否则带下划线的文件将会被疏忽。
混合@mixin
用来分组那些须要在页面中复用的CSS申明，能够通过向Mixin传递变量参数来让代码更加灵便，该个性在增加浏览器兼容性前缀的时候十分有用。
示例
@mixin important-text {
color: red;
font-size: 24px;
font-weight: bold;
}感觉没啥高大上的啊，是的，其实就是定一个代码块，让别的代码来复用的，你能够把它当成一个公共办法。
@include 应用混入
.text {
@include important-text;
}留神：Sass 的连贯符号 – 与下划线符号 _ 是雷同的，也就是 @mixin important-text { } 与 @mixin important_text { } 是一样的混入。
混入蕴含混入
@mixin special-text {
@include important-text;
@include important-color;
}混入传参数
混入能够接管参数。
@mixin bordered($color, $width) {
border: $width solid $color;
}
.my-text {
@include bordered(blue, 1px); // 调用混入，并传递两个参数，计算边框
}这样一看不是更像办法了吗
混入可变参数
有时并不能确定一个混入到底要传入多少参数，能够应用...。
@mixin box-shadow($shadows...) {
-moz-box-shadow: $shadows;
-webkit-box-shadow: $shadows;
box-shadow: $shadows;
}
.shadows {
@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}浏览器前缀应用混入
浏览器前缀应用混入也是十分不便的
@mixin transform($property) {
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
}
.myBox {
@include transform(rotate(20deg));
}像相似的浏览器前缀几乎是必需品！
@extend 与 继承
在HTML 中咱们一个标签是不是这样写的 class=”button-basic button-report”，有的可能有很多个，那就更长了。能够利用@extend 让代码失去复用。
语法
@extend 指令通知 Sass 一个选择器的款式从另一选择器继承。
应用环境
如果一个款式与另外一个款式简直雷同，只有大量的区别，则应用 @extend 。
示例
.button-basic {
border: none;
padding: 15px 30px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.button-report {
@extend .button-basic;
background-color: red;
}
.button-submit {
@extend .button-basic;
background-color: green;
color: white;
}代码解析
像.button-report须要用到.button-basic的根本属性，就能够间接应用@extend .button-basic来获取，这样代码的复用性就有了比拟大的进步，而且结构性也会越来愈好，隔壁好敌人HTML也不必天天吃“烤串”了哈😂。
写在最初的话
首先心愿我的CSS写的越来越好，其次，心愿看到的pym也和我一样，CSS写的越来越好。毕竟Sass可是“轩辕剑”（Less出双倍吗？）
感激
万能的网络
以及勤奋的本人，集体博客，GitHub测试，GitHub
公众号-归子莫，小程序-小归博客
发表回复