Sass
文章平均质量分 72
大前小白
哪有什么天才!
坚持做自己喜欢做的事情,这本身就是一种天赋。
展开
-
SVG的坐标系统
在开始学习如何绘图之前,我们先来看一下 SVG 的坐标系统。与很多计算机绘图所使用的坐标系统一样,SVG 也使用了网格坐标系统。这种坐标和我们以前在数学中学过的坐标有些不同。数学中的坐标是由 x 轴(水平横向延伸)和 y 轴(垂直纵向延伸)交织组成,交点被称为坐标原点 (0,0) 。原点沿 x 轴向右为正值,反之为负值,沿 y 轴向上为正值,反之为负值。而 SVG 网格坐标系统的特点如下所示:以左上角为坐标系的原点,即 (0,0)。横向延伸为 X 轴正方向, x 坐标逐渐增大。纵向为 Y 轴正方向原创 2021-01-14 17:38:25 · 971 阅读 · 0 评论 -
SVG介绍
什么是 SVG 呢?SVG 是 Scalable Vector Graphics 的首字母缩写,翻译成中文表示可缩放矢量图形。可缩放我们知道,那矢量图形又是什么呀,矢量图也称为面向对象的图像或绘图图像,在数学上定义为一系列由线连接的点。矢量文件中的图形元素称为对象,每个对象都是一个自成一体的实体,它具有颜色、形状、大小、轮廓、和屏幕位置等属性。SVG 是 W3C 推出的基于 XML 的二维矢量图形标准,也就是一种用于描述二维的矢量图形。SVG 可以提供高质量的矢量图形渲染,同时由于支持 JavaScri原创 2021-01-12 11:34:31 · 409 阅读 · 0 评论 -
Sass 字符串函数
Sass 中定义了各种类型的函数,其中大部分函数我们可以通过 CSS 语句直接调用。下面是 Sass 中的函数分类:字符串函数数字函数列表函数映射函数选择器函数Introspection函数颜色值函数本节我们先来学习字符串相关函数。字符串函数有哪些Sass 中的字符串函数用于处理字符串并获取相关信息。有一点需要注意,一般编程语言中字符串的索引都是从 0开始的,但是注意哟,Sass 中字符串的索引是从 1 开始的。Sass 字符串函数如下所示:函数描述quote原创 2021-01-06 13:32:36 · 281 阅读 · 1 评论 -
Sass 循环语句
本节我们学习 Sass 中的循环语句,Sass 中的循环语句可以使用 @for 指令和 @while 指令来实现。@for指令@for 指令可以用于循环生成样式,@for 指令有两种类型,如下所示:// 第一种@for $i from <start> through <end> // 第二种@for $i from <start> to <end>其中 $i 表示变量,start 表示起始值,end 表示结束值。其实这两种方式的区别就在原创 2021-01-04 11:23:56 · 3102 阅读 · 0 评论 -
Sass 条件语句
本节我们来学习 Sass 中的条件语句,可以使用 @if 指令来判断条件表达式的值,然后控制输出。Sass 中的 @if、@else 等指令和 JS 中的 if/else 类似。@if 指令当 @if 指令后面的表达式返回值为 true 时,输出花括号中的代码,为 false 则不输出。示例:下面例子中,定义了一个变量 $num,使用 @if 指令来判断变量的值,当变量值为 1 时,输出字体颜色为 #ee78da,当变量值为 2 时,输出字体颜色为 #65e3e7:$num:1;h3{原创 2020-12-29 11:51:26 · 1809 阅读 · 0 评论 -
Sass @media指令
本节我们学习 Sass 中的 @media 指令,@media 指令用于设置样式规则到不同的媒体类型,这和 CSS 的使用规则差不多,但是它还有一点不同,就是 @media 指令可以嵌套在 Sass 选择器中。有点类似于 JS 冒泡功能,它会冒泡到样式表的顶层。@media指令的使用示例:.xkd{ width: 300px; height: 100px; @media screen and (orientation: portrait) { width: 500p原创 2020-12-24 10:41:35 · 759 阅读 · 0 评论 -
Sass 延伸
本节我们学习 Sass 中的延伸,也可以理解为继承。在 Sass 中,我们可以通过 @extend 指令来实现将一个选择器中的样式继承到另一个选择器中。特别是当选择器中样式几乎差不多,只有一点区别的时候,使用 @extend 就很有用啦。延伸的使用下面我们来通过一个例子看一下延伸的具体使用。例如我们在网页中是不是经常会看到有不同颜色的按钮呀,这些按钮除了背景颜色不同,其他样式都几乎一样。这种情况下,我们肯定不会重复定义多个样式,而是单独定义一个公共样式,再分别定义不同颜色样式属性。示例例如我们通原创 2020-12-21 10:06:48 · 64 阅读 · 0 评论 -
Sass 带参混合
本节我们来学习带参混合,Sass 中混合可以接受参数,我们可以通过使用 @include 调用混合时给混合传参,来定义混合生成的精确样式。给混合传参混合可以用 SassScript 值作为参数,给定的参数被包括在混合中并且作为为变量提供给混合,既然是作为变量,那么定义参数时,参数名前面需要加一个 $ 符号。当我们定义一个带参混合时,混合的参数被作为变量名,写到混合名后面的小括号中,如果带有多个参数则通过逗号将参数分隔。下面我们来看一下如何给一个混合传参。示例:例如在混合中定义两个参数 $num 和原创 2020-12-18 10:04:38 · 226 阅读 · 0 评论 -
Sass混合的使用
本节我们学习 Sass 中的混合,Sass 中的混合是通过 @mixin 指令来定义的,混合允许我们定义可以在整个样式表中重复使用的样式,避免使用无语意的类。混合可以包含所有的 CSS 规则和任何其他在 Sass 文档中被允许使用的内容。定义混合Sass 中可以通过 @mixin 指令定义混合,@mixin 后面接混合的名称和可选的 arguments 参数,以及混合的内容块。示例:例如创建一个名为 my-text 的混合:@mixin my-text { font-size: 12px;原创 2020-12-16 16:15:41 · 222 阅读 · 0 评论 -
Sass的运算
本节我们学习 Sass 中的运算,一般的编程语法中都支持使用运算,Sass 中同样可以做各种数学运算,包括最基本的加减乘除运算、变量运算、颜色运算、字符运算等。本节我们主要讲一下 Sass 中最基本的数学运算。加法运算加法运算 + 是 Sass 中基本运算之一,在变量或者属性中都可以做加法运算。示例:$num:14px;.xkd{ width:50px + 50px; font-size: $num + 4px;}编译成 CSS 代码:.xkd { width: 100原创 2020-12-08 10:07:16 · 190 阅读 · 0 评论 -
Sass的数据类型
Sass 语言中支持的数据类型有下面几种:numbers:表示整数类型。strings:在单引号 '' 或双引号 "" 内定义的字符序列。booleans:布尔类型,有 true 和 false 两个值。colors:用于定义颜色值。nulls:指定空值,是未知数据。lists:值列表类型,表示由空格或逗号分隔的值。maps:从一个值映射到另一个值。numbers 类型数字在 CSS 中应用的很广泛,大多数都是结合单位一起使用的,但是在技术上依然算是数字。例如字体大小、长高、外边距内边原创 2020-12-03 11:22:29 · 372 阅读 · 0 评论 -
Sass中如何导入文件
在 CSS 中我们可以通过 @import 指令将一个 css 文件导入到另一个 css 文件中。但是它有一个需要注意的地方,就是只有执行到 @import 指令时,浏览器才会去下载其他 css 文件,这导致页面加载起来特别慢,所以并不太常用。而 Sass 语言中同样支持 @import 指令的使用,并且与 CSS 中有一些区别,下面我们来看一下 Sass 中是如何使用 @import 指令导入文件的。Sass 导入文件Sass 中也有一个 @import 规则,但是与 CSS 有一些不同,CSS 中原创 2020-11-30 11:30:45 · 3336 阅读 · 0 评论 -
Sass 嵌套规则
本节我们学习 Sass 中的嵌套,嵌套大家应该不陌生,在 HTML 中就支持标签的嵌套。Sass 中允许一个 CSS 样式嵌套进另一个样式中,内层样式仅适用于外层样式的选择器范围内。示例:例如下面这段 CSS 代码:.big { color: #ccc;}.big .small { font-size: 14px;}如果我们要使用 Sass 中的嵌套语法来写,如下所示:从上图我们可以看到,嵌套的语法其实很简单,相较于 CSS 语言中后代选择器的写法,嵌套规则看起来要直观很多。使原创 2020-11-27 11:43:32 · 883 阅读 · 0 评论 -
Sass 变量的声明与使用
什么是变量呢? Sass 中的变量可以用来存储一些信息,并且重复使用。变量可以存储的信息包括字符串、数字、布尔值、颜色值等等。声明变量Sass 中声明变量需要用到 $ 符号,格式为:$变量名: 变量值;示例:例如下面我们定义一个变量,并给这个变量赋了一个颜色值:$color:red;.xkd{ color: $color; a{ background-color: $color; }}执行编译命令,编译后的 CSS 代码如下所示:.xkd {原创 2020-11-25 11:21:16 · 726 阅读 · 0 评论 -
Sass的语法介绍
本节我们来学习 Sass 的语法,Sass 支持两种语法,分别为 SCSS (Sassy CSS)和缩进语法(Indented Sass)。缩进语法缩进语法是 Sass 的原始语法,文件的扩展名为 .sass,所以有时候简称为 ”Sass“。缩进语法支持与 SCSS 相同的所有特性,但是它使用缩进而不是花括号 {} 来表示选择器的嵌套,使用换行而不是分号来分隔属性。下面我们来看一下缩进的语法格式。示例:创建一个 style.sass 文件,内容如下所示.xkd font-size: 14原创 2020-11-23 17:51:44 · 246 阅读 · 0 评论 -
如何将Sass编译成CSS
本节我们来学习 Sass 的编译,我们写好的 Sass 代码,浏览器是不能识别的,Sass 只不过是作为一个预处理工具,只有将 Sass 代码编译成 CSS 代码后,才能够使用。那么 Sass 要如何编译成 CSS 代码呢,这就是我们本节需要讲到的内容。Sass 的编译方法有很多,例如:命令行编译模式:比较简单,可以直接在终端中输入 Sass 指令来编译,本节我们主要讲命令行编译模式的使用。GUI工具编译:有的比较多的看一工具有 Koala、CodeKit、Scout、Compass.app 等,这原创 2020-11-18 17:54:24 · 2111 阅读 · 0 评论 -
Sass 安装
由于 Sass 是基于 Ruby 语言开发而成,因此安装 Sass 前需要安装 Ruby,Mac 下自带 Ruby,所以不需要安装。Ruby 是一种简单快捷的面向对象程序设计的脚本语言,它由日本的松本行弘创建于1993年。Ruby 的特性与 Smalltalk、Perl 和 Python 类似。安装Ruby首先我们需要在官网下载 Ruby ,官网地址:https://rubyinstaller.org/downloads/。然后根据下载建议,我们可以选择 Ruby + Devkit 2.6.6-1(x原创 2020-11-16 11:04:35 · 341 阅读 · 0 评论 -
Sass 简介
什么是SassSass 是 Syntactically Awesome Stylesheets 的简写,是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。Sass 是一个将脚本解析成 CSS 的脚本语言(SassScript),也是一款 CSS 预处理器,它减少了 CSS 的重复,也因此节省了时间。Sass 是最早的 CSS 预处理语言,有比 Less 更强大的功能。Sass 扩展了 CSS3,增加了规则、变量、混入选择器、继承等特性。什原创 2020-11-12 11:45:02 · 1936 阅读 · 0 评论 -
Sass颜色
Sass 颜色函数我们可以将Sass中的颜色函数分为三部分:设置颜色函数获取颜色函数操作颜色函数函数(功能)描述rgb(red , green , blue)使用红-绿-蓝(RGB)模型设置颜色,rgb颜色值指定为:rgb(红色、绿色、蓝色)。 ...原创 2019-12-11 09:55:51 · 199 阅读 · 0 评论 -
Sass Introspection
Sass 自省函数在构建样式表时很少使用内省函数,但是如果某些东西不能正常工作,比如调试函数,那么它们是有价值的。下面是关于Sass 中所有自省函数的一个相关整理:函数(功能)描述call(function , arguments…)使用参数调用函数,并返回结果。content-exists()检查当前sass实现是否支持此功能。feature-exist...原创 2019-12-10 09:59:17 · 76 阅读 · 0 评论 -
Sass 选择器
Sass 选择器函数常用于检查和操作选择器。下面是关于所有选择器函数的一个相关列表:函数(功能)描述is-superselector(super , sub)检查超级选择器是否匹配子匹配的所有元素。selector-append(selectors)将第二个(和第三个/第四个等)选择器附加到第一个选择器。selector-extend(selector ,...原创 2019-12-09 10:05:16 · 173 阅读 · 0 评论 -
Sass 映射
Sass 映射函数在Sass中,映射数据函数表示一个或者是多个键值对。它同样也是不可改变的,因此map函数返回一个map,将返回一个新的map而不会更改原始的map。下面是关于所有的映射函数的一个相关列表:函数(功能)描述map-get(map , key)返回映射中指定键的值。map-has-key(map , key)检查映射是否具有指定的键,返回true或...原创 2019-12-06 09:42:21 · 86 阅读 · 0 评论 -
Sass 列表
Sass 列表函数常用于访问列表中的值,合并列表和向列表中添加项。Sass 列表是不可变的(也就是不能更改),因此,我们在返回列表的list函数时将会返回一个新列表,而不会更改原始列表。Sass 列表是基于1的,列表中的第一个列表项位于索引1而不是0。下面是关于所有列表函数的一个相关整理:函数(功能)描述append(list , value, [separator]...原创 2019-12-05 10:14:01 · 137 阅读 · 0 评论 -
Sass数值
Sass数值函数数值函数常用于处理数值。下面是关于所有数值函数的一个相关列表:函数(功能)描述abs(number)返回数字的绝对值ceil(number)将数字向上舍入到最接近的整数comparable(num1, num2)返回num1和num2是否可比较floor(number)将数字向下舍入到最接近的整数max(number…)返...原创 2019-12-04 09:59:10 · 88 阅读 · 0 评论 -
Sass 字符串
字符串函数常用于操作和获取有关字符串的信息,字符串是基于1的,字符串中的第一个字符是位于索引1而不是0。下面是关于所有字符串函数的一个相关列表:函数(功能)描述quote(string)向字符串添加引号,并返回结果str-index(string , substring)返回字符串中第一个出现的子字符串的索引str-insert(string , inse...原创 2019-12-03 10:28:18 · 211 阅读 · 0 评论 -
Sass延伸
Sass 颜色函数我们可以将Sass中的颜色函数分为三部分:设置颜色函数获取颜色函数操作颜色函数设置颜色函数More Actions函数(功能)描述rgb(red , green , blue)使用红-绿-蓝(RGB)模型设置颜色,rgb颜色值指定为:rgb(红色、绿色、蓝色)。 ...原创 2019-12-02 11:16:36 · 143 阅读 · 0 评论 -
Sass Introspection
Sass 自省函数在构建样式表时很少使用内省函数,但是如果某些东西不能正常工作,比如调试函数,那么它们是有价值的。下面是关于Sass 中所有自省函数的一个相关列表:函数(功能)描述call(function , arguments…)使用参数调用函数,并返回结果。content-exists()检查当前mixin是否传递了@content块。feature...原创 2019-11-29 09:48:25 · 118 阅读 · 0 评论 -
Sass 选择器
Sass 选择器函数常用于检查和操作选择器。下面是关于所有选择器函数的一个相关列表:函数(功能)描述is-superselector(super , sub)检查超级选择器是否匹配子匹配的所有元素。selector-append(selectors)将第二个(和第三个/第四个等)选择器附加到第一个选择器。selector-extend(selector ,...原创 2019-11-28 09:53:10 · 1196 阅读 · 0 评论 -
Sass 映射
Sass 映射函数在Sass中,映射数据函数表示一个或者是多个键值对。它同样也是不可改变的,因此map函数返回一个map,将返回一个新的map而不会更改原始的map。下面是关于所有的映射函数的一个相关列表:函数(功能)描述map-get(map , key)返回映射中指定键的值。map-has-key(map , key)检查映射是否具有指定的键,返回true或...原创 2019-11-27 10:04:35 · 116 阅读 · 0 评论 -
Sass列表
Sass 列表函数常用于访问列表中的值,合并列表和向列表中添加项。Sass 列表是不可变的(也就是不能更改),因此,我们在返回列表的list函数时将会返回一个新列表,而不会更改原始列表。Sass 列表是基于1的,列表中的第一个列表项位于索引1而不是0。下面是关于所有列表函数的一个相关表格:函数(功能)描述append(list , value, [separator]...原创 2019-11-26 09:47:39 · 203 阅读 · 0 评论 -
Sass 数值
数值函数常用于处理数值。下面是关于所有数值函数的一个相关列表:函数(功能)描述abs(number)返回数字的绝对值ceil(number)将数字向上舍入到最接近的整数comparable(num1, num2)返回num1和num2是否可比较floor(number)将数字向下舍入到最接近的整数max(number…)返回几个数字中的最高...原创 2019-11-25 09:58:52 · 119 阅读 · 0 评论 -
Sass 字符串
字符串函数常用于操作和获取有关字符串的信息,字符串是基于1的,字符串中的第一个字符是位于索引1而不是0。下面是关于所有字符串函数的一个相关列表:函数(功能)描述quote(string)向字符串添加引号,并返回结果str-index(string , substring)返回字符串中第一个出现的子字符串的索引str-insert(string , inse...原创 2019-11-22 10:06:02 · 168 阅读 · 0 评论 -
Sass延伸
样式继承 @extend在设计网页的时候常常遇到这种情况:一个元素使用的样式与另一个元素完全相同,但又添加了额外的样式。通常会在 HTML 中给元素定义两个 class,一个通用样式,一个特殊样式。比如下面的普通错误样式和严重错误样式的对比: // HTML 代码 <div class="error seriousError"> 样式继承 @extend...原创 2019-11-21 10:18:20 · 83 阅读 · 0 评论 -
Sass 混合
混合指令(Mixin)用于定义可以重复使用的样式,避免了使用无语意的 class。它可以包含所有的 CSS 规则,绝大部分 Sass 规则,甚至通过功能引入变量,输出多样化的样式。定义混合指令混合指令的用法是在 @mixin 后添加名称与样式 。混合也需要包含选择器和属性,甚至可以用 & 引用父选择器。 // 正常定义使用 @mixin large-text { ...原创 2019-11-20 11:19:48 · 391 阅读 · 0 评论 -
Sass 导入
Sass 使 CSS代码保持DRY(也就是不要重复),编写代码的一种方式是将相关的代码保存在单独的文件中,我们可以创建带有CSS片段的小文件,以包含在其他Sass文件中,比如:重置文件、变量、颜色、字体或者是字体大小等等。导入文件与CSS一样,Sass也支持 @import 指令,它允许我们将一个文件的内容包含在另一个文件中,但是由于性能问题,CSS指令有一个缺点是我们每一次调用都会创建一个额...原创 2019-11-19 10:08:53 · 247 阅读 · 0 评论 -
Sass 嵌套
嵌套规则Sass 允许我们将以与html相同的方式嵌套css选择器,将一套 CSS 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器,比如:// .scss语法#main { width: 97%; p, div { font-size: 2em; a { font-weight: bold; } } pre { f...原创 2019-11-15 10:43:50 · 159 阅读 · 0 评论 -
Sass 变量
Sass变量变量是存储稍后再使用的信息的一种方式,有了存储空间,您可以将信息存储在变量中,比如:字符串(strings)数字(numbers)颜色(colors)布尔运算(booleans)列表(lists)空值(nulls)Sass使用 $ 符号后跟一个名称来声明变量。变量语法:$variablename: value; // HTML 部分 <h1&g...原创 2019-11-14 14:00:45 · 252 阅读 · 0 评论 -
Sass安装
Sass的系统需求操作系统 - Sass是独立于平台的浏览器支持 - Sass在Edge/IE(来自IE 8)、Frefox、Chrome、Safari、Opera中工作编程语言 - Sass基于RubySass官方网站:https://sass-lang.com/安装Sass当我们在命令行上安装Sass时,我们需要将能够运行的Sass可执行文件来将 .sass 和 .scss 文...原创 2019-11-12 13:55:56 · 349 阅读 · 0 评论 -
Sass 简介
概念Sass由hampton catlin设计,natalie weizenbaum于2006年开发,它可以免费下载和使用。Sass是一个将脚本解析成CSS的脚本语言(SassScript),也是一款CSS预处理器,它减少了CSS的重复,也因此节省了时间。Sass 是对CSS3(层叠样式表)的语法的一种扩充 Sass ,扩展了 CSS3,增加了规则、变量、混入、选择器、继承等属性,生成了良好...原创 2019-11-11 13:22:58 · 340 阅读 · 0 评论