什么是Scss

Sass(Syntactically Awesome Style Sheets) ,是一种 css 预处理器和一种语言, 它可以用来定义一套新的语法规则和函数,以加强和提升 CSS. 它有很多很好的特性,但是它有类似 Ruby 的语法,没有花括号,没有分号,遵循严格的缩进

它在书写规则,变量命名方面和 CSS 代码有着很大的区别。于是,后来官方在 2010 年推出了一个全新的语法,叫做 SCSS, 意思是 Sassy CSS. 这个语法带来了对 CSS 友好的语法,试图弥合 Sass 和 CSS 之间的差别.

嵌套

可以把子元素放入父元素里面

变量

在 CSS 文件中,我们经常会用到颜色 color, 可能好几个元素的 CSS 样式都会用到同样的一种颜色,因为网站往往是一个统一的风格。 这样,我们如果一旦要更改这个颜色,我们就要更改整个 css 文件中的所有地方。而变量解决了这个问题,我们可以把一个颜色值赋给一个变量,所有用到这个颜色的地方,都用这个变量替代。这样,需要更改颜色时,只需要修改这个变量的值就可以了. 当然,CSS 中的宽度,长度等也可以类似这样,使用统一的变量来进行.

3. 局部

Sass 可以通过使用局部系统来把样式表分成多份文件,根据不同的需求组织不同部分的样式表,形成不同的 css 文件

比如,把页眉样式写在页眉样式表中,类似的有 页脚样式表,导航样式表,按钮样式表....我们公司在开发多个项目时,都采用了这种方法,形成多个 scss 文件,比如有

colours.scss, typography.scss, layout.scss, footer.scss, header.scss, navigation.scss, blocks.scss, forms.scss, slider.scss, buttons.scss, margins.scss,icons.scss, tables.scss..

@import命令也可以用于在 html 文件中导入外部的 css 文件

import 规则一定要先于除了 @charset 的其他任何 CSS 规则

使用@import 命令进行媒体查询

媒体查询是 CSS3 中出现的新特征,在 css 中使用 media 关键字来指定, 一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式范围的表达式组成,比如宽度,高度和颜色。 它允许内容的呈现针对一个特定范围的输出设备进行裁剪,而不必改变内容本身.

混合宏

使用 Sass 的一个很大的特性是,混合宏. 混合宏是很小的代码片段(类似局部), 使用@mixin 标志来标识 你可以在文件中的任何部分,使用@include 标志来复用这个混合宏.

混合宏结合变量使用,是个很普遍的例子, 最常见的例子就是创建圆角按钮. 创建一段实现圆角代码的混合宏,用传入的变量来代替圆角值, 这样,可以根据传入变量值不同,实现不同的圆角按钮

公司项目中,前端 css 文件我们都是写 SCSS 文件,然后通过@import 导入到 style.scss 文件中,最后通过 gulp 来生成 style.css 文件

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

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

相关文章

Ubuntu系统使用快速入门实践(七)——软件安装与使用(6)

Ubuntu系统使用快速入门实践系列文章 下面是Ubuntu系统使用系列文章的总链接,本人发表这个系列的文章链接均收录于此 Ubuntu系统使用快速入门实践系列文章总链接 下面是专栏地址: Ubuntu系统使用快速入门实践系列文章专栏 文章目录 Ubuntu系统使用快速…

外贸获客引流详细教程,小白也能懂!

一、引子 随着全球化的不断发展,国际贸易日益频繁,许多外贸企业为了拓展市场,获取更多客户,都在努力提高营销策略。 然而,对于许多外贸新手来说,如何高效地进行获客引流仍然是一个难题,今天&a…

手动搭建koa+ts项目框架(ts项目实现开发阶段实时查看)

文章目录 前言优化脚本如有启发,可点赞收藏哟~ 前言 上篇文章记录了手动简单搭建 koats项目步骤 虽然可以直接编译后并开启服务,但如果修改./src内的文件,没法实时编译 以下介绍使用其他方法实现实时效果 优化脚本 咱使用以下依赖可实现边写…

机械中常用的一些术语

目录 一、OEMSOP:SOP编写指南 WI(标准作业指导书):标准作业程序 (SOP):SOP和WI的区别:一、PFC、FMEA、PCP、WIPPAP、PSW:APQP:BOM(Bill of Material)物料清单DV(设计验证&#xff09…

“产学研用”深度融合,校企合作助力烟花产业数字化发展

为推动烟花行业数字化转型升级,充分发挥科教资源优势,技术成果及创新资源,推动构建产学研用高效协同,加快提升烟花产业创新能力,助力企业在国内外复杂的市场环境下提升发展能力及竞争能力。12月6日,烟花生产…

前端知识(十)———JavaScript 使用URL跳转传递数组对象数据类型的方法

目录 首先了解一下正常传递基本数据类型 JavaScript跳转页面方法 JavaScript路由传递参数 JavaScript路由接收参数传递对象、数组 在前端有的时候会需要用链接进行传递参数,基本数据类型的传递还是比较简单的,但是如果要传递引用数据类型就比较麻烦了…

final,finally,finalize的区别

final,finally,finalize的区别 在Java中,final、finally和finalize是三个不同的关键字,它们具有不同的作用和用法。 1、final: final是一个修饰符,可以用于修饰类、方法和变量。 用于修饰类时&#xff0…

python sort函数

得开个新坑学一下sort的用法了。 a [a, b, c, d] b [0, 1, 2, 3]sorted_list [x for _, x in sorted(zip(b, a))] 参数 sorted(iterable, cmpNone, keyNone, reverseFalse)菜鸟教程的例子: >>>a [5,7,6,3,4,1,2] >>> b sorted(a) #…

如何让弹出的.py文件窗口缩小

原图比例如下,很明显实际大小已经超出屏幕显示范围: 参考这篇文章的代码,新定义一个函数: def get_scaling():user32 windll.user32# 获取现在的尺寸(缩放后now_width user32.GetSystemMetrics(0)now_height user…

Day07 Liunx高级系统设计8-线程

概述 进程与线程 进程 : 系统分配资源的基本单位 , 可以简单理解为一个正在进行的程序 线程 : 操作系统调度的最小单位 , 就是一段代码的执行顺序 注意: 1, 一个进程必须要有一个线程 , 该线程被称为主线程 2, 一个进程可以有多个线程 , 除主线程外的其他线程都是…

我的创作三周年纪念日

今天收到CSDN官方的来信,创作三周纪念日到了。 Dear: Hann Yang ,有幸再次遇见你: 还记得 2020 年 12 月 12 日吗? 你撰写了第 1 篇技术博客: 《vba程序用7重循环来计算24》 在这平凡的一天,你赋予了它…

MacOS 12 开放指定端口 指定ip访问

MacOS 12 开放指定端口 指定ip访问 在 macOS 上开放一个端口,并指定只能特定的 IP 访问,你可以使用 macOS 内置的 pfctl(Packet Filter)工具来实现。 以下是一些基本的步骤: 1、 编辑 pf 配置文件: 打开 /…

Android开发之长log的打印

在开发过程中,我们想要打印长的log,这个时候我们就需要做特殊的处理,下面这段代码就是处理的长log的打印: public static void LogLong(String tag, String msg) { //信息太长,分段打印//因为String的length是字符数量不是字节数…

JavaScript中如何向URL添加参数

设url为https://yungot.com/ 求:向url中添加参数 ?page=1&limit=10 变成 https://yungot.com/?page=1&limit=10 解决方案:调用addUrlParams函数 解:addUrlParams({“page”: 1, “limit”: 10}) // url处理 function getRequestParams() {const requestParams = …

centos7部署docker环境

卸载旧版本 sudo yum remove docker docker-client docker-client-latest docker-common docker-latest docker-latest-logrotate docker-logrotate docker-engine 安装软件包并设置存储库 sudo yum install -y yum-utils sudo yum-config-manager --add-repo https:/…

时光机器:用rrweb打造可回溯的用户体验!

在现代Web应用中,理解用户如何与你的产品互动变得越来越重要。rrweb(record and replay the web)是一个开源库,它能够记录用户在网站上的所有操作,并能够像回放视频一样回放这些操作。这就像给你的网站装上了一台时光机…

leetcode 30. 串联所有单词的子串(优质解法)

代码&#xff1a; class Solution {public static List<Integer> findSubstring(String s, String[] words) {List<Integer> integerListnew ArrayList<>();int lengthwords.length; //words 数组中的字符串个数int sizewords[0].length(); //words 数组…

C++STL的vector模拟实现

文章目录 前言成员变量成员函数构造函数push_backpop_backinserterase析构函数拷贝构造 前言 成员变量 namespace but {template<class T>class vector{public:typedef T* iterator;private:iterator _start;iterator _finish;iterator _end_of_storage;}; }我们之前实…

Docker的安装与简单操作命令

目录 前言 docker的安装 基础docker操作 容器管理 镜像管理 容器镜像封装与加载 前言 前文简单说明了容器技术出现的背景&#xff0c;与对docker做了结构上的介绍Container容器技术简介-CSDN博客https://blog.csdn.net/qq_72569959/article/details/134814887 讲到dock…

研究前沿| Nat Communi:大豆节间距调控基因RIN1的分子机制解析

引言 株型是决定作物产量的重要性状。以半矮秆利用和提高氮肥利用效率为标志的绿色革命提高了作物抗倒伏能力&#xff0c;使水稻、小麦等作物可以通过密植提高单产&#xff0c;产量大幅提升。但是&#xff0c;大豆绿色革命基因尚未发现&#xff0c;与水稻和小麦产量提升相比&am…