Sass/SCSS 简明入门教程

疯狂的技术宅

发布于 2021-03-16 11:19:41

2.5K0

发布于 2021-03-16 11:19:41

// 每日前端夜话 第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 文件，文件内容如下：

// 引用
@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;
}

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

sass main.scss main.css

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

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

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

变量的使用：

$translucent-white: rgba(255,255,255,0.3);
p {
	background-color: $translucent-white;
}

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

$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. 嵌套：降低父元素重复性

转译前：

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



轉譯後：

转译后：

.parent {
	color: blue;
}

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



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

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

.parent {
font : {
    family: Roboto, sans-serif;
    size: 12px;
    decoration: none;
  }
}

转译后：

.parent {
 font-family: Roboto, sans-serif;
 font-size: 12px;
 font-decoration: none;
}

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

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

转译前：

.notecard{ 
 &:hover{
     @include transform (rotatey(-180deg));  
 }
}

转译后：

.notecard:hover {
 transform: rotatey(-180deg);
}

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

转译前：

@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;
    }
}

转译后：

.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 使用参数，也可以使用默认值：

@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);
}

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

@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 传入变量：

$college-ruled-style: ( 
    direction: to bottom,
    width-percent: 15%,
    stripe-color: blue,
    stripe-background: white
);

变量用 ... 进行传递：

.definition {
    width: 100%;
    height: 100%;
    @include stripes($college-ruled-style...);
}

还有种情况是字符串：

转译前：

// 使用 #{$file} 接收
@mixin photo-content($file) {
    content: url(#{$file}.jpg); //string interpolation
    object-fit: cover;
}

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

转译后：

.photo { 
    content: url(titanosaur.jpg);
    width: 60%;
    margin: 0px auto; 
}

更可以搭配 Nesting 使用：

还可以搭配 Nesting ：

@mixin hover-color($color) {
    &:hover {
	    color: $color;
    }
 }

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

4. 函数

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

$lagoon-blue: fade-out(#62fdca, 0.5);

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

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

颜色加法：

$color: #010203 + #040506;
/*
01 + 04 = 05
02 + 05 = 07
03 + 06 = 09
color: #050709;
*/

在使用 / 时需要注意：

width: $variable/6; // 除法
line-height: (600px)/9; // 除法
margin-left: 20-10 px/ 2; // 除法
font-size: 10px/8px; //无法计算

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

$list: (orange, purple, teal);

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

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

@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 文件：

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

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

@import "variables";

7. @extend ：

编译前：

.lemonade {
    border: 1px yellow;
    background-color: #fdd;
}
.strawberry {
    @extend .lemonade;
    border-color: pink;
}

转译后：

.lemonade, .strawberry {
    border: 1px yellow;
    background-color: #fdd;
}

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

搭配占位符使用：

转译前：

a%drink {
    font-size: 2em;
    background-color: $lemon-yellow;
}

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

转译后

a.lemonade {
  font-size: 2em;
  background-color: $lemon-yellow;
}

.lemonade {
 //more rules
}

8.`@mixin` 和 `@extend` 的比较

转译前：

@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;
}

转译后：

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文件夹结构

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 预处理器，必须要在团队内部进行讨论和规范。

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2021-03-15，如有侵权请联系 cloudcommunity@tencent.com 删除

css

本文分享自前端先锋微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度