2019年11月_大前小白

原创 Sass Introspection

Sass 自省函数在构建样式表时很少使用内省函数，但是如果某些东西不能正常工作，比如调试函数，那么它们是有价值的。下面是关于Sass 中所有自省函数的一个相关列表：函数（功能）描述call(function , arguments…)使用参数调用函数，并返回结果。content-exists()检查当前mixin是否传递了@content块。feature...

2019-11-29 09:48:25 130

原创 Sass 选择器

Sass 选择器函数常用于检查和操作选择器。下面是关于所有选择器函数的一个相关列表：函数（功能）描述is-superselector(super , sub)检查超级选择器是否匹配子匹配的所有元素。selector-append(selectors)将第二个（和第三个/第四个等）选择器附加到第一个选择器。selector-extend(selector ,...

2019-11-28 09:53:10 1215

原创 Sass 映射

Sass 映射函数在Sass中，映射数据函数表示一个或者是多个键值对。它同样也是不可改变的，因此map函数返回一个map，将返回一个新的map而不会更改原始的map。下面是关于所有的映射函数的一个相关列表：函数（功能）描述map-get(map , key)返回映射中指定键的值。map-has-key(map , key)检查映射是否具有指定的键，返回true或...

2019-11-27 10:04:35 131

原创 Sass列表

Sass 列表函数常用于访问列表中的值，合并列表和向列表中添加项。Sass 列表是不可变的（也就是不能更改），因此，我们在返回列表的list函数时将会返回一个新列表，而不会更改原始列表。Sass 列表是基于1的，列表中的第一个列表项位于索引1而不是0。下面是关于所有列表函数的一个相关表格：函数（功能）描述append(list , value, [separator]...

2019-11-26 09:47:39 220

原创 Sass 数值

数值函数常用于处理数值。下面是关于所有数值函数的一个相关列表：函数（功能）描述abs(number)返回数字的绝对值ceil(number)将数字向上舍入到最接近的整数comparable(num1, num2)返回num1和num2是否可比较floor(number)将数字向下舍入到最接近的整数max(number…)返回几个数字中的最高...

2019-11-25 09:58:52 131

原创 Sass 字符串

字符串函数常用于操作和获取有关字符串的信息，字符串是基于1的，字符串中的第一个字符是位于索引1而不是0。下面是关于所有字符串函数的一个相关列表：函数（功能）描述quote(string)向字符串添加引号，并返回结果str-index(string , substring)返回字符串中第一个出现的子字符串的索引str-insert(string , inse...

2019-11-22 10:06:02 200

原创 Sass延伸

样式继承 @extend在设计网页的时候常常遇到这种情况：一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式。通常会在 HTML 中给元素定义两个 class，一个通用样式，一个特殊样式。比如下面的普通错误样式和严重错误样式的对比： // HTML 代码 <div class="error seriousError"> 样式继承 @extend...

2019-11-21 10:18:20 103

原创 Sass 混合

混合指令（Mixin）用于定义可以重复使用的样式，避免了使用无语意的 class。它可以包含所有的 CSS 规则，绝大部分 Sass 规则，甚至通过功能引入变量，输出多样化的样式。定义混合指令混合指令的用法是在 @mixin 后添加名称与样式。混合也需要包含选择器和属性，甚至可以用 & 引用父选择器。 // 正常定义使用 @mixin large-text { ...

2019-11-20 11:19:48 429

Sass 使 CSS代码保持DRY（也就是不要重复），编写代码的一种方式是将相关的代码保存在单独的文件中，我们可以创建带有CSS片段的小文件，以包含在其他Sass文件中，比如：重置文件、变量、颜色、字体或者是字体大小等等。导入文件与CSS一样，Sass也支持 @import 指令，它允许我们将一个文件的内容包含在另一个文件中，但是由于性能问题，CSS指令有一个缺点是我们每一次调用都会创建一个额...

2019-11-19 10:08:53 285

原创 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 173

原创 Sass 变量

Sass变量变量是存储稍后再使用的信息的一种方式，有了存储空间，您可以将信息存储在变量中，比如：字符串（strings）数字（numbers）颜色（colors）布尔运算（booleans）列表（lists）空值（nulls）Sass使用 $ 符号后跟一个名称来声明变量。变量语法：$variablename: value; // HTML 部分 <h1&g...

2019-11-14 14:00:45 285

原创 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 392

原创 Sass 简介

概念Sass由hampton catlin设计，natalie weizenbaum于2006年开发，它可以免费下载和使用。Sass是一个将脚本解析成CSS的脚本语言（SassScript），也是一款CSS预处理器，它减少了CSS的重复，也因此节省了时间。Sass 是对CSS3（层叠样式表）的语法的一种扩充 Sass ，扩展了 CSS3，增加了规则、变量、混入、选择器、继承等属性，生成了良好...

2019-11-11 13:22:58 365

天空之外