当前位置: 首页 > news >正文

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 是最先导入的,layoutcomponent 也可以使用 base 中定义好的变量名。

一些有趣的 CSS 小技巧

使用 checkbox

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

hamburger icon

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

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

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

在这里插入图片描述

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

这个用法真的好巧妙啊。

相关文章:

SASS 学习笔记

SASS 学习笔记 总共会写两个练手项目&#xff0c;成品在 https://goldenaarcher.com/scss-study 可以看到&#xff0c;代码在 https://github.com/GoldenaArcher/scss-study。 什么是 SASS SASS 是 CSS 预处理&#xff0c;它提供了变量&#xff08;虽然现在 CSS 也提供了&am…...

Web菜鸟教程 - Springboot接入认证授权模块

网络安全的重要性不言而喻&#xff0c;如今早已不是以前随便弄个http请求就能爬到数据的时代&#xff0c;而作为一个架构师&#xff0c;网络安全必须在产品开发之初就考虑好。因为在产品开发的后期&#xff0c;一方面是客户增多&#xff0c;压力变大&#xff0c;可供利用的时间…...

【深入理解ES6】块级作用域绑定

1. var声明及变量提升机制 提升&#xff08;Hoisting&#xff09;机制&#xff1a;通过关键字var声明的变量&#xff0c;都会被当成在当前作用域顶部生命的变量。 function getValue(condition){if(condition){var value "blue";console.log(value);}else{// 此处…...

使用fake为数据库生成随机数据

参考https://cloud.tencent.com/developer/article/1663417 增加了自己的代码&#xff0c;使得只需要构建内容映射字典&#xff0c;然后根据字典就可以直接将数据插入到数据库中 from faker import Faker import pandas as pd from urllib import parse # from pymongo import…...

树结构转List

使用LinkedList效率更高 1、单个顶级节点 public static List<CmsStudentOutline> getTreeList(CmsStudentOutline root) {List<CmsStudentOutline> list new ArrayList<>();Queue<CmsStudentOutline> queue new LinkedList<>();if (root nu…...

Android复习(Android基础-四大组件)——Broadcast

1. 广播分类 广播的发送方式&#xff1a;标准广播、有序广播、粘性广播广播的类型&#xff1a;系统广播、本地广播 1.1 标准广播 完全异步&#xff0c;无序的广播发出后&#xff0c;所有的广播接收器几乎都会在同一时间收到消息。&#xff08;异步&#xff09;但是消息无法截…...

Ubuntu下mysql8开启远程连接

环境 mysql8ubuntu22.04 更改配置文件 vim /etc/mysql/mysql.conf.d/mysqld.conf找到 bind-address 127.0.0.1 mysqlx-bind-address 127.0.0.1 把这两行注释掉&#xff0c;保存退出即可 修改mysql配置 登录mysql创建一个远程连接账户,名字任意&#xff0c;密码任意,用户名…...

java对象和json类型转换

fastjson参考 参考&#xff1a;http://doc.yaojieyun.com/www.runoob.com/w3cnote/java-json-instro.html 参考&#xff1a; http://doc.yaojieyun.com/www.runoob.com/w3cnote/fastjson-intro.html 序列化&#xff1a;JSON.toJSONString(person)将Java 对象转换为 JSON 字符串…...

elasticsearch-head 插件

1、elastic 插件说明 **Head** 是第三方提供的一款很优秀的插件&#xff0c;集监控、查询、配置一体的web功能系统&#xff0c;可以在系统中进行创建、删除索引 、文档。以及查询、配置索引等功能&#xff0c;深受广大开发者的喜爱 **Kopf** 是另一个第三方提供的一款很优秀…...

Neo4j之FOREACH基础

在 Neo4j 中&#xff0c;FOREACH 语句用于在查询中对一组元素执行某些操作&#xff0c;通常是在创建或更新节点关系时。它常常与 CREATE 或 SET 等操作结合使用。 创建多个关系&#xff1a; MATCH (p:Person), (m:Movie) WHERE p.name Alice AND m.title The Matrix FOREAC…...

【SpringBoot】| 接口架构风格—RESTful

目录 一&#xff1a;接口架构风格—RESTful 1. 认识RESTful 2. RESTful 的注解 一&#xff1a;接口架构风格—RESTful 1. 认识RESTful &#xff08;1&#xff09;接口 ①接口&#xff1a; API&#xff08;Application Programming Interface&#xff0c;应用程序接口&…...

CentOS系统环境搭建(十)——CentOS7定时任务

centos系统环境搭建专栏&#x1f517;点击跳转 使用CentOS系统环境搭建&#xff08;九&#xff09;——centos系统下使用docker部署项目的项目做定时任务。 CentOS7定时任务 查看现有的定时任务 crontab -l编辑定时任务 crontab -e示例 每天凌晨两点运行脚本 清理内存 0 2 *…...

如何在安卓设备上安装并使用 ONLYOFFICE 文档

您可以使用文档安卓版应用&#xff0c;在移动设备上访问存在您 ONLYOFFICE 帐号中的文件。阅读本文&#xff0c;了解如何操作。 什么是 ONLYOFFICE 文档安卓版 适用于 Android 系统的 ONLYOFFICE 文档是一款全面的办公工具&#xff0c;您可以使用它&#xff0c;查看、创建、编…...

【制作npm包1】申请npm账号、认识个人包和组织包

概述 在开发当中经常有一种现象&#xff0c;重复代码写了N多遍&#xff0c;再次写同样的逻辑就再次翻查以前的代码逻辑。效率低下且容易出错&#xff0c;封装一个npm包的价值也不仅仅是给别人用&#xff0c;封装一套属于自己或者本部门的npm包也是相当有必要。 也许经常看到一…...

linux学习(文件描述符)[11]

一切皆文件 用代码创建的文件&#xff0c;默认路径在可执行文件同级目录下&#xff08;本质是进程通过系统接口创建的&#xff09; 文件宏 在Linux下&#xff0c;有一些与文件操作相关的宏可以用于处理文件描述符和文件权限。以下是一些常用的文件宏&#xff1a; STDIN_FIL…...

影响力再度提升,Smartbi多次蝉联Gartner、IDC等权威认可

近期&#xff0c;思迈特软件捷报频传&#xff0c;Smartbi凭借技术创新实力和产品能力&#xff0c;成功入选Gartner中国增强数据分析代表厂商及自助分析代表厂商&#xff0c;同时&#xff0c;连续三年蝉联“IDC中国FinTech 50”榜单。 Part.1 再次被Gartner提名 Smartbi深度融…...

【动态map】牛客挑战赛67 B

登录—专业IT笔试面试备考平台_牛客网 题意&#xff1a; 思路&#xff1a; 考虑动态的map 可以先定义一个状态&#xff0c;然后用map统计前缀这个状态的出现次数 在这里&#xff0c;定义{a,b}为cnt1 - cnt0和cnt2 - cnt0 当cnt0 和 cnt1都和cnt2相同时&#xff0c;统计贡献…...

mysql(2)

1.ACID 关系型数据库都有ACID特性 原子性&#xff08;Atomicity&#xff09; &#xff1a; 事务是最小的执行单位&#xff0c;不允许分割。事务的原子性确保动作要么全部完成&#xff0c;要么完全不起作用&#xff1b;一致性&#xff08;Consistency&#xff09;&#xff1a;…...

介绍 Apache Spark 的基本概念和在大数据分析中的应用

Apache Spark是一种基于内存计算的大数据处理框架&#xff0c;它支持分布式计算&#xff0c;并且能够处理比传统处理框架更大量的数据。以下是Apache Spark的一些基本概念和在大数据分析中的应用&#xff1a; RDD (Resilient Distributed Dataset)&#xff1a;RDD是Spark的核心…...

Vue CLI创建Vue项目详细步骤

&#x1f680; 一、安装Node环境&#xff08;建议使用LTS版本&#xff09; 在开始之前&#xff0c;请确保您已经安装了Node.js环境。您可以从Node.js官方网站下载LTS版本&#xff0c;以确保稳定性和兼容性。 中文官网下载 确认已安装 Node.js。可以在终端中运行 node -v 命令…...

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

服务器硬防的应用场景都有哪些?

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言,以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天,异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;apiserver间接起到了中继节…...

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...

tauri项目,如何在rust端读取电脑环境变量

如果想在前端通过调用来获取环境变量的值&#xff0c;可以通过标准的依赖&#xff1a; std::env::var(name).ok() 想在前端通过调用来获取&#xff0c;可以写一个command函数&#xff1a; #[tauri::command] pub fn get_env_var(name: String) -> Result<String, Stri…...

Vue 3 + WebSocket 实战:公司通知实时推送功能详解

&#x1f4e2; Vue 3 WebSocket 实战&#xff1a;公司通知实时推送功能详解 &#x1f4cc; 收藏 点赞 关注&#xff0c;项目中要用到推送功能时就不怕找不到了&#xff01; 实时通知是企业系统中常见的功能&#xff0c;比如&#xff1a;管理员发布通知后&#xff0c;所有用户…...

如何做好一份技术文档?从规划到实践的完整指南

如何做好一份技术文档&#xff1f;从规划到实践的完整指南 &#x1f31f; 嗨&#xff0c;我是IRpickstars&#xff01; &#x1f30c; 总有一行代码&#xff0c;能点亮万千星辰。 &#x1f50d; 在技术的宇宙中&#xff0c;我愿做永不停歇的探索者。 ✨ 用代码丈量世界&…...