珊迪·奇克斯 - 博客园

2018年5月28日

摘要：在制作网格系统的时候，大家应该对 .col1~.col12 这样的印象较深。在 CSS 中你需要一个一个去书写，但在 Sass 中，可以使用 @for 循环来完成。在 Sass 的 @for 循环中有两种方式： $i 表示变量 start 表示起始值 end 表示结束值这两个的区别是关键字 thr 阅读全文

posted @ 2018-05-28 16:20 珊迪·奇克斯阅读(215) 评论(0) 推荐(0) 编辑

Sass-@if的使用

摘要： @if 指令是一个 SassScript，它可以根据条件来处理样式块，如果条件为 true 返回一个样式块，反之 false 返回另一个样式块。在 Sass 中除了 @if 之，还可以配合 @else if 和 @else 一起使用。假设要控制一个元素隐藏或显示，我们就可以定义一个混合宏，通过 @ 阅读全文

posted @ 2018-05-28 10:56 珊迪·奇克斯阅读(633) 评论(0) 推荐(0) 编辑

2018年5月26日

css3-box-sizing

摘要： CSS3 box-sizing 属性可以设置 width 和 height 属性中包含了 padding(内边距) 和 border(边框)。默认的css 宽度是： width(宽) + padding(内边距) + border(边框) = 元素实际宽度高度是：height(高) + padd 阅读全文

posted @ 2018-05-26 15:58 珊迪·奇克斯阅读(114) 评论(0) 推荐(0) 编辑

Sass字符运算

摘要：在 Sass 中可以通过加法符号“+”来对字符串进行连接。例如：编译出来的CSS：除了在变量中做字符连接运算之外，还可以直接通过 +，把字符连接在一起：编译出来的CSS: 注意，如果有引号的字符串被添加了一个没有引号的字符串（也就是，带引号的字符串在 + 符号左侧），结果会是一个有引号的字阅读全文

posted @ 2018-05-26 13:14 珊迪·奇克斯阅读(101) 评论(0) 推荐(0) 编辑

Sass-颜色运算

摘要：所有算数运算都支持颜色值，并且是分段运算的。也就是说，红、绿和蓝各颜色分段单独进行运算。如：计算公式为 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09，并且被合成为：如此编译出来的 CSS 为：算数运算也能将数字和颜色值一起运算，同样也是分段运算的。如：阅读全文

posted @ 2018-05-26 11:48 珊迪·奇克斯阅读(168) 评论(0) 推荐(0) 编辑

Sass-数字运算

摘要：在 Sass 运算中数字运算是较为常见的，数字运算包括前面介绍的：加法、减法、乘法和除法等运算。而且还可以通过括号来修改他们的运算先后顺序。和我们数学运算是一样的，一起来看个示例。编译出来的 CSS: 阅读全文

posted @ 2018-05-26 11:06 珊迪·奇克斯阅读(110) 评论(0) 推荐(0) 编辑

Sass-变量计算

摘要：在 Sass 中除了可以使用数值进行运算之外，还可以使用变量进行计算，其实在前面章节的示例中也或多或少的向大家展示了。在 Sass 中使用变量进行计算，这使得 Sass 的数学运算功能变得更加实用。一起来看一个简单的示例：阅读全文

posted @ 2018-05-26 11:04 珊迪·奇克斯阅读(242) 评论(0) 推荐(0) 编辑

Sass-除法

摘要： Sass的乘法运算规则也适用于除法运算。不过除了除法运算还有一个特殊之处。众所周知“/”符号在css中已作为一种符号使用,因此在sass中做除法运算时,直接使用"/" 符号作为除号时,将不会生效，编译时既得不到我们需要的效果,也不会报错。一起先来看简单的示例：这样的结果对于大家来说没有任何意义。要阅读全文

posted @ 2018-05-26 09:29 珊迪·奇克斯阅读(871) 评论(0) 推荐(1) 编辑

Sass-乘法

摘要： Sass 中的乘法运算和前面介绍的加法与减法运算还略有不同。虽然他也能够支持多种单位（比如 em ,px , %），但当一个单位同时声明两个值时会有问题。比如下面的示例：编译的时候报“20px*px isn't a valid CSS value.”错误信息。如果进行乘法运算时，两个值单位相同时阅读全文

posted @ 2018-05-26 08:58 珊迪·奇克斯阅读(239) 评论(0) 推荐(0) 编辑

2018年5月25日

Sass-减法

摘要： Sass 的减法运算和加法运算类似，我们通过一个简单的示例来做阐述：同样的，运算时碰到不同类型的单位时，编译也会报错，如：阅读全文

posted @ 2018-05-25 15:39 珊迪·奇克斯阅读(185) 评论(0) 推荐(0) 编辑

Sass-加法

摘要：程序中的运算是常见的一件事情，但在 CSS 中能做运算的，到目前为止仅有 calc() 函数可行。但在 Sass 中，运算只是其基本特性之一。在 Sass 中可以做各种数学计算（一）、加法加法运算是 Sass 中运算中的一种，在变量或属性中都可以做加法运算。如：但对于携带不同类型的单位时，在阅读全文

posted @ 2018-05-25 14:39 珊迪·奇克斯阅读(176) 评论(0) 推荐(0) 编辑

Sass值列表

摘要：所谓值列表 (lists) 是指 Sass 如何处理 CSS 中：或者：像上面这样通过空格或者逗号分隔的一系列的值。事实上，独立的值也被视为值列表——只包含一个值的值列表。阅读全文

posted @ 2018-05-25 13:40 珊迪·奇克斯阅读(125) 评论(0) 推荐(0) 编辑

Sass-字符串

摘要： JavaScript支持css的两种字符串类型：有引号字符串 (quoted strings)，如 "Lucida Grande" 、'http://sass-lang.com'；无引号字符串 (unquoted strings)，如 sans-serifbold。在编译 CSS 文件时不会改阅读全文

posted @ 2018-05-25 13:12 珊迪·奇克斯阅读(106) 评论(0) 推荐(0) 编辑

Sass-数据类型

摘要： Sass和JavaScript语言类似,也具有自己的数据类型,在Sass中包含一下几种数据类型数字：如，1，2，13，10px; 字符串：有引号字符串或无引号字符串,如,“foo”,"bar","baz"；颜色：如,blue、#04a3f9、rgba(255,0,0,0,5); 布尔值：如,t 阅读全文

posted @ 2018-05-25 11:16 珊迪·奇克斯阅读(131) 评论(0) 推荐(0) 编辑

Sass-注释

摘要：注释对于一名程序员来说，是极其重要，良好的注释能帮助自己或者别人阅读源码。在 Sass 中注释有两种方式，我暂且将其命名为： 1、类似 CSS 的注释方式，使用 ”/* ”开头，结属使用 ”*/ ”2、类似 JavaScript 的注释方式，使用“//” 两者区别，前者会在编译出来的 CSS 显示，阅读全文

posted @ 2018-05-25 10:53 珊迪·奇克斯阅读(126) 评论(0) 推荐(0) 编辑

keep

公告