SASS 学习笔记

SASS 学习笔记

总共会写两个练手项目，成品在 https://goldenaarcher.com/scss-study 可以看到，代码在 https://github.com/GoldenaArcher/scss-study。

什么是 SASS

SASS 是 CSS 预处理，它提供了变量（虽然现在 CSS 也提供了，不过 SASS 的更加灵活），嵌套、mixin、函数、导入和扩展等功能，可以高效地做到代码复用。SASS 包括 SASS 和 SCSS，二者都支持嵌套、mixin 和变量，主要的区别在：

  • 语法

    SCSS 的语法更加贴近 CSS，而 SASS 不适用 {} 和 ;，并且依赖缩进定义结构（有点类似 python 的写法）

    因此 SASS 的排版必然是更加简洁和美观的，相对而言刚从 CSS 转到 SASS 也有可能会不太适应

  • 兼容性

    SCSS 更加接近 CSS 的语法，因此兼容性相对更好一些，比较适合作为 CSS 到 SASS 的过渡。当然，对于不是非常复杂的项目，使用 SCSS 本身也够了

    SASS 的支持相对更强一些，不过因为兼容性和语法的问题，流行度相对低一些

  • 学习曲线

    SASS 比 SCSS 高

这篇笔记主要学习的是 SCSS 为主。

基础

配置

SASS 作为 CSS 的预处理，无法直接在浏览器中运行，因此需要下载对应的包将写好的 SASS 转化为 CSS，使得浏览器可以解析。

编译的方式有通过编辑器，或者是使用 node 依赖完成，这里使用后者，方式为下载 sass，并且在 package.json 中添加一下代码：

{"scripts": {"watch": "sass scss/:css/ -w"}
}

这样 sass 会将 scss 文件夹下的内容编译后保存到 css 文件夹下，-w 的 flag 代表监听状态，他会监听 scss 文件夹下的变化，并且重新进行编译。

项目整体结构大概如下：

在这里插入图片描述

除了 sass 之外，还有比较臭名昭著的 node-sass，虽然 node-sass 还是在维护的，并且目前也支持到 node20，而且常规的 SCSS 功能都能实现完成编译，不过 node-sass 的兼容性真的很有问题……反正我本人在 Windows 上尝试运行 node-sass 的时候碰到很多问题。

另一个 SASS 的配置方法在 sass 简易配置 里有 cv，那个用的包比较多，具体干什么的还没怎么看，不过想要比较完整的项目配置，可以看看这个。

变量

scss 的变量以 $ 开始，我是觉得目前 CSS 对变量的支持也挺好的，不过考虑到兼容性的问题，统一使用 SCSS 会方便些，具体使用方法如下：

// 定义
$color-dark: #262626;
$color-black: #000;
$color-primary: #d3ab55;
$color-secondary: #bbb;
$color-white: #fff;$font-dancingScript: 'Dancing Script', cursive;
$font-josefinSans: 'Josefin Sans', sans-serif;
$font-nunito: 'Nunito', sans-serif;// 使用
body {// local scope也可以重写变量// 想要在本地重写global变量可以使用下面的语法：// $color-white: #eee !global;background-color: $color-dark;
}

它的编译结果如下：

body {background-color: #262626;
}

可以看到 $color-dark 已经被编译了，而不是直接使用变量，所以如果要有老版浏览器兼容的考虑，使用 SCSS 变量会方便一些。

像是主题颜色（primary、 secondary、warning、success 这种颜色）和字体大小、breakpoint 一般都推荐使用全局定义的变量来实现。练手的项目 1 中对于颜色、字体都使用了变量进行定义，但是 media query 没有，大概因为边写边感觉的原因……？

嵌套

嵌套是一个我觉得使用 SCSS 非常方便的点，如下面这个 HTML 的结构：

<nav class="navbar"><input type="checkbox" name="check" id="check" class="checkbox" hidden /><div class="hamburger-menu"><label for="check" class="menu"><div class="menu-line menu-line-1"></div><div class="menu-line menu-line-2"></div><div class="menu-line menu-line-3"></div></label></div>
</nav>

要选择 navbar > hamburger > menu，并且分别应用样式，CSS 的写法为：

.navbar {
}.navbar .hamburger {
}.navbar .hamburger .menu {
}@media (max-width: 760px) {.navbar .hamburger {}.navbar .hamburger .menu {}
}

SCSS 的写法为：

.navbar {.hamburger {@media (max-width: 760px) {}.menu {@media (max-width: 760px) {}}}
}

我个人还是比较偏好这种嵌套式的写法，尤其是一些样式都比较依赖选择多个 class selector 去增加权重覆写样式的情况下，这样的确能少写一些代码。media query 也嵌套在这里，找 responsive 的实现代码也更方便一些。

extend

extend 是一个比较强大的方法，其实现和使用方法如下：

.full-space {width: 100%;height: 100%;
}.header {@extend .full-space;
}

编译后的结果为：

.full-space,
.header {width: 100%;height: 100%;
}

如果有多个样式都 extend 了同一个样式，那么 SCSS 也会将其打包在一起，而不是额外重复一遍 CSS，如：

.full-space {width: 100%;height: 100%;
}.header {@extend .full-space;
}.footer {@extend .full-space;
}

对应的 CSS:

.full-space,
.header,
.footer {width: 100%;height: 100%;
}

mixin

mixin 是另一个 SCSS 强大的地方，它的使用方法为：

@mixin textStyles($transform: uppercase) {font-weight: 300;letter-spacing: 2px;text-transform: $transform;
}.main-name {font-family: $font-nunito;font-size: 50px;color: $color-secondary;@include textStyles;
}

编译后的结果为：

.main-name {font-family: 'Nunito', sans-serif;font-size: 50px;color: #bbb;font-weight: 300;letter-spacing: 2px;text-transform: uppercase;
}

与 extend 最大的不同有两点：

  1. mixin 可以接受参数
  2. mixin 会将定义好的样式添加到当前 selector 中

总体来说，如果一个样式的代码是固定且不会变动的，并且想减少 CSS 的大小，那么就可以使用 extend。相反，如果想要一个代码更加的动态，需要依靠传入的变量进行修改时，就可以使用 mixin，另一个比较适合使用 mixin 的案例是 transition，一般 duration、应用的样式及延迟都不太一样，这时候可以使用 mixin 减少编程时的代码量。

mixin 在提供 default value 是可以不传值的，不传值的情况下 SCSS 会使用默认值。不提供默认值好像是会报错的来着……

function

function 可以实现一些计算，如：

@function fontSize($size: 12px) {@return $size * 2;
}

对于一些小型的项目来说，function 的使用并不一定会很方便，不过对于一些大型项目，特别是 margin、padding 都有定义好的 responsive 项目，使用 function 会方便很多。

SCSS 也有一些预设的 function，如颜色有 darken, lightedn 等 数字有 percent 等，数学有 min, max 等，以便开发。

placeholder selector

用 extend 会创建一个空置的 class，使用 placeholder selector 可以解决这个问题，用法如下：

%full-space {width: 100%;height: 100%;
}.header {@extend %full-space;
}.footer {@extend %full-space;
}

对应的 CSS:

.header,
.footer {width: 100%;height: 100%;
}

import & partials

partial 指的是 SCSS 文件名在命名时使用 _ 作为前缀的命名规范，如 _base.scss，这样 SCSS 就不会多生成一个 _base.scss 的文件。随后使用 import 关键词在 main.scss 中导入对应的包，就可以将 _base.scss 的样式添加到 main.scss 中，如：

  • _base.scss

    $color-dark: #262626;
$color-black: #000;
$color-primary: #d3ab55;
$color-secondary: #bbb;
$color-white: #fff;$font-dancingScript: 'Dancing Script', cursive;
$font-josefinSans: 'Josefin Sans', sans-serif;
$font-nunito: 'Nunito', sans-serif;

  • main.scss

    @import 'base';
@import 'layout';
@import 'components';

因为 base 是最先导入的，layout 和 component 也可以使用 base 中定义好的变量名。

一些有趣的 CSS 小技巧

使用 checkbox

checkbox 本身可以使用 HTML5 的 hidden，同时使用选择器，这样可以在不懈 JS 的情况下完成 onclick 的事件实现

hamburger icon

这个在点击的时候有两个特效：

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

第一个 90 度翻转比较好理解，第二个也是用 CSS 实现的，简单的说就是将中间的那条线透明度设置为 0，同时左右两根线分别按照 z 轴向左向右旋转一定角度，获取下面的箭头形状：

在这里插入图片描述

然后搭配 transform-origin: right; 使用即可。

这个用法真的好巧妙啊。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/70632.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

sql server 存储过程 set ansi_nulls set quoted_identifier，out 、output

sql server 存储过程 set ansi_nulls set quoted_identifier，out 、output

SQL-92 标准要求在对空值(NULL) 进行等于 () 或不等于 (<>) 比较时取值为 FALSE。 当 SET ANSI_NULLS 为 ON 时&#xff0c;即使 column_name 中包含空值&#xff0c;使用 WHERE column_name NULL 的 SELECT 语句仍返回零行。即使 column_name 中包含非空值&#xff0c…
阅读更多...
[LeetCode]矩阵对角线元素的和

[LeetCode]矩阵对角线元素的和

解题 思路 1: 循环,找到主对角线的下标和副对角线的下标,如果矩阵长或宽为奇数的时候,需要减去中间公共的那一个值,中间公共的那个数的下标为mat[mat.size()/2][mat.size()/2]副对角线的下标为 mat [i][mat.size()-i-1] class Solution { public:int diagonalSum(vector<ve…
阅读更多...
全球磁强计市场价值约为16.2亿美元，预测期内将以超过5.21%的增长率增长

全球磁强计市场价值约为16.2亿美元，预测期内将以超过5.21%的增长率增长

磁强计是一种用于测量磁场强度和方向的仪器。它可以检测和测量地球磁场、物体的磁性、地下矿藏、磁性材料等。磁强计在地球科学、物理学、地质学、勘探、矿业等领域具有广泛的应用。 根据阿谱尔&#xff08;APO&#xff09;的统计及预测&#xff0c;2022年全球磁强计市场价值约…
阅读更多...
代码随想录算法训练营（二叉树总结篇）

代码随想录算法训练营（二叉树总结篇）

一.二叉树的种类 1.满二叉树&#xff1a;就是说每一个非叶子节点的节点都有两个子节点。 2.完全二叉树&#xff1a;此二叉树只有最后一层可能没填满&#xff0c;并且存在的叶子节点都集中在左侧&#xff01;&#xff01;&#xff01; &#xff08;满二叉树也是完全二叉树&…
阅读更多...
SCF金融公链新加坡启动会 创新驱动未来

SCF金融公链新加坡启动会 创新驱动未来

新加坡迎来一场引人瞩目的金融科技盛会&#xff0c;SCF金融公链启动会于2023年8月13日盛大举行。这一受瞩目的活动将为金融科技领域注入新的活力&#xff0c;并为广大投资者、合作伙伴以及关注区块链发展的人士提供一个难得的交流平台。 在SCF金融公链启动会上&#xff0c; Wil…
阅读更多...
【爱书不爱输的程序猿】公网访问本地搭建的WEB服务器之详细教程

【爱书不爱输的程序猿】公网访问本地搭建的WEB服务器之详细教程

欢迎来到爱书不爱输的程序猿的博客, 本博客致力于知识分享&#xff0c;与更多的人进行学习交流 本地电脑搭建Web服务器并用cpolar发布至公网访问 前言1. 首先将PHPStudy、WordPress、cpolar下载到电脑2. 安装PHPStudy3. 安装cpolar&#xff0c;进入Web-UI界面4.安装wordpress5.…
阅读更多...
设计模式之构建器（Builder）C++实现

设计模式之构建器（Builder）C++实现

1、构建器提出 在软件功能开发中&#xff0c;有时面临“一个复杂对象”的创建工作&#xff0c;该对象的每个功能接口由于需求的变化&#xff0c;会使每个功能接口发生变化&#xff0c;但是该对象使用每个功能实现一个接口的流程是稳定的。构建器就是解决该类现象的。构建就是定…
阅读更多...
css3新增选择器总结

css3新增选择器总结

目录 一、属性选择器 二、结构伪类选择器 三、伪元素选择器 四、UI状态伪类选择器 五、反选伪类选择器 六、target选择器 七、父亲选择器、后代选择器 八、相邻兄弟选择器、兄弟们选择器 一、属性选择器 &#xff08;除IE6外的大部分浏览器支持&#xff09; E&#…
阅读更多...
AI 绘画Stable Diffusion 研究（九）sd图生图功能详解-老照片高清修复放大

AI 绘画Stable Diffusion 研究（九）sd图生图功能详解-老照片高清修复放大

大家好&#xff0c;我是风雨无阻。 通过前面几篇文章的介绍&#xff0c;相信各位小伙伴&#xff0c;对 Stable Diffusion 这款强大的AI 绘图系统有了全新的认知。我们见识到了借助 Stable Diffusion的文生图功能&#xff0c;利用简单的几个单词&#xff0c;就可以生成完美的图片…
阅读更多...
Linux系统编程：通过System V共享内存实现进程间通信

Linux系统编程：通过System V共享内存实现进程间通信

目录 一. 共享内存实现进程间通信的原理 二. 共享内存相关函数 2.1 共享内存的获取 shmget / ftok 2.2 共享内存与进程地址空间相关联 shmat 2.3 取消共享内存与进程地址空间的关联 shmdt 2.4 删除共享内存 shmctl 2.5 通信双方创建共享内存代码 三. 共享内存实现进程间…
阅读更多...
NLP——操作步骤讲义与实践链接

NLP——操作步骤讲义与实践链接

数据集与语料 语料是NLP的生命之源&#xff0c;所有NLP问题都是从语料中学到数据分布的规律语料的分类&#xff1a;单语料&#xff0c;平行语料&#xff0c;复杂结构 语料的例子&#xff1a;Penn Treebank, Daily Dialog, WMT-1x翻译数据集&#xff0c;中文闲聊数据集&#xf…
阅读更多...
网络通信TCP/IP协议逐层分析数据链路层(第四十课)

网络通信TCP/IP协议逐层分析数据链路层(第四十课)

Ethernet Ⅱ帧，也称为Ethernet V2帧，是如今局域网里最常见的以太帧，是以太网事实标准。如今大多数的TCP/IP应用（如HTTP、FTP、SMTP、POP3等）都是采用Ethernet II帧承载。 1、MAC地址概述 -MAC地址，即以太网地址，用来标识一个以太网上的某个单独设备或一组设备 -长度…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023