sass - 随笔分类 - 借个火点烟

14：sass中数据类型的使用

摘要：sass中数据类型的使用 sass中的数据类型数字：1，2，3px 字符串："header"、footer 布尔值：false，true 空值：null 颜色： 000，red，rgba（0，255，0，0.5）值列表：1px 2px 3px 4px,Helvetica,Arial,sans s 阅读全文

posted @ 2016-04-27 10:51 借个火点烟阅读(161) 评论(0) 推荐(0)

13：sass中插值的使用

摘要：sass中插值的使用设置属性值可以使用字符串插进来 sass： @mixin set value($side,$value){ margin {$side}:$value; padding {$side}:$value; } .box{ @include set value(top,30px) c 阅读全文

posted @ 2016-04-27 10:44 借个火点烟阅读(281) 评论(0) 推荐(0)

12：sass中宏、继承以及占位符的比较

摘要：margin top: 10px; } .box1 span { display: inline block; margin top: 20px; } .box2 { margin top: 10px; } .box2 span { display: inline block; margin top 阅读全文

posted @ 2016-04-26 20:48 借个火点烟阅读(120) 评论(0) 推荐(0)

11：sass中占位符的使用

摘要：sass中占位符的使用 sass中的占位符%placeholder声明的代码，如果不被@extend调用，不会被编译到css中，从而不会形成冗余代码，而且编译出来的代码会合并到一起，推荐使用 sass %mt5{ margin top: 5px; } %pt5{ padding top: 5px; 阅读全文

posted @ 2016-04-26 20:32 借个火点烟阅读(362) 评论(0) 推荐(0)

10：sass中继承的使用

摘要：sass中继承的使用继承是通过关键词@extend来继承已存在的样式代码块，从而实现代码的继承 sass .btn{ border: 1px solid ccc; padding: 6px 10px; font size: 14px; } .btn primary{ background colo 阅读全文

posted @ 2016-04-26 20:24 借个火点烟阅读(761) 评论(0) 推荐(0)

9：sass中宏的使用

摘要：sass中Minxin的使用 Mixin有点像C语言的宏（macro），是可以重用的代码块。 sass 使用@minxin，定义一个代码块 @mixin left{ float: left; margin left: 10px; } 使用@include命令，调用这个mixin。 .box{ @in 阅读全文

posted @ 2016-04-26 20:15 借个火点烟阅读(518) 评论(0) 推荐(0)

8：sass中的嵌套

摘要：sass中嵌套的使用 1：选择器嵌套选择器嵌套会导致代码冗余，难以阅读，建议不要使用选择器嵌套 sass div { h1{ color: 000; } } nav a{ color: 00f; header &{ color: 0f0 } } css： div h1 { color: 000; 阅读全文

posted @ 2016-04-26 19:06 借个火点烟阅读(178) 评论(0) 推荐(0)

7：sass中的运算

摘要：sass中计算的使用运算在程序中是最常见的，css3中只有calc()可以使用，进行计算 "这是介绍calc的文章，刚兴趣的可以点击查看" sass中可以进行各种计算注意：运算符两侧最好有空格 1：加法加法运算可以在变量和属性中使用属性中使用 sass .box{ width:20px+8i 阅读全文

posted @ 2016-04-26 18:14 借个火点烟阅读(811) 评论(0) 推荐(0)

6: sass中的注释

摘要：sass中注释的使用 //单行注释不会编译到css /\ 多行注释会被编译到cs中，但是如果是压缩后的css，注释就不会编译到css中\ / /\ !多行重要注释，这种注释方式即便压缩代码，也会被编译到css，一般用来做版本，作者等信息的注释\ / 中文注释错误问题出现“局部”这个词时候，在win 阅读全文

posted @ 2016-04-26 13:45 借个火点烟阅读(1182) 评论(0) 推荐(0)

5：sass中的变量

摘要：之所以用sass，就是因为sass可以使用变量，函数等编程的概念 1：变量的声明 $width:100px 上面： $:变量生命符号 $width:变量名称 100px:变量值 2：变量的调用以下是Bootstrap中primaryButton的颜色的定义的使用 sass: $brand pri 阅读全文

posted @ 2016-04-26 12:01 借个火点烟阅读(259) 评论(0) 推荐(0)

4：sass的编译

摘要：把sass文件转化为css文件，就是sass的编译 Sass的编译：命令编译 GUI工具编译自动化编译编辑器编译在线编译 1：命令编译在终端通过sass指令；来编译sass 单文件编译 sass sass/style.sass:css/style.css 会在当前目录形成文件夹.sass 阅读全文

posted @ 2016-04-22 21:06 借个火点烟阅读(317) 评论(0) 推荐(0)

3：sass的安装

摘要：首先安装ruby ruby版本检查：ruby v gem版本检查：gem v gem类似于node里面的npm，是ruby的安装包管理器，利用gem来安装sass sass安装 gem install sass sass 测试版安装 gem install sass pre sass卸载 gem u 阅读全文

posted @ 2016-04-22 18:06 借个火点烟阅读(252) 评论(0) 推荐(0)

2：什么是sass？

摘要：sass诞生于2007年，是最早的css预处理语言，是采用ruby编写的，因此必须先安装ruby，在安装sass sass早期文件后缀是.sass，采用严格的缩进式语法，通过tab键来控制缩进，来源于ruby，没有大括号以及分号，所以早期不如less，但是后期sass改为scss，sass采用scs 阅读全文

posted @ 2016-04-22 17:38 借个火点烟阅读(377) 评论(0) 推荐(0)

1：什么是CSS预处理器？

摘要：css预处理器是一种专门的编程语言，进行web页面设计，然后在编译成正常的css文件，以供项目使用，预处理器为css增加一些编程的特性，不需要考虑浏览器的兼容性，在预处理语言里，可以使用变量、函数、逻辑判断等一些编程的语言的基本特性预处理有以下特点简洁可读性易于维护 css预处理语言：sas 阅读全文

posted @ 2016-04-22 17:10 借个火点烟阅读(252) 评论(0) 推荐(0)

随笔分类 - sass