Scss 基本使用（变量、嵌套）

2024-04-23 11:02| 来源: 网络整理| 查看: 265

「这是我参与11月更文挑战的第29天，活动详情查看：2021最后一次更文挑战」

1. Scss

Sass (Syntactically Awesome Stylesheets) 是一种动态样式语言，Sass 语法属于缩排语法，比 css 比多出好些功能 (如：变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。

Sass 的缩排语法，对于写惯 css 前端的 web 开发者来说很不直观，也不能将 css 代码加入到 Sass 里面。因此对 Sass 语法进行了改良，Sass3 就变成了 Scss(Sassy CSS)。SCSS(Sassy CSS) 是 CSS 语法的扩展。这意味着每一个有效的 CSS 也是一个有效的 SCSS 语句，与原来的语法兼容，只是用 {} 取代了原来的缩进。

传送门：Sass中文网

2. 变量

Sass 变量使用 $ 符号；

Sass 变量可以存储以下信息：字符串、数字、颜色值、布尔值、列表、null 值；

$sysColor: red; $sysFontSize: 20px; $side : left; .wrap{ color: $sysColor; font-size: $sysFontSize; // 如果变量需要镶嵌在字符串之中，就必须需要写在 #{} 之中 border-#{$side}: 1px solid pink; } 作用域

变量的作用域只能在当前的层级上有效果。

如下所示 contanier2 的样式为它内部定义的 green，contanier1 标签则是为 red。

$sysColor: red; .contanier1{ color: $sysColor; } .contanier2{ $sysColor: green; // 只在 contanier2 里头有用，局部作用域 color: $sysColor; }

在这里插入图片描述

!global

Scss 中我们可以使用 !global 关键词来设置变量是全局的。

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

$sysColor: red; .contanier2{ $sysColor: green !global; color: $sysColor; } .contanier1{ color: $sysColor; }

在这里插入图片描述

计算功能

支持数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值。

$sysWidth: 100px; .contanier1{ margin: (14px / 2); width: $sysWidth * 2; height: 100px + 50px; }

除法运算（ / ）

/ 在 CSS 中通常起到分隔数字的用途，SassScript 作为 CSS 语言的拓展当然也支持这个功能，同时也赋予了 / 除法运算的功能。也就是说，如果 / 在 SassScript 中把两个数字分隔，编译后的 CSS 文件中也是同样的作用。

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

如果值或值的一部分，是变量或者函数的返回值；如果值被圆括号包裹；如果值是算数表达式的一部分； p { font: 10px/8px; // Plain CSS, no division $width: 1000px; width: $width/2; // Uses a variable, does division height: (500px/2); // Uses parentheses, does division margin-left: 5px + 8px/2px; // Uses +, does division }

编译为

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

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

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

编译为

p { font: 12px/30px; } 3. 嵌套

Scss 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器。

$sysWidth: 100px; .wrap{ .contanier1{ width: $sysWidth * 2; height: 100px + 50px; } }

很多 CSS 属性都有同样的前缀，如：font-family, font-size 和 font-weight ，text-align, text-transform 和 text-overflow。

在 Scss 中，可以使用嵌套属性来编写它们：

注意： font、 border 后面必须加上冒号。

.contanier1{ font: { size: 25px; weight: bold; } border: { width: 1px; style: solid; color: red; }; }

在这里插入图片描述

在嵌套的代码块内，可以使用 & 引用父元素。

.contanier1{ font: { size: 25px; weight: bold; } &:hover{ color: green; } } 4. 注释

Scss 共有两种注释风格。

标准的 CSS 注释 /* comment */ ，会保留到编译后的文件。单行注释 // comment，只保留在 scss 源文件中，编译后被省略。在 /* 后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。 /*! 　重要注释！ */

【本文地址】

公司简介

联系我们