前端架构师技术之Sass

1 CSS 缺点

CSS 仅仅是一个标记语言,不是编程语言,因此不可以自定义变量,也不可以引用。CSS 主要有以下缺点。

  • CSS 是一门非程序式语言,没有变量、函数、SCOPE(作用域)等概念。
  • CSS 需要书写大量看似没有逻辑的代码,代码冗余度是比较高的。
  • CSS 没有很好的计算能力。
  • 不方便维护及扩展,不利于复用。

2 什么是 Sass

为了解决 CSS 在实际开发过程中存在的问题,我们可以使用 Sass(CSS预处理器) 来实现页面的样式。

  • Sass 是一款成熟、稳定、强大的专业级 CSS 扩展语言。
  • 它是一款强化 CSS 的辅助工具。
  • 在 CSS 语法的基础上增加了变量(variables)、嵌套(nestedrules)、混合(mixins)、导入(inline imports)等高级功能,让 CSS 更加强大与优雅。
  • 使用 Sass 以及 Sass 的样式库(如Compass)有助于更好地组织管理样式文件,以及更高效地开发项目。
  • Sass 完全兼容所有版本的 CSS。

总的来说就是:写更少的代码,实现更多的样式。

3 Sass 编译

  • Sass在线编译工具 使用工具进行编译

  • VScode 下载安装 Easy Sass 插件,进行自动编译

  • VScode 下载安装 Live Sass Compilerv 插件,进行自动编译

// Live Sass 配置
"liveSassCompile.settings.generateMap": false,
"liveSassCompile.settings.autoprefix": [
    "> 1%",
    "last 2 versions"
],
"liveSassCompile.settings.excludeList": [
    "**",
    "**/node_modules/**",
    ".vscode/**"
],
"liveSassCompile.settings.formats": [
    {
        "format": "compressed",
        // "format": "expanded",
        "extensionName": ".min.css",
        "savePath": "~/../css/"
    }
]

4 Sass 基本用法

4.1 Sass 语法格式

  • 一种是最早的 Sass 语法格式,被称为缩进格式(Indented Sass),通常简称“Sass”,是一种简化格式。这种格式以“.sass”作为扩展名。(不再推荐使用)
  • 另一种语法格式是SCSS(SassyCSS),这种格式仅在 CSS3 语法的基础上进行拓展,所有 CSS3 语法在 SCSS 中都是通用的,同时加入 Sass 的特色功能。这种格式以“.scss”作为扩展名。(目前使用)

4.2 Sass 变量

Sass 使用“$”符号来标识变量,如 $highlight-color 和 $sidebar-width。

Sass 变量的声明和 CSS 属性的声明比较相似。

$color: #F90;

任何可以用作 CSS 属性值的赋值都可以用作 Sass 的变量值,甚至是以空格或逗号分割多个属性值。

$basic-border: 1px solid black;
$plain-font: "Myriad Pro", "Myriad", "Helvetica", "Neue", "Helvetica";

在变量定义完成之后,这时变量还没有生效,除非引用这个变量。

凡是 CSS 属性的标准值(如 1px 或者 bold)可存在的地方,变量就可以使用。

CSS生成时,变量会被它们的值所替代。之后,如果需要一个不同的值,只需要改变这个变量的值,那么所有引用此变量的地方生成的值都会随之改变。

$color: #F90;
.selected {
  border: 1px solid $color;
}

特殊变量:如果变量需要镶嵌在字符串之中,就必须需要写在 #{} 之中。

$side: left;
.rounded {
    border-#{$side}-radius: 5px;
}

4.3 Sass 运算

Sass 支持数字的加(+)、减(-)、乘(*)、除(/)和取余(%)等运算,如果必要时会在不同单位间进行值的转换,例如,将 1in + 8pt 转换为 1.111in(pt 全称为 point,是一个自然界的长度单位,1in=72pt。根据此公式 1in+8pt 转换后的结果为 1.111in)。

// 编译前
p {
    width: 1in + 8pt;
}
// 编译后
p {
    width: 1.111in; 
}

“/”符号在 CSS 中通常起到分隔数字的用途,而在 Sass 中同时也赋予了“/”除法运算的功能,但两者并不会冲突。

也就是说,如果“/”在 Sass 中把两个数字分隔,编译后的 CSS 文件中也是同样的作用。

// 编译前
p {
    font: 10px/8px;
    $width: 1000px;
    width: $width/2;
    height: (500px/2); 
    margin-left: 5px + 8px/2px; 
}
// 编译后
p {
    font: 10px/8px;
    width: 500px;
    height: 250px;
    margin-left: 9px; 
}

编译使用了 “/” 运算符号的代码,font 编译后的结果不变,这是因为没有被圆括号包裹。

如果需要使用变量,同时又要确保 “/” 符号不做除法运算而是完整地编译到 CSS 文件中,只需要用 #{} 插值语句将变量包裹。

p {
    $font-size: 12px;
    $line-height: 30px;
    font: #{$font-size}/#{$line-height};
}
  • 正常值用 “/” 运算,需要用圆括号包裹
  • 变量值不用 “/” 运算,需要用 #{} 插值语句将变量包裹

4.4 Sass 嵌套

Sass 基于变量提供了更为强大的工具,即规则嵌套。

只有当 Sass 变量与规则嵌套一起使用时,才能发挥其更大的作用。

在使用 CSS 编写代码时,我们知道重复写选择器是非常烦琐的。

例如,要写一大串指向页面中同一块的样式时,往往需要一遍又一遍地写同一个 ID 或 类名 来实现。

#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #eee }

.box article h1 { color: #333 }
.box article p { margin-bottom: 1.4em }
.box aside { background-color: #eee }

Sass 在编译输出 CSS 时会自动把这些嵌套规则处理好,避免代码的重复书写,且使样式的可读性更高。Sass 可以只写一遍来实现。

#content {
    article {
        h1 { color: #333 }
        p { margin-bottom: 1.4em }
    }
    aside { background-color: #eee }
}
.box {
    article {
        h1 { color: #333 }
        p { margin-bottom: 1.4em }
    }
    aside { background-color: #eee }
}

属性也可以嵌套,比如 border-color 属性,可以写成

// 编译前
.box {
    border: {
        color: red;
    }
}
// 编译后
.box {
    border-color: red;
}

注意:嵌套属性(border)后面必须加上冒号。

在嵌套的代码块内,可以使用 & 引用父元素。比如 :hover 伪类,可以写成

// 编译前
.box {
    &:hover { color: red; }
}
// 编译后
.box:hover {
    color: red;
}

4.4 Sass 注释

Sass 有两种注释风格

  • 单行注释 // 注释 只保留在 Sass 源文件中,不会保留在编译后的文件中。
  • 标准 CSS 注释 /* 注释 */, 会保留到编译后的文件中,压缩则删除。
    • 在标准注释后面加入一个感叹号,/*! 重要注释 */ 表示重要注释,压缩模式也会保留注释,用于版权声明等。

5 代码的重用

5.1 Sass 继承

Sass 中,继承可以让一个选择器继承另一个选择器的所有样式,继承使用 @extend 命令。

// 编译前
.alert{
    padding: 15px;
}

.alert a{
    text-decoration: none;
}

.alert-info{
    @extend .alert;
    background-color: lightblue;
}
// 编译后
.alert, .alert-info {
  padding: 15px;
}

.alert a, .alert-info a {
  text-decoration: none;
}

.alert-info {
  background-color: lightblue;
}

使用占位符选择器 %,从 Sass 3.2.0 后,就可以定义占位选择器 %,这个的优势在于,不调用不会有多余的 CSS 文件。

// 编译前
%h1 {
    font-size:20px;
}
div {
    @extend %h1;
    color:red;
}
// 编译后
div {
    font-size:20px;
    color:red;
}

5.2 混合(Mixin)

Mixin 是可以重用的代码块。

  • 使用 @mixin 命令,定义一个代码块。
  • 使用 @include 命令,调用这个mixin。
@mixin alert {
    color:#ccc;
    background-color:red;
}
div {
    @include alert;
}

Mxin 的强大之处,在于可以指定参数和缺省值,使用的时候,根据需要加入参数。

@mixin alert($color:red) {
    color:#ccc;
    background-color:$color;
}
div {
    @include alert(blue);
}

可以用 Mixin 来生成浏览器前缀。

// 设置关键帧
@mixin keyframes($name) {
    @-webkit-keyframes #{$name} {
        @content;
    }
    @-moz-keyframes #{$name} {
        @content;
    }
    @-o-keyframes #{$name} {
        @content;
    }
    @keyframes #{$name} {
        @content;
    }
}
// 引入
@include keyframes(scale) {
    100% {
        transform: scale(0.8);
    }
}
// css编译后
@-webkit-keyframes scale {
    100% {
        transform: scale(0.8);
    }
}
@-moz-keyframes scale {
    100% {
        transform: scale(0.8);
    }
}
@-o-keyframes scale {
    100% {
        transform: scale(0.8);
    }
}
@keyframes scale {
    100% {
        transform: scale(0.8);
    }
}
@mixin rounded($attr, $value) {
    #{$attr}: $value;
    -moz-#{$attr}: $value;
    -webkit-#{$attr}: $value;
}
#navbar li {
    @include rounded(border-radius, 8px);
}

5.3 颜色函数

Sass 提供了一些内置的颜色函数,以便生成系列颜色。

lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c

5.4 插入文件

使用 @import 命令引入外部文件, 引入后,可使用外部文件中的变量等。

@import "base.scss";

如果插入的是 .css 文件,则等同于 CSS 的 import 命令。

@import "base.css";

6 高级用法

6.1 条件语句

@if 可以用来判断,配套的还有 @else 命令

// Sass样式
$type: monster;
div {
    @if $type == ocean {
        color: blue;
    } @else if $type == matador {
        color: red;
    } @else if $type == monster {
        color: green;
    } @else {
        color: black;
    }
}
// css编译后样式
div {
    color: green;
}

**三目判断:**语法为 if($condition, $if_true, $if_false)

三个参数分别表示:条件,条件为真的值,条件为假的值。

if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px

$box: red;
$fontSize: if($box==red, 16px, 14px);
.box {
    font-size: $fontSize;
}

6.2 循环语句

for 循环,有两种形式,分别为:

  • @for $var from through

  • @for $var from to

$var 表示变量,start 表示开始值,end 表示结束值,两种形式的区别在于 through 包括 end 的值,to 不包括 end 值。

@for $i from 1 to 10 {
    .border-#{$i} {
        border: #{$i}px solid blue;
    }
}

while 循环

$i: 6;
@while $i > 0 {
    .item-#{$i} {
        width: 2em * $i;
    }
    $i: $i - 2;
}

each 命令,作用与 for 类似

  • 语法为 @each $var in

  • 其中 $var 表示变量

@each $member in a, b, c, d {
    .#{$member} {
        background-image: url("/image/#{$member}.jpg");
    }
}

6.3 自定义函数

Sass 允许用户编写自己的函数,以 @function 开始,用 @return 返回值。

// 常规用法
@function double($n) {
    @return $n * 2;
}
#sidebar {
    width: double(5px);
}

// 常用用法
$fontSize: 100px;
@function pxTorem($px) {
    @return $px / $fontSize * 1rem;
}
div {
    font-size: pxTorem(24px);
}
// css编译后样式
div {
    font-size: .24rem;
}

7 练习作业

  • 使用 Sass 语法优化移动端样式表

你可能感兴趣的:(前端技术,前端,sass,rust)