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

SASS的用法指南

一、什么是SASS
SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。
本文总结了SASS的主要用法。我的目标是,有了这篇文章,日常的一般使用就不需要去看官方文档了。

二、安装和使用
2.1 安装
SASS是Ruby语言写的,但是两者的语法没有关系。不懂Ruby,照样使用。只是必须先安装Ruby,然后再安装SASS。
假定你已经安装好了Ruby,接着在命令行输入下面的命令:

gem install sass

然后,就可以使用了。

2.2 使用
SASS文件就是普通的文本文件,里面可以直接使用CSS语法。文件后缀名是.scss,意思为Sassy CSS。
下面的命令,可以在屏幕上显示.scss文件转化的css代码。(假设文件名为test。)

sass test.scss

如果要将显示结果保存成文件,后面再跟一个.css文件名。

sass test.scss test.css

SASS提供四个编译风格的选项:

  * nested:嵌套缩进的css代码,它是默认值。* expanded:没有缩进的、扩展的css代码。* compact:简洁格式的css代码。* compressed:压缩后的css代码。

生产环境当中,一般使用最后一个选项。

sass --style compressed test.sass test.css

你也可以让SASS监听某个文件或目录,一旦源文件有变动,就自动生成编译后的版本。

// watch a file 
sass --watch input.scss:output.css 
// watch a directory 
sass --watch app/sass:public/stylesheets

SASS的官方网站,提供了一个在线转换器。你可以在那里,试运行下面的各种例子。

三、基本用法

3.1 变量
SASS允许使用变量,所有变量以$开头。

$blue : #1875e7; div {color : $blue;
}

如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中。

$side : left;.rounded {border-#{$side}-radius: 5px;
}

3.2 计算功能
SASS允许在代码中使用算式:

body {margin: (14px/2);top: 50px + 100px;right: $var * 10%;
}

3.3 嵌套
SASS允许选择器嵌套。比如,下面的CSS代码:

div h1 {color : red;
}

可以写成:

div {hi {color:red;}
}

属性也可以嵌套,比如border-color属性,可以写成:

p {border: {color: red;}
}

注意,border后面必须加上冒号。
在嵌套的代码块内,可以使用&引用父元素。比如a:hover伪类,可以写成:

a {&:hover { color: #ffb3ff; }
}

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

/*! 重要注释!*/

四、代码的重用

4.1 继承
SASS允许一个选择器,继承另一个选择器。比如,现有class1:

.class1 {border: 1px solid #ddd;
}

class2要继承class1,就要使用@extend命令:

.class2 {@extend .class1;font-size:120%;
}

4.2 Mixin
Mixin有点像C语言的宏(macro),是可以重用的代码块。
使用@mixin命令,定义一个代码块。

@mixin left {float: left;margin-left: 10px;
}

使用@include命令,调用这个mixin。

div {@include left;
}

mixin的强大之处,在于可以指定参数和缺省值。

@mixin left($value: 10px) {float: left;margin-right: $value;
}

使用的时候,根据需要加入参数:

div {@include left(20px);
}

下面是一个mixin的实例,用来生成浏览器前缀。

@mixin rounded($vert, $horz, $radius: 10px) {border-#{$vert}-#{$horz}-radius: $radius;-moz-border-radius-#{$vert}#{$horz}: $radius;-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}

使用的时候,可以像下面这样调用:

#navbar li { @include rounded(top, left); } 
#footer { @include rounded(top, left, 5px); }

4.3 颜色函数
SASS提供了一些内置的颜色函数,以便生成系列颜色。

lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c

4.4 插入文件
@import命令,用来插入外部文件。

@import "path/filename.scss";

如果插入的是.css文件,则等同于css的import命令。

@import "foo.css";

五、高级用法

5.1 条件语句
@if可以用来判断:

p {@if 1 + 1 == 2 { border: 1px solid; }@if 5 < 3 { border: 2px dotted; }
}

配套的还有@else命令:

@if lightness($color) > 30% {  
} @else {background-color: #fff;
}

5.2 循环语句
SASS支持for循环:

@for $i from 1 to 10 {.border-#{$i} {border: #{$i}px solid blue;}
}

也支持while循环:

$i: 6;@while $i > 0 {.item-#{$i} { width: 2em * $i; }$i: $i - 2;
}

each命令,作用与for类似:

@each $member in a, b, c, d {.#{$member} {background-image: url("/image/#{$member}.jpg");}
}

5.3 自定义函数
SASS允许用户编写自己的函数。

@function double($n) {@return $n * 2;
}#sidebar {width: double(5px);
}

相关文章:

SASS的用法指南

一、什么是SASS SASS是一种CSS的开发工具&#xff0c;提供了许多便利的写法&#xff0c;大大节省了设计者的时间&#xff0c;使得CSS的开发&#xff0c;变得简单和可维护。 本文总结了SASS的主要用法。我的目标是&#xff0c;有了这篇文章&#xff0c;日常的一般使用就不需要去…...

MCSM面板一键搭建我的世界服务器-外网远程联机【内网穿透】

文章目录 前言1.Mcsmanager安装2.创建Minecraft服务器3.本地测试联机4. 内网穿透4.1 安装cpolar内网穿透4.2 创建隧道映射内网端口 5.远程联机测试6. 配置固定远程联机端口地址6.1 保留一个固定TCP地址6.2 配置固定TCP地址 7. 使用固定公网地址远程联机 转载自远程穿透文章&…...

( 数组和矩阵) 565. 数组嵌套 ——【Leetcode每日一题】

❓565. 数组嵌套 难度&#xff1a;中等 索引从 0 开始长度为N的数组 A&#xff0c;包含 0 到 N - 1 的所有整数。找到最大的集合 S并返回其大小&#xff0c;其中 S[i] {A[i], A[A[i]], A[A[A[i]]], ... } 且遵守以下的规则。 假设选择索引为 i 的元素 A[i] 为 S 的第一个元…...

linux内核网络子系统初探---概述

linux内核网络子系统初探—概述 一、网络模型 简单介绍 学习网络时&#xff0c;必定能在各种教材资料里见到以下三种网络模型&#xff1a; 三种模型间的差异&#xff1a; OSI七层模型是理论上的网络模型&#xff0c;从功能方面分成了相对独立的7个层次&#xff0c;由于太复…...

java版工程项目管理系统源代码-功能清单 图文解析

Java版工程项目管理系统 Spring CloudSpring BootMybatisVueElementUI前后端分离 功能清单如下&#xff1a; 首页 工作台&#xff1a;待办工作、消息通知、预警信息&#xff0c;点击可进入相应的列表 项目进度图表&#xff1a;选择&#xff08;总体或单个&#xff09;项目显示…...

【chapter30】【PyTorch】[动量与学习率衰减】

前言&#xff1a; SGD的不足&#xff1a; ①呈“之”字型&#xff0c;迂回前进&#xff0c;损失函数值在一些维度的改变得快&#xff08;更新速度快&#xff09;&#xff0c;在一些维度改变得慢&#xff08;速度慢&#xff09;- 在高维空间更加普遍 ②容易陷入局部极小值和鞍点…...

【键入网址到网页显示】

文章目录 HTTPDNS五层协议TCPIPMAC网卡&#xff08;物理层&#xff09;交换机路由器 HTTP 对 URL 进行解析之后&#xff0c;浏览器确定了 Web 服务器和文件名&#xff0c;接下来就是根据这些信息来生成 HTTP 请求消息了。 http://www.server.com/dir1/file1.html http:访问数…...

Nacos配置中心、配置热更新、及配置共享的记录

Nacos除了提供了注册中心的功能,同样也提供了配置中心的功能,用于管理一些叫常改动的配置 当微服务部署的实例越来越多&#xff0c;达到数十、数百时&#xff0c;逐个修改微服务配置就会让人抓狂&#xff0c;而且很容易出错。我们需要一种统一配置管理方案&#xff0c;可以集中…...

MATLAB | 绘图复刻(八) | 堆叠柱状图+哑铃图

本次复刻的是Nature Communications中Friedman, S.T., Muoz, M.M. A latitudinal gradient of deep-sea invasions for marine fishes. Nat Commun 14, 773 (2023). https://doi.org/10.1038/s41467-023-36501-4的Fig1图像&#xff1a; 复刻效果&#xff1a; 文章可在如下网站下…...

Scala之集合(2)

目录 集合基本函数&#xff1a; &#xff08;1&#xff09;获取集合长度 &#xff08;2&#xff09;获取集合大小 &#xff08;3&#xff09;循环遍历 &#xff08;4&#xff09;迭代器 &#xff08;5&#xff09;生成字符串 &#xff08;6&#xff09;是否包含 衍生集合…...

【图像分割】视觉大模型SEEM(Segment Everything Everywhere All at Once)原理解读

文章目录 摘要&#xff08;效果&#xff09;二、前言三、相关工作四、method4.1 多用途4.2 组合性4.3 交互式。4.4 语义感知 五、实验 论文地址&#xff1a;https://arxiv.org/abs/2304.06718 测试代码&#xff1a;https://github.com/UX-Decoder/Segment-Everything-Everywher…...

Linux: command: ibstat; infiniband

文章目录 如何在Linux上安装infiniband相关的软件。ibstat相关资料 如何在Linux上安装infiniband相关的软件。 https://access.redhat.com/solutions/301643 https://docs.oracle.com/cd/E19436-01/820-3522-10/ch3-linux.html yum groupinstall “Infiniband Support” Pack…...

UML简介与类图详解

1 UML简介 1.1 UML是什么 UML&#xff0c;全称为Unified Model Language&#xff0c;即统一建模语言&#xff0c;是由一整套图表组成的&#xff0c;为面向对象系统的产品进行说明、可视化和编制文档的一种标准语言。UML 代表了一组最佳工程实践&#xff0c;这些实践已被证明在…...

【每日一题】1994.好子集的数目

1994.好子集的数目 题目描述解决方案&#xff1a;状态压缩动态规划代码&#xff1a;Python 题目来源&#xff1a;LeetCode 原文链接&#xff1a;https://mp.weixin.qq.com/s/myI7_ZwJM7kizrwUtWgAZQ 难度级别&#xff1a;困难 题目描述 给你一个整数数组 nums。如果 nums 的一…...

坚持伙伴优先,共创数据存储新生态

4 月 26 日&#xff0c;2023 阿里云合作伙伴大会上&#xff0c;阿里巴巴集团董事会主席兼 CEO、阿里云智能集团 CEO 张勇表示&#xff0c;阿里云的核心定位是一家云计算产品公司&#xff0c;生态是阿里云的根基。让被集成说到做到的核心&#xff0c;是要坚定走向“产品被集成”…...

树形结构的三级分类如何实现?

概述&#xff1a; 本三级联动分类服务端使用的是: Springboot MyBatis-plus&#xff0c;前端使用的是&#xff1a;VueElementUI&#xff0c;树形控件使用的是el-tree。本三级联动分类可以把任一子项拖拽到其它目录&#xff0c;可以添加、编辑、删除分类。 效果图&#xff1a…...

SSM整合完整流程

&#x1f3e0;个人主页&#xff1a;shark-Gao &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是shark-Gao&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f389;目前状况&#xff1a;23届毕业生&#xff0c;目前在某公司实习&#x1f…...

虹科方案 | 助力高性能视频存储解决方案-2

上篇文章《虹科方案 | 助力高性能视频存储解决方案-1》我们分享了虹科&ATTO 和 Avid 共同创建协作解决方案&#xff0c;助力高性能视频存储&#xff0c;今天我们再深入介绍一下我们的案例详情。 一、行业挑战 从高端广播设施到小型独立工作室的媒体后期制作环境都需要允许多…...

java版深圳 工程管理系统软件 自主研发,工程行业适用 软件源码

Java版工程项目管理系统 Spring CloudSpring BootMybatisVueElementUI前后端分离 功能清单如下&#xff1a; 首页 工作台&#xff1a;待办工作、消息通知、预警信息&#xff0c;点击可进入相应的列表 项目进度图表&#xff1a;选择&#xff08;总体或单个&#xff09;项目显示…...

云原生Istio架构和组件介绍

目录 1 Istio 架构2 Istio组件介绍2.1 Pilot2.2 Mixer2.3 Citadel2.4 Galley2.5 Sidecar-injector2.6 Proxy(Envoy)2.7 Ingressgateway2.8 其他组件 1 Istio 架构 Istio的架构&#xff0c;分为控制平面和数据面平两部分。 - 数据平面&#xff1a;由一组智能代理&#xff08;[En…...

Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

WordPress插件:AI多语言写作与智能配图、免费AI模型、SEO文章生成

厌倦手动写WordPress文章&#xff1f;AI自动生成&#xff0c;效率提升10倍&#xff01; 支持多语言、自动配图、定时发布&#xff0c;让内容创作更轻松&#xff01; AI内容生成 → 不想每天写文章&#xff1f;AI一键生成高质量内容&#xff01;多语言支持 → 跨境电商必备&am…...

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

高防服务器能够抵御哪些网络攻击呢?

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

云原生玩法三问:构建自定义开发环境

云原生玩法三问&#xff1a;构建自定义开发环境 引言 临时运维一个古董项目&#xff0c;无文档&#xff0c;无环境&#xff0c;无交接人&#xff0c;俗称三无。 运行设备的环境老&#xff0c;本地环境版本高&#xff0c;ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...

push [特殊字符] present

push &#x1f19a; present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中&#xff0c;push 和 present 是两种不同的视图控制器切换方式&#xff0c;它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...

接口自动化测试:HttpRunner基础

相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具&#xff0c;支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议&#xff0c;涵盖接口测试、性能测试、数字体验监测等测试类型…...

MinIO Docker 部署:仅开放一个端口

MinIO Docker 部署:仅开放一个端口 在实际的服务器部署中,出于安全和管理的考虑,我们可能只能开放一个端口。MinIO 是一个高性能的对象存储服务,支持 Docker 部署,但默认情况下它需要两个端口:一个是 API 端口(用于存储和访问数据),另一个是控制台端口(用于管理界面…...

OD 算法题 B卷【正整数到Excel编号之间的转换】

文章目录 正整数到Excel编号之间的转换 正整数到Excel编号之间的转换 excel的列编号是这样的&#xff1a;a b c … z aa ab ac… az ba bb bc…yz za zb zc …zz aaa aab aac…; 分别代表以下的编号1 2 3 … 26 27 28 29… 52 53 54 55… 676 677 678 679 … 702 703 704 705;…...