关于前端:SassSCSS预加载器中的轩辕剑

【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 sass

Sass 变量

变量是一个比拟大的扭转，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

公众号 - 归子莫，小程序 - 小归博客