Sass / SCSS简明入门

时间 2021-04-02

标签 css html 前端 git 程序员 github web 面试 express segmentfault 栏目 CSS 繁體版

原文原文链接

Sass / SCSS简介

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

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

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

SASS 初体验

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

首先，先按照官网先安装Sass，而后在项目文件夹创建一个 main.scss 文件，文件内容以下：git

// 引用
@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⃣️方便调试。github

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

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

变量的使用：面试

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

List 能够用空格或逗号分隔属性值：express

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

转译前：segmentfault

.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/document...）

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、具备组件化思想的 CSS in JS，主要解决全局问题和模块引用的 CSS Modules，取经于 JavaScript Task Runner 的 PostCSS，网格样式表单 GSS 等，这些最终都是要解决传统 CSS 不易维护，重用性差的问题。实际上有些人以为使用预处理器更好维护，也有些人认为进行编译很麻烦，到于要不要用，用哪一种类型的 CSS 预处理器，必需要在团队内部进行讨论和规范。

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，天天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

更多文章...

Sass / SCSS简明入门

Sass / SCSS简介

SASS 初体验

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

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

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

4. 函数

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

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

7. @extend ：

8.@mixin 和 @extend 的比较

9. Sass文件夹结构

总结

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，天天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

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