Scss - 基础功能介绍

SASS / SCSS 简介

SASS 是 CSS 的预处理器，它能编译出原生 CSS，且提供了更多程式面的东西来撰写 CSS，让其更简洁、更好维护，而 SASS 分为 SASS 与 SCSS 两种，两者皆称为 SASS，让我们看看差异

sass

使用缩排区隔程式码无法相容原生 CSS档名为 *.sass

.text-primary  color: #007bff

scss

使用大括号区隔程式码可完全相容原生 CSS档名为 *.scss

.text-primary {  color: #007bff;}

另外两者有些语法上的不同，但大部份都是相同的唷~

安装环境

常用的编译方法有三种，分别为以下

编译套件: 透过 Webpack、Gulp 等套件，整合 sass-loader 来编译编译软体: 透过 Prepros 等软体编译编辑器插件: VSCode 的 Live Sass Compiler 等来做编译，设定部分可参考这里

变数

CSS 本来就可以撰写变数，而 SCSS 则让变数的写法更容易，只须在开头加上 $ 即可，变数让我们更好的控管 CSS，遇到需重複使用的数值即可宣告为变数，后续如果客户要修改也只要调整一个变数，便可达到全站修改

编译前

$primary: #007bff;$font-size: 20px;.text-primary {  color: $primary;  font-size: $font-size;}

编译后

.text-primary {  color: #007bff;  font-size: 20px;}

运算

SASS 可以直接使用加、减、乘、除等来做基本的运算，但是单位须特别注意，否则会出错，另外如果两个相同单位相除后，单位会被互相抵消，所以也可以利用此特性做单位的换算

编译前

$font-size: 20px;$lv: 2;.text1 {  font-size: $font-size + 10px;}.text2 {  font-size: $font-size - 4px;}.text3 {  font-size: $font-size * $lv;}.text4 {  font-size: $font-size / $lv;}.text5 {  font-size: (5px/5px)rem;}

编译后

.text1 {  font-size: 30px;}.text2 {  font-size: 16px;}.text3 {  font-size: 40px;}.text4 {  font-size: 10px;}.text5 {  font-size: 1 rem;}

巢状与连接符 ( & )

巢状写法可以让 CSS 更好管理，连接符则替代父选择器，省下了重複撰写的时间，但过于巢状也会导致程式码不好维护，尽量在三层内解决

编译前

$primary: #007bff;$font-size: 20px;.navbar {  color: $primary;  font: {    family: '微软正黑体';    size: $font-size / 2;  }  .logo {    width: 50px;  }  &:hover {    color: #000;  }  &-item {    font-weight: bold;  }}

编译后

.navbar {  color: #007bff;  font-family: '微软正黑体';  font-size: 10px;}.navbar .logo {  width: 50px;}.navbar:hover {  color: #000;}.navbar-item {  font-weight: bold;}

@mixin

@mixin 的写法为在前方先宣告，后面接上名字，参数带入与不带入都行，如要带入参数则使用 ()，撰写样式时用 @include 来载入，此方法可以减少重複撰写程式码

字串内写入变数: 使用 #{...}，并将变数写在里面预设值: 在变数后方加上 :，并写入数值

编译前

@mixin color {  color: blue;}@mixin shape($img, $radius: 10px) {  width: 100px;  height: 100px;  background-image: url('~/assets/images/#{$img}');  border-radius: $radius;}.square {  @include color;  @include shape('hero.png');}.round {  @include color;  @include shape('hero.png', 50px);}

编译后

.square {  color: blue;  width: 100px;  height: 100px;  background-image: url("~/assets/images/hero.png");  border-radius: 10px;}.round {  color: blue;  width: 100px;  height: 100px;  background-image: url("~/assets/images/hero.png");  border-radius: 50px;}

@extend

@extend 会将同样的程式码整合在一起，用法则是在需要增加样式的地方加上 @extend，通常会搭配 % 一起使用，前方加上 % 的样式不会被编译，这样一来样式就会被收集到该位置，但建议将样式放在最上面，以防覆写掉其他样式

编译前

%link-btn {  display: inline-block;  text-decoration: none;}.link-primary {  color: blue;  @extend %link-btn;}.link-secondary {  color: red;  @extend %link-btn;}

编译后

.link-primary, .link-secondary {  display: inline-block;  text-decoration: none;}.link-primary {  color: blue;}.link-secondary {  color: red;}

@mixin 与 @extend 的差异

@mixin 与 @extend 皆可达到减少撰写重複程式码的目的，那怎么选择呢 ?

@mixin: 将样式码写入 class 内，可用变数@extend: 将样式独立出来，不可用变数

基本上 @extend 是将 CSS 集中，所以程式码较少，相反的，@mixin 则是写一次就多产生一次 CSS，所以程式码较多，较简单的分辨方式是，如需使用变数就使用 @mixin，不需要则使用 @extend

@function

我认为 @function 与 @mixin 是有点像的，都是在做运算处理，两者的差异在于 @function 必须使用 @return 来返回结果，且输出的是一个值，并非一段 CSS 样式

编译前

$base-font-size: 16px;$space: 4px;@function font($lv: 0) {  @return ($base-font-size + $space * $lv) / $base-font-size * 1rem;}.h6 {  font-size: font();}.h5 {  font-size: font(1);}.h4 {  font-size: font(2);}

编译后

.h6 {  font-size: 1rem;}.h5 {  font-size: 1.25rem;}.h4 {  font-size: 1.5rem;}

@function 结合 @mixin

@function 有时也会拿来与 @mixin 做结合，并应用在一些字级或是单位的换算，以下做了一个产生对应字级，并且换算 rem 的範例

编译前

$base-font-size: 16px;$space: 4px;@function font($lv) {  @return ($base-font-size + $space * $lv) / $base-font-size * 1rem;}@function line($fontSize) {  @return $fontSize * 1.5;}@mixin baseFont($lv: 0) {  font-size: font($lv);  line-height: line(font($lv));}.h6 {  @include baseFont();}.h5 {  @include baseFont(1);}.h4 {  @include baseFont(2);}

编译后

.h6 {  font-size: 1rem;  line-height: 1.5rem;}.h5 {  font-size: 1.25rem;  line-height: 1.875rem;}.h4 {  font-size: 1.5rem;  line-height: 2.25rem;}

SASS 内建 @function

SASS 内有帮我们写好许多好用的 @function 可直接使用，这边以颜色为例

编译前

.h1 {  // 调暗 20%  color: darken(#007bff, 20%);}.h2 {  // 调亮 20%  color: lighten(#007bff, 20%);}.h3 {  // 互补色  color: complement(#007bff);}.h4 {  // 提高饱和度 20%  color: saturate(#007bff, 20%);}.h5 {  // 降低饱和度 20%  color: desaturate(#007bff, 20%);}

编译后

.h1 {  color: #004a99;}.h2 {  color: #66b0ff;}.h3 {  color: #ff8400;}.h4 {  color: #007bff;}.h5 {  color: #1a7ce6;}

SASS 还有非常多的内建的 @function 可使用，详细可参考官网

@import

import 并不是 SASS 特有的功能，但是 SASS 扩展了此功能，让其可以载入 .sass 与 .scss 档，将 SASS 分为数个档案彙整至一只档案可减少请求数，也方便维护与管理

可以载入 .css 档若没有输入档名，则预设为 .sass 或 .scss 档若档名前加上 _ 则该档案不会被编译编译有顺序性，因此需先载入变数等必要档案

import 档案的顺序各位可以自己思考，这边分享一下小弟的顺序

@import './src/scss/_function';@import './src/scss/_mixin';@import './src/scss/_reset';@import './src/scss/_extend';@import './src/scss/_layout';@import './src/scss/_pages';@import './src/scss/_button';

结语

SASS 熟悉后其实是非常好用的，开发效率也提升了许多，最重要的是客户修改的时候可以省下非常多时间，或许刚开使不习惯，但可以循序渐进，从简单的 变数 或 巢状 开始写，最后再慢慢的用到 @function 与 @mixin，那就开始动手写自己的 SASS 吧!