Sass/SCSS 简明入门教程

2021-03-16 11:19:41 浏览数 (1)
代码语言：javascript复制
// 每日前端夜话 第500篇
// 正文共：2000 字
// 预计阅读时间：8 分钟

Sass / SCSS简介

❝Sass 是 CSS3 的扩展，添加了嵌套规则、变量、mixins、选择器继承等。可以用命令行工具或网络框架插件将其转换为格式良好的标准 CSS。 ❞

Sass（Syntactically Awesome StyleSheets） 是 CSS 的一种扩展，是 CSS的 超集（通过编译生成浏览器可以处理传统 CSS）。Sass 的出现是为了解决在大型项目中传统 CSS 会遇到的重复、可维护性差等问题（添加了嵌套的规则、变量、mixins、选择器继承等特性）。让开发者可以编写简洁、富语意（expressive ）、可复用、可维护性和可延展性性佳的 CSS 代码。

Sass 的语法分为新的 SCSS（Sassy CSS，Sass 3，文件名称 *.scss）和旧的 SASS（ Haml 风格，由于不用大括号格式，使用了缩紧，不能直接用 CSS 语法，学习曲线较高等特性，文件名称为*.sass）。由于新的 SCSS 语法是 CSS3 的超集，所以把传统的 CSS3 直接复制过来也不会出错，学习曲线相对比较平缓，所以我们将使用SCSS语法。

SASS 初体验

在开始介绍 SASS 特性之前先来学习如何将 Sass 转译成 CSS。

首先，先按照官网先安装Sass，然后在项目文件夹建立一个 main.scss 文件，文件内容如下：

代码语言：javascript复制
// 引用
@import url(https://fonts.googleapis.com/css?family=Pacifico);
//Add variables here:

h1 {
  font-family: Roboto, sans-serif;
  text-align: center;
}

.banner {
  font-family: 'Pacifico', cursive;
  height: 400px;
  background-image: url("lemonade.jpg");
}

.container {
  text-align: center;
  font-family: 'Pacifico', cursive;
}

在终端下用以下命令进行转译：

代码语言：javascript复制
sass main.scss main.css

这时你就会看到文件夹中多了 main.css 和 main.css.map 两个文件，前者是转译过后的 CSS 文件，大部分是方便使用浏览器调试工具在进行调试时连结原文件和转译文件1⃣️方便调试。

1. 变量：变量可以用来储存值，方便重复利用

在 Sass 中用 $ 来表示变量，变量的数据型态可以是数字、字符串、布尔值、null值、甚至可以使用 List 和 Map。

变量的使用：

代码语言：javascript复制
$translucent-white: rgba(255,255,255,0.3);
p {
	background-color: $translucent-white;
}

List 可以用空格或逗号分隔属性值：

代码语言：javascript复制
$font-style-2: Helvetica, Arial, sans-serif;
$standard-border: 4px solid black;

p {
	border: $standard-border;
}

// maps key:value
$font-style-2: (key1: value1, key2: value2);

2. 嵌套：降低父元素重复性

转译前：

代码语言：javascript复制
.parent {
	color: blue;
	.child {
		font-size: 12px;
	}
}



轉譯後：

转译后：

代码语言：javascript复制
.parent {
	color: blue;
}

.parent .child {
	font-size: 12px;
}
```



在 Nesting 中不僅只有 child selectors 可以使用，還可以使用在相同的 Properties 上：

在Nesting中且只有子选择器可以使用，还可以使用在相同的

代码语言：javascript复制
.parent {
font : {
    family: Roboto, sans-serif;
    size: 12px;
    decoration: none;
  }
}

转译后：

代码语言：javascript复制
.parent {
 font-family: Roboto, sans-serif;
 font-size: 12px;
 font-decoration: none;
}

3. Mixins：减少编写伪元素时的重复

如：::before，:: after，::hover，在 Sass 中使用 ＆ 代表父元素

转译前：

代码语言：javascript复制
.notecard{ 
 &:hover{
     @include transform (rotatey(-180deg));  
 }
}

转译后：

代码语言：javascript复制
.notecard:hover {
 transform: rotatey(-180deg);
}

重用群组的 CSS，例如跨浏览器的前缀，使用 @include 加入群组：

转译前：

代码语言：javascript复制
@mixin backface-visibility {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
}
.notecard {
    .front, .back {
        width: 100%;
        height: 100%;
        position: absolute;
        @include backface_visibility;
    }
}

转译后：

代码语言：javascript复制
.notecard .front, .notecard .back {
    width: 100%;
    height: 100%;
    position: absolute;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
}

@mixin 也可以通过 @include 使用参数，也可以使用默认值：

代码语言：javascript复制
@mixin backface-visibility($visibility:hidden) { //Add an argument
    backface-visibility: $visibility;
    -webkit-backface-visibility: $visibility;
    -moz-backface-visibility: $visibility;
    -ms-backface-visibility: $visibility;
    -o-backface-visibility: $visibility;
}

.front, .back {
 @include backface-visibility(hidden);
}

有时我们也需要处理一些复杂的参数：

代码语言：javascript复制
@mixin stripes($direction, $width-percent, $stripe-color, $stripe-background: #FFF) {
    background: repeating-linear-gradient(
        $direction,
        $stripe-background,
        $stripe-background ($width-percent - 1),
        $stripe-color 1%,
        $stripe-background $width-percent
    );
}

用 Map 传入变量：

代码语言：javascript复制
$college-ruled-style: ( 
    direction: to bottom,
    width-percent: 15%,
    stripe-color: blue,
    stripe-background: white
);

变量用 ... 进行传递：

代码语言：javascript复制
.definition {
    width: 100%;
    height: 100%;
    @include stripes($college-ruled-style...);
}

还有种情况是字符串：

转译前：

代码语言：javascript复制
// 使用 #{$file} 接收
@mixin photo-content($file) {
    content: url(#{$file}.jpg); //string interpolation
    object-fit: cover;
}

.photo { 
    @include photo-content('titanosaur');
    width: 60%;
    margin: 0px auto; 
}

转译后：

代码语言：javascript复制
.photo { 
    content: url(titanosaur.jpg);
    width: 60%;
    margin: 0px auto; 
}
代码语言：javascript复制
更可以搭配 Nesting 使用：

还可以搭配 Nesting ：

代码语言：javascript复制
@mixin hover-color($color) {
    &:hover {
	    color: $color;
    }
 }

 .word {
	@include hover-color(red);
 }

4. 函数

在 Sass 中也可以通过内置函数简单设定颜色、渐变等，例如：adjust-hue（color，degrees），fade-out：

代码语言：javascript复制
$lagoon-blue: fade-out(#62fdca, 0.5);

更多的内建函数可以参考高压博文文档（http://sass-lang.com/documentation/Sass/Script/Functions.html）

5. 操作符：通过加减乘除和求余数等运算符方便的计算所需的属性值

颜色加法：

代码语言：javascript复制
$color: #010203   #040506;
/*
01   04 = 05
02   05 = 07
03   06 = 09
color: #050709;
*/

在使用 / 时需要注意：

代码语言：javascript复制
width: $variable/6; // 除法
line-height: (600px)/9; // 除法
margin-left: 20-10 px/ 2; // 除法
font-size: 10px/8px; //无法计算

也可以使用 @each 语法循环 list 内容：

代码语言：javascript复制
$list: (orange, purple, teal);

@each $item in $list {
    .#{$item} {
      	background: $item;
    }
}

使用 @for 循环，并加入条件判断：

代码语言：javascript复制
@for $i from 1 through $total {
    .ray:nth-child(#{$i}) {
        background: adjust-hue(blue, $i * $step);
        // 
        width: if($i % 2 == 0, 300px, 350px);
        margin-left: if($i % 2 == 0, 0px, 50px);
    }
}

6. @include 引用：用于引入其他 Sass、SCSS 文件：

代码语言：javascript复制
我們通常使用 `Partials` 去處理特定功能，方便管理和維護。以下是引用 `_variables.scss` 檔案範例，其中檔名前的 `_` 表示引用前要先 compile：

我们通常用 Partials 去处理特定功能，方便管理和维护。以下是引用 _variables.scss 文件，其中文件名前的 _ 表示引用前要先编译：

代码语言：javascript复制
@import "variables";

7. @extend ：

编译前：

代码语言：javascript复制
.lemonade {
    border: 1px yellow;
    background-color: #fdd;
}
.strawberry {
    @extend .lemonade;
    border-color: pink;
}

转译后：

代码语言：javascript复制
.lemonade, .strawberry {
    border: 1px yellow;
    background-color: #fdd;
}

.strawberry {
    @extend .lemonade;
    border-color: pink;
}

搭配占位符使用：

转译前：

代码语言：javascript复制
a%drink {
    font-size: 2em;
    background-color: $lemon-yellow;
}

.lemonade {
    @extend %drink;
    //more rules
}

转译后

代码语言：javascript复制
a.lemonade {
  font-size: 2em;
  background-color: $lemon-yellow;
}

.lemonade {
 //more rules
}

8.@mixin 和 @extend 的比较

转译前：

代码语言：javascript复制
@mixin no-variable {
    font-size: 12px;
    color: #FFF;
    opacity: .9;
}

%placeholder {
    font-size: 12px;
    color: #FFF;
    opacity: .9;
}

span {
	@extend %placeholder;
}

div {
	@extend %placeholder;
}

p {
	@include no-variable;
}

h1 {
	@include no-variable;
}

转译后：

代码语言：javascript复制
span, div{
font-size: 12px;
color: #FFF;
opacity: .9;
}

p {
font-size: 12px;
color: #FFF;
opacity: .9;
//rules specific to ps
}

h1 {
font-size: 12px;
color: #FFF;
opacity: .9;
//rules specific to ps
}

9. Sass文件夹结构

代码语言：javascript复制
sass/
    components/
        _buttons.scss
    helpers/
        _variables.scss
        _functions.scss
        _mixins.scss
    layout/
        _grid.scss
        _header.scss
        _footer.scss
    pages/
        _home.scss
        _contact.scss

总结

以上是 Sass/SCSS 简明入门，在这篇文章中我们大致上介绍了 Sass 使用语法。除了 Sass 外上还有很多 CSS 的变形，包括语法比较容易学的 [LESS](http:/ /lesscss.org/#)、具有组件化思想的 CSS in JS，主要解决全局问题和模块引用的 CSS Modules，取经于 JavaScript Task Runner 的 PostCSS，网格样式表单 GSS 等，这些最终都是要解决传统 CSS 不易维护，重用性差的问题。实际上有些人觉得使用预处理器更好维护，也有些人认为进行编译很麻烦，到于要不要用，用哪种类型的 CSS 预处理器，必须要在团队内部进行讨论和规范。

css 编程算法 打包 sass sas

0 人点赞