【Sass/SCSS】预加载器中的“轩辕剑”

555 阅读7分钟

「这是我参与11月更文挑战的第8天,活动详情查看:2021最后一次更文挑战」。

【Sass/SCSS】预加载器中的“轩辕剑”

博客说明

文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢!

说明

随着前端技术发展的越来越迅速,前端的样式也需要更加贴近时代的审美,那么CSS就需要承担更多的工作,(强调!这不是煽情!这是宣讲背景。😄),为了给CSS怼上去,预加载器出现了,没错,CSS用上了武器。Sass/SCSS——预加载器中的“轩辕剑”,这也不是我帮它吹,是它自己说的,下图为例。

image-20211117192902380

官网地址:SASS中文网

什么是Sass,它与SCSS是啥关系

感觉这里有点绕,这是怎么回事,明明是SASS,但是很多地方写的是SCSS,网上一搜SCSS出现的全是SaSS的教程。

image-20211117194148922

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

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