sass的用法小结（四）进阶篇

【sass的用法小结（四）进阶篇】的更多相关文章

sass的用法小结（四）进阶篇

Sass 的数据类型 Sass 既然有了类似编程语言的功能,自然也就有了简单的数据类型.这里简单的介绍一些 Sass 中的数据类型,因为在后面的讨论中要用到有关的内容. Sass 中主要有六种数据类型: 数字型 (e.g. 1.2, 13, 10px) 文本型,单引号.双引号或者不加都可以 (e.g. “foo”, ‘bar’, baz) 颜色值类型 (e.g. blue, #04a3f9, rgba(255, 0, 0, 0.5)) 布尔值 (e.g. true, false) nulls (…

sass的用法小结（三）

5. 混合器; 如果你的整个网站中有几处小小的样式类似(例如一致的颜色和字体),那么使用变量来统一处理这种情况是非常不错的选择.但是当你的样式变得越来越复杂,你需要大段大段的重用样式的代码,独立的变量就没办法应付这种情况了.你可以通过sass的混合器实现大段样式的重用. 混合器使用@mixin标识符定义.看上去很像其他的CSS @标识符,比如说@media或者@font-face.这个标识符给一大段样式赋予一个名字,这样你就可以轻易地通过引用这个名字重用这段样式.下边的这段sass代码,定义了一…

sass的用法小结（一）

1. 使用变量; sass让人们受益的一个重要特性就是它为css引入了变量.你可以把反复使用的css属性值定义成变量,然后通过变量名来引用它们,而无需重复书写这一属性值.或者,对于仅使用过一次的属性值,你可以赋予其一个易懂的变量名,让人一眼就知道这个属性值的用途. sass使用$符号来标识变量(老版本的sass使用!来标识变量.改成$是多半因为!highlight-color看起来太丑了.),比如$highlight-color和$sidebar-width.为什么选择$ 符号呢?因为它好认…

sass的用法小结（二）

3. 导入SASS文件; css有一个特别不常用的特性,即@import规则,它允许在一个css文件中导入其他css文件.然而,后果是只有执行到@import时,浏览器才会去下载其他css文件,这导致页面加载起来特别慢. sass也有一个@import规则,但不同的是,sass的@import规则在生成css文件时就把相关文件导入进来.这意味着所有相关的样式被归纳到了同一个css文件中,而无需发起额外的下载请求.另外,所有在被导入文件中定义的变量和混合器(参见2.5节)均可在导入文件中使用. 使…

css预编译--sass进阶篇

基础篇中主要介绍了一些sass的基本特性,进阶篇中,主要是写一些我们常用的sass控制命令,函数和规则. 控制命令可能看过基础篇的朋友会发现在有些代码中出现@if @else @each等,熟悉JS条件语句和循环的朋友会比较了解这些控制命令的功能所在,这些控制命令是 sass 的一个重要组成部分. @if,@else @if @else是一个简单的根据条件来处理样式块的SassScript,如果if的条件是true那么就调用if的样式块,否则就调用else的样式块,一个简单的代码示例 @mix…

Sass进阶之路,之二(进阶篇)

Sass之二(进阶篇) 1. 数据类型 1.1 Number 数字类型,小数类型,带有像素单位的数字类型,全部都属于Number类型 Number类型详情请点击这里,下面是小例子 1.$n1: 1.2;2.$n2: 12;3.$n3: 14px;4.$n4: 1em; 1.2 String 不加双引号的,加双引号的,加单引号的全部都属于String类型 String类型详细内容请点击这里, 下面是小demo 1.$s1: container;2.$s2: 'container';3.$s3: "…