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; 使用即可。

这个用法真的好巧妙啊。

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

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

相关文章

C++ 面向对象三大特性——继承

✅<1>主页&#xff1a;我的代码爱吃辣 &#x1f4c3;<2>知识讲解&#xff1a;C 继承 ☂️<3>开发环境&#xff1a;Visual Studio 2022 &#x1f4ac;<4>前言&#xff1a;面向对象三大特性的&#xff0c;封装&#xff0c;继承&#xff0c;多态&#xff…

【数仓建设系列之一】什么是数据仓库?

一、什么是数据仓库&#xff1f; 数据仓库(Data Warehouse&#xff0c;简称DW)简单来讲&#xff0c;它是一个存储和管理大量结构化和非结构化数据的存储集合&#xff0c;它以主题为向导&#xff0c;通过整合来自不同数据源下的数据(比如各业务数据&#xff0c;日志文件数据等)…

内网穿透和服务器+IP 实现公网访问内网的区别

内网穿透和服务器IP 实现公网访问内网的区别在于实现方式和使用场景。 内网穿透&#xff08;Port Forwarding&#xff09;&#xff1a;内网穿透是一种通过网络技术将公网用户的请求通过中转服务器传输到内网设备的方法。通过在路由器或防火墙上进行配置&#xff0c;将公网请求…

MySQL- sql语句基础

文章目录 1.select后对表进行修改&#xff08;delete&#xff09;2.函数GROUP_CONCAT()3.使用正则表达式3.DATE_FORMAT()4.count() 加条件 1.select后对表进行修改&#xff08;delete&#xff09; 报错&#xff1a;You can’t specify target table ‘Person’ for update in …

proteus结合keil-arm编译器构建STM32单片机项目进行仿真

proteus是可以直接创建设计图和源码的&#xff0c;但是源码编译它需要借助keil-arm编译器&#xff0c;也就是我们安装keil-mdk之后自带的编译器。 下面给出一个完整的示例&#xff0c;主要是做一个LED灯闪烁的效果。 新建工程指定路径&#xff0c;Schematic,PCB layout都选择默…

【Docker】 使用Docker-Compose 搭建基于 WordPress 的博客网站

引 本文将使用流行的博客搭建工具 WordPress 搭建一个私人博客站点。部署过程中使用到了 Docker 、MySQL 。站点搭建完成后经行了发布文章的体验。 WordPress WordPress 是一个广泛使用的开源内容管理系统&#xff08;CMS&#xff09;&#xff0c;用于构建和管理网站、博客和…

单例设计模式精讲(饿汉式和懒汉式实现的重要方法)

目录 什么叫做单例模式&#xff1f; 饿汉式和懒汉式的区别&#xff1f; 饿汉式-方式1&#xff08;静态变量方式&#xff09; 饿汉式-方式2&#xff08;静态代码块方式&#xff09; 懒汉式-方式1&#xff08;线程不安全&#xff09; 懒汉式-方式2&#xff08;线程安全&…

FifthOne:用于矢量搜索的计算机视觉接口

一、说明 数据太多了。数据湖和数据仓库;广阔的像素牧场和充满文字的海洋。找到正确的数据就像大海捞针一样&#xff01;如果你喜欢开源机器学习库 FiftyOne&#xff0c;矢量搜索引擎通过将复杂数据&#xff08;图像的原始像素值、文本文档中的字符&#xff09;转换为称为嵌入矢…

PHP报错:未定义常量的解决方法!

PHP报错&#xff1a;未定义常量的解决方法&#xff01; 在PHP编程中&#xff0c;我们经常会遇到常量未定义的错误。这种错误通常会在代码中使用未定义的常量时发生。本文将介绍常量的概念以及如何解决未定义常量的问题。 首先&#xff0c;让我们来了解什么是常量。在PHP中&am…

大数据平台运维实训室建设方案

一、概况 本实训室的主要目的是培养大数据平台运维项目的实践能力,以数据计算、分析、挖掘和可视化的案例训练为辅助。同时,实训室也承担相关考评员与讲师培训考试、学生认证培训考试、社会人员认证培训考试、大数据技能大赛训练、大数据专业课程改革等多项任务。 实训室旨在培…

无人机跟随一维高度避障场景--逻辑分析

无人机跟随一维高度避障场景--逻辑分析 1. 源由2. 视频3. 问题3.1 思维发散3.2 问题收敛 4. 图示4.1 水平模式4.2 下坡模式4.3 上坡模式4.4 碰撞分析 5. 总结5.1 一维高度避障场景5.2 业界跟随产品5.3 APM集成跟随示意图一&#xff1a;示意图二&#xff1a;示意图三&#xff1a…

Java算法_ 验证二叉搜索树(LeetCode_Hot100)

题目描述&#xff1a; 给你一个二叉树的根节点 &#xff0c;判断其是否是一个有效的二叉搜索树。root 有效 二叉搜索树定义如下&#xff1a; 节点的左子树只包含 小于 当前节点的数。 节点的右子树只包含 大于 当前节点的数。 所有左子树和右子树自身必须也是二叉搜索树。 获得…

【TypeScript】tsc -v 报错 —— 在此系统上禁止运行脚本

在 VS Code 终端中执行 tsc -v &#xff0c;报错 —— 在此系统上禁止运行脚本 然后 windows x &#xff0c;打开终端管理员&#xff0c;出现同样的问题 解决方法&#xff1a; 终端&#xff08;管理员&#xff09;执行以下命令&#xff1a; 出现 RemoteSigned 则代表更改成功…

11,模板泛化、模板特化、所占字节数、继承实现模板展开、using循环命名展开可变参数

模板泛化、模板特化、所占字节数、继承实现模板展开、using循环命名展开可变参数 模板泛化模板特化模板全特化通过模板偏特化获取类型所占字节数通过模板偏特化和宏获取类型所占字节数...ParamTypes和ParamTypes...的区别 通过继承实现模板展开using 通过using循环命名的方式来…

开发一个文生图的功能

文章目录 效果开发环境原理核心代码代码仓库问题效果 开发环境 Python 3.10PyCharm原理 借助开源项目stable-diffusion,通过该项目封装python库diffusers,可以轻易的实现文生图的功能。 关于更多diffusers的功能请访问:https://huggingface.co/docs/diffusers/index 核心代…

css样式表属性

文章目录 css样式表属性colorbackground-colorfont-sizefont-weightfont-familyfont-styletext-decorationtext-indentline-height(line-height的概念)width、heightletter-spacingtext-aligndirectionwriting-modefont-variantborder-radiusopacitycursorvertical-alignmin-wi…

【数据结构与算法】十大经典排序算法-归并排序

&#x1f31f;个人博客&#xff1a;www.hellocode.top &#x1f3f0;Java知识导航&#xff1a;Java-Navigate &#x1f525;CSDN&#xff1a;HelloCode. &#x1f31e;知乎&#xff1a;HelloCode &#x1f334;掘金&#xff1a;HelloCode ⚡如有问题&#xff0c;欢迎指正&#…

如何用输入函数为数组赋值

在编写程序时我们经常使用数组&#xff0c;而数组的大小可能是很大的但是我们并不需要为每个元素都自己赋值&#xff0c;我们可能会自定义输入数组元素个数&#xff0c;我们应该如何实现通过输入函数为数组赋值呢&#xff1f; 目录 第一种&#xff1a; 第二种&#xff1a; 第一…

大数据bug-sqoop(二:sqoop同步mysql数据到hive进行字段限制。)

一&#xff1a;sqoop脚本解析。 #&#xff01;/bin/sh mysqlHost$1 mysqlUserName$2 mysqlUserPass$3 mysqlDbName$4 sql$5 split$6 target$7 hiveDbName$8 hiveTbName$9 partFieldName${10} inputDate${11}echo ${mysqlHost} echo ${mysqlUserName} echo ${mysqlUserPass} ec…

OpenCV之remap的使用

OpenCV中使用remap实现图像的重映射。 重映射是指将图像中的某一像素值赋值到指定位置的操作&#xff1a;g(x,y) f ( h(x,y) )&#xff0c; 在这里&#xff0c; g( ) 是目标图像, f() 是源图像, 而h(x,y) 是作用于 (x,y) 的映射方法函数。为了完成映射过程, 需要获得一些插值为…