Sass知识点概括

首次 2024-12-28 01:38:35 更新 2024-12-28 01:38:35 CSS预处理器 Sass 0 评论字数统计: 4.1k(字) 阅读时长: 16(分)

Sass知识点梳理

概念

Sass (英文全称：Syntactically Awesome Stylesheets) 是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。

Sass 是一个 CSS 预处理器，可以帮助我们减少 CSS 重复的代码，节省开发时间。

Sass 完全兼容所有版本的 CSS；扩展了 CSS3，增加了规则、变量、混入、选择器、继承、内置函数等等特性。

Sass 生成良好格式化的 CSS 代码，易于组织和维护；文件后缀为 .scss。

Sass 定义变量使用 $ 符号，引用外部文件使用 @include 。

作用

CSS 本身语法不够强大，导致重复编写一些代码，无法实现复用，而且代码也不方便维护。

Sass 引入合理的样式复用机制，增加了规则、变量、混入、选择器、继承、内置函数等特性。

对于重复使用的 CSS 样式就可以在头部设置为一个单独的变量，方便了后期的修改和管理。

使用方法

上面已经知道了 Sass 是什么了，以及它的作用，那我们如何使用呢？

首先咱们的浏览器并不支持 Sass 代码。

所以，我们就需要自己使用 Sass 预处理器来先将 Sass 代码转换为 CSS 代码。

并且要将页面中链接的地址改成，刚刚转换为 CSS 代码的这个地址。

安装 Sass

使用 npm 来全局安装：npm install -g sass

查看版本

使用：sass --version

转换规则

先创建一个后缀名为 .scss 的文件。后面的 xxx 是我们取的文件名！
使用 sass xxx.scss 就可以将文件转换为 CSS 代码，但是它并不会创建 .css 文件，只是在终端输出了转换的 CSS 代码。
我们也可以指定文件，使用 sass xxx.scss xxx.css ，将转换的代码放到指定的 xxx.css 文件中了，可以自动创建 .css 文件。
上面的方法每次修改了 sass 文件，就需要手动重新调用，如果想执行一次之后每次修改文件后自动进行编译，那我们可以在调用后面添加一个 -w：sass xxx.scss xxx.css -w，这样就可以修改后自动编译了。

注释

Sass 中有两种注释方式：// 和 /**/

其中 // 为单行注释，也叫静默注释，其内容不会出现在 CSS 文件中。

/* ... */ 为多行注释，也叫标准注释格式，它里面的注释内容可以编译到 css 文件中去。

并且当注释出现在原生 css 不允许的地方时，Sass 会将这些注释抹掉。

我们还可以定义变量，以插值语句的形式写进多行注释中来输出变量值。

变量

变量用于存储一些信息，它们可以被重复使用。

Sass 变量可以存储以下信息 (数据类型)：

字符串：有或无引号字符串，比如：”foo”, ‘bar’, baz
数字：1, 2, 13, 10px
颜色值：blue, #04a3f9, rgba(255,0,0,0.5)
布尔值：true, false
**数组(list)**：用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
空值：null
maps：相当于 JavaScript 的 object，(key1: value1, key2: value2)

Sass 变量使用 $ 符号：$名称: 值。

名字可以使用连接符连接，不过在 Sass 中的 -与_是相同的，也就是 @mixin xxx-yyy {...} 与 @mixin xxx_yyy {...} 是一样的。

Sass 中也有全局和局部作用域之分，在文件头部 (最外层)设置的变量就是全局变量，而在一个样式中设置的变量则是局部变量。

我们如果想在其他样式中也用那个变量，就给局部变量加上 !global 关键字来将其修改为全局变量。

不过，我们通常将所有的全局变量定义在同一个文件，如：_globals.scss，然后我们使用 @include 来包含该文件。

注意：当我们使用 #{} 时，有引号的字符串会被编译为无引号的字符串，这样便于在混入(mixin) 中引用选择器名。

/* 1_Sass.scss 文件 */
/* 全局作用域 */
$myColor: red;
$fontSize: 14px;
$fontFamily: Helvetica,sans-serif;
$myWidth: 200px;
$myHeight: 200px;
$myBorder: 1px solid $myColor;

div {
    /* 局部作用域 */
    $myColor: pink;
  	/* 全局作用域 */
  	/* $myColor: pink !global; */
    width: $myWidth;
    height: $myHeight;
    border: $myBorder;
    background-color: $myColor;
}

body {
    background-color: $myColor;
}

/* 1_Sass.css 文件*/
div {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  background-color: pink;
}

body {
  /* 局部作用域 */	
  background-color: red;
  /* 全局作用域 */
  /* background-color: pink; */
}

运算

所有数据类型均支持 == 、 !=，此外，每种数据类型也有其各自支持的运算方式。

数字运算

Sass 支持数字的加减乘除、取整等运算 (+, -, *, /, %)，会根据情况会在不同的单位间进行转换。

/* Sass 文件*/
p {
  width: 1pt + 1px;
}

/* CSS 文件*/
p {
  width: 1.75pt;
}

关系运算 (<, >, <=, >=) 也可用于数字运算，相等运算 (==, !=) 可用于所有数据类型。

除法运算

以下三种情况 / 将被视为除法运算符号：

如果值或值的一部分，是变量或者是函数的返回值。
如果值被圆括号包裹。
如果值是算数表达式的一部分。

也就是写上：数字 / 数字这种情况没用。不能是单纯的数字，而是需要通过某些操作转化为数字才行。

/* Sass 文件 */
p {
  font: 10px/8px; /* CSS */
  $width: 1000px;
  width: $width/2;  /* 变量 */
  width: round(1.5)/2; /* function */
  height: (500px/2);  /* () */
  margin-left: 5px + 8px/2px;  /* + 算数表达式  */
}

/* CSS 文件 */
p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px;
}

如果需要使用变量，同时又不想 / 做除法运算而是完整地编译到 CSS 文件中，则使用 #{} 插值语句将变量包裹。

/* Sass 文件 */
p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size} / #{$line-height};
}

/* CSS 文件 */
p {
  font: 12px/30px;
}

颜色值运算

颜色值的运算是分段计算进行的，也就是分别计算红色，绿色，以及蓝色的值。

!default

使用sass的!default标签可以让其他通过@import导入 sass 库文件的使用者去自定义修改 sass 库文件中的某些值。

!default用于变量。

含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。

$myWidth: 400px !default;
div {
	width: $myWidth;
}

嵌套规则与属性嵌套

Sass 嵌套 CSS 选择器类似于 HTML 的嵌套规则。

也就是允许将一套 CSS 样式嵌套进另一套样式中，将外层的选择器作为自身的父选择器。

嵌套功能避免了重复输入父选择器，而且令复杂的 CSS 结构更易于管理。

在一个大盒子里面包含的其他标签可以在 Sass 中进行选择器嵌套，而有些 CSS 属性可以进行属性嵌套。

就比如有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中。

如：font-xxx，text-xxx等。

这里是：最外层为 nav，nav 里面有一个无序列表 ul，ul中有 li，li中又有链接 a，还对 font 属性进行了拆分嵌套操作。

/* 2_嵌套.scss 文件 */
nav {
    width: 1200px;
    height: 30px;

    /* 选择器嵌套 */
    ul {
        list-style: none;
    }

    /* 选择器嵌套 */
    li {
        margin-left: 5px;
        float: left;
        height: 10px;

        /* 选择器嵌套 */
        a {
            padding: 0 5px;

            /* 属性嵌套 -- 有前缀的 CSS 属性 font-xxx */
            font: {
                family: Helvetica, sans-serif;
                weight: bold;
                size: 14px;
            }

            /* 属性嵌套 -- 有前缀的 CSS 属性 text-xxx */
            text: {
                align: center;
            }
        }
    }
}

/* 2_嵌套.css 文件 */
nav {
  width: 1200px;
  height: 30px;
}

nav ul {
  list-style: none;
}

nav li {
  margin-left: 5px;
  float: left;
  height: 10px;
}

nav li a {
  padding: 0 5px;
  font-family: Helvetica, sans-serif;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
}

并且命名空间也可以拥有自己的属性值。

/* Sass 文件 */
div {
    font: 20px/24px {
        family: Helvetica, sans-serif;
        weight: bold;
    }
}

/* CSS 文件 */
div {
    font: 20px/24px;
    font-family: Helvetica, sans-serif;
    font-weight: bold;
}

父选择器 &

当我们在嵌套 CSS 时，有时也需要直接使用嵌套外层的父选择器。

也就是遇到伪元素或者伪类选择器的时候，不想以后代选择器的方式连接，那么这时候就可以使用 & 来连接。

必须将 & 放在最前面，作为选择器的第一个字符，在其之后跟随需要生成复合的其它选择器。

在编译后的 CSS 文件中 & 会被替换成在嵌套外一层的父选择器。

如果是多层次的嵌套，那么会将最外层的父选择器一层一层向下传递。

/* sass 文件 */
div {
	padding: 5px;
	width: 200px;
	height: 200px;
	background-color: yellow;
	
	&:hover {
		background-color: pink;
	}
}

/* css 文件 */
div {
    padding: 5px;
    width: 200px;
    height: 200px;
    background-color: yellow;
}

div:hover {
    background-color: pink;
}

并集选择器的嵌套

css的写法会让你在并集选择器中的每一个选择器前都重复一遍容器元素的选择器。

比如：.container h1, .container h2, .container h3 { ... }

而 sass的嵌套特性也是支持这种场景的。

当sass解开一个并集选择器内嵌时，它会把每一个内嵌选择器都正确地解析出来。

/* sass 文件*/ 
.container {
    h1,
    h2,
    h3 {
        margin-bottom: .8em
    }
}

/* css 文件 */
.container h1,
.container h2,
.container h3 {
  margin-bottom: margin: 5px;
}

>、+和~ 选择器：

在 CSS 中 >、+ 和 ~ 分别叫：相邻后代选择器、相邻兄弟选择器和全部兄弟选择器。
但在 Sass 中，它们分别叫：子组合选择器、同层选择器和同层全体组合选择器。

这三个选择器必须和其他选择器配合使用，以指定浏览器仅选择某种特定上下文中的元素。

我们可以使用子组合选择器 > 选择一个元素的直接子元素。

也可以用同层选择器 + 和同层全体组合选择器 ~ ，分别选择一个元素紧跟着的兄弟元素，或者选择所有跟在那个元素后面的同层元素，不管它们之间隔了多少其他元素。

/* sass 文件 */
article {
  /* 同层全体组合选择器 */
  ~ article { border-top: 1px dashed #ccc }
  /* 子组合选择器 */
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  /* 同层选择器 */  
  nav + & { margin-top: 0 }
}

/* css 文件 */
article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }

@import 与 Partials

@import

Sass 可以帮助我们减少 CSS 重复的代码，节省开发时间。

我们可以像 CSS 那样为不同的属性创建不同的代码文件，如：变量定义的文件、颜色相关的文件、字体相关的文件等。

然后利用 @import 将这些文件导入到需要使用的文件中。

可以全局导入，也可以局部导入。

语法：@import "文件名";

这里的文件名可以是 CSS 文件，也可以是 Sass 文件，Sass 文件可以不加后缀名，因为它会自动添加上去，不过 CSS 文件还是要自己添加上后缀名哈。

注意：这里的 @import 只是将文件包含在 CSS 中，不需要额外的 HTTP 请求；不像 CSS中的那样：在每次调用时，都会创建一个额外的 HTTP 请求。

Partials

如果我们不希望将 Sass 文件编译成 CSS 文件，那么就可以在命名文件名的时候，在文件名的开头处添加上一个下划线 。

但是，在使用 @import 导入文件时，我们不需要添加下划线。

语法：_文件名

注意：不能将带下划线与没有带下划线的同名文件放置在 同一目录 下，不然带下划线的文件将会被忽略，这样就白设置了。

/* 3_import.scss 文件 */
@import "2_嵌套";
@import "1_Sass";


/* 3_import.css 文件 */
/* 就是将 2_嵌套.scss 和 1_Sass.scss 里面的代码全部导入到一个文件中了*/
@charset "UTF-8";

nav {
  width: 1200px;
  height: 30px;
}

nav ul {
  list-style: none;
}

nav li {
  margin-left: 5px;
  float: left;
  height: 10px;
}

nav li a {
  padding: 0 5px;
  font-family: Helvetica, sans-serif;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
}

div {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  background-color: pink;
}

body {
  background-color: red;
}

@mixin 与 @include

@mixin 指令允许我们定义一个可以在整个样式表中 重复使用的样式。

@include 指令可以 将混入 （mixin） 引入到文档 中。

并且在混入中也可以包含混入，也可以给混入传递参数和默认的参数。

在进行兼容浏览器时，浏览器前缀使用混入也是非常方便的。

那么我们如何去判断一组属性是否应该组合成一个混合器呢？

可以给这个混合器取一个浅显的、好的名字。如果你能找到一个很好的短名字来描述这些属性修饰的样式，比如rounded-corners、fancy-font或者no-bullets，那么往往能够构造一个合适的混合器。如果你找不到，这时候构造一个混合器可能并不合适。

定义 mixin

混入(mixin)通过 @mixin 指令来定义。

语法：@mixin 名字 { ... }

/* 定义混入(mixin) */
@mixin txt-style {
    text-align: center;
    text-decoration: none;
    color: pink;
}

使用 mixin

@include 指令可用于包含混入。

语法：选择器 { @include 混入的名字; }

div {
    width: 200px;
    height: 200px;
    background-color: yellow;

    a {
        font-size: 14px;
        /* 导入混入(mixin) */
        @include txt-style;
    }
}

/* css文件 */
div {
  width: 200px;
  height: 200px;
  background-color: yellow;
}
div a {
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  color: pink;
}

在混入中包含混入

@mixin special-text {
  @include important-text;
  @include link;
  @include special-border;
}

给混入传入参数

注意：如果我们需要在混入(mixin) 中引用 选择器名，那么需要使用 #{} ，来将有引号的字符串编译为无引号的字符串，不然会报错。

固定参数

/* 混入接收两个参数 */
@mixin myBorder($width, $color) {
    border: $width solid $color;
}

div {
    /* 调用混入，并传参 */
    @include myBorder(1px, pink);
}

ul {
    /* 调用混入，并传参 */
    @include myBorder(2px, black);
}

/* css文件 */
div {
  border: 1px solid pink;
}

ul {
  border: 2px solid black;
}

含有默认参数

/* $color:yellow 的默认参数为黄色 */
@mixin myBorder($width, $color:yellow) {
    border: $width solid $color;
}

div {
    /* 调用混入，并传参 */
    @include myBorder(1px);
}

ul {
    /* 调用混入，并传参 */
    @include myBorder(2px, black);
}

/* css文件 */
div {
  border: 1px solid yellow;
}

ul {
  border: 2px solid black;
}

可变参数

当我们不能确定一个混入（mixin）或者一个函数（function）使用多少个参数，这时我们就可以使用参数变量 … 声明 (写在参数的最后方）告诉 Sass 将这些参数视为值列表处理。

/* 可变参数 */
@mixin box-shadow($shadows...) {
  	/* 兼容其他浏览器 */
    -moz-box-shadow: $shadows;
    -webkit-box-shadow: $shadows;
    box-shadow: $shadows;
}

div {
    @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

/* css文件 */
div {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

参数变量也可以用在引用混合指令的时候 (@include)，与平时用法一样，将一串值列表中的值逐条作为参数引用。

/* Sass 文件 */
@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}
$values: #ff0000, #00ff00, #0000ff;
div {
  @include colors($values...);
}

/* CSS 文件 */
div {
  color: #ff0000;
  background-color: #00ff00;
  border-color: #0000ff;
}

@extend 与继承

@extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。

如果一个样式与另外一个样式几乎相同，只有少量的区别，则使用 @extend 就显得很有用。

@extend 很好的体现了代码的复用。

/* extend.scss 文件 */
div {
    margin: 5px;
    width: 200px;
    height: 200px;
    background-color: red
}

.div1 {
    @extend div;
    background-color: pink;
}

.div2 {
    @extend div;
    background-color: yellow;
    cursor: pointer;
}

/* extend.css 文件*/
div, .div2, .div1 {
  margin: 5px;
  width: 200px;
  height: 200px;
  background-color: red;
}

.div1 {
  background-color: pink;
}

.div2 {
  background-color: yellow;
  cursor: pointer;
}

本文作者： 冉星

本文链接： http://ran-up.github.io/2024/12/28/CSS预处理器/Sass知识点概括/

版权声明： 本博客所有文章除特别声明外，均采用 CC BY 4.0 CN协议许可协议。转载请注明出处！

冉星 Web Developer，rising star

个人简介：脆弱的种子在温室也会死亡，坚强的种子，在沙漠也能发芽。