关于前端:Sass-SCSS简明入门

32次阅读

共计 5924 个字符，预计需要花费 15 分钟才能阅读完成。

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 文件，文件内容如下：

// 援用

//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/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 预处理器，必须要在团队外部进行探讨和标准。

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

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

欢送持续浏览本专栏其它高赞文章：

  • 深刻了解 Shadow DOM v1
  • 一步步教你用 WebVR 实现虚拟现实游戏
  • 13 个帮你进步开发效率的古代 CSS 框架
  • 疾速上手 BootstrapVue
  • JavaScript 引擎是如何工作的？从调用栈到 Promise 你须要晓得的所有
  • WebSocket 实战：在 Node 和 React 之间进行实时通信
  • 对于 Git 的 20 个面试题
  • 深刻解析 Node.js 的 console.log
  • Node.js 到底是什么？
  • 30 分钟用 Node.js 构建一个 API 服务器
  • Javascript 的对象拷贝
  • 程序员 30 岁前月薪达不到 30K，该何去何从
  • 14 个最好的 JavaScript 数据可视化库
  • 8 个给前端的顶级 VS Code 扩大插件
  • Node.js 多线程齐全指南
  • 把 HTML 转成 PDF 的 4 个计划及实现
  • 更多文章 …

正文完
前端
发表至： 前端
2021-04-01
 0
关于前端:答题积分小程序云开发实战数据库篇表设计创建编辑以及导出导入数据
关于前端:腾讯研发出新招从此动画制作就用PAG
关于前端:NutUI-31-正式发布开启多端开发之路
关于前端:Element-Plus-的-elicon-到底怎么用