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

【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

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,468评论 5 473
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,620评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,427评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,160评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,197评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,334评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,775评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,444评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,628评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,459评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,508评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,210评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,767评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,850评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,076评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,627评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,196评论 2 341

推荐阅读更多精彩内容