代码家

标签： Responsive

  • Responsive系列之知识储备 – Media Query – 熊孩子的故事

    Media Query

    1、Media Query是什么？

    Media Query 是CSS3中用来查询设备类型(Media Type)，并且通过条件语句，加载满足条件的样式表。

    2、关于设备类型：

    –Media Query可以检测出以下设备–

    设备名称 指代
    all 匹配所有设备
    braille 匹配触觉反馈设备
    embossed 凸点字符印刷设备
    handheld 手持设备（尤其是小屏幕，有限带宽，不过注意：现在的Android，iPhone都不是Handheld设备，他们都是screen设备。所以，不要试图用handheld来识别iphone或者ipad,android等设备）PSP,NDS这种规格一般可以叫作Handheld，不过没有测试过，如有疏漏还请指正）
    print 打印机设备
    projection 投影仪设备
    screen 彩色计算机显示器设备
    speech 语音合成器设备
    tty 栅格设备（终端，或者电传打字机）
    tv 电视设备

    3、Media Query的语法：

    用法1：

    @media 设备类型 { //…满足该设备条件的css属性… }

    用法2：

    [逻辑表达式only或者not] 设备类型{ …//如果逻辑表达式是only：代表只有这一种设备，调用如下css …//如果逻辑表达式是not : 代表除此之外的设备，调用如下css }

    用法3：

    @media [逻辑表达式only或者not] 设备类型 [and 设备特征表达式]{ …//用法3比用法2多了一个[and 媒体特征表达式]，@media的强大之处在于， …//他不但能选择设备类型，还能对设备的不同配置（如屏幕宽度，色彩等的）进行选择。 //（这就是设备特征表达式所做的事情） …//这个用法，就是对相同设备的不同属性进行选择，而后条用满足条件的css表达式 …//现在你可能还不明白[and 媒体特征表达式]，不过没有关系，后面我将认真介绍 //媒体特征表达式的用法，你一定会惊叹@media query的强大。 }

    用法4：

    @media 设备特征表达式 | 设备特征表达式 |….{ …//满足所给出的媒体特征表达式后，调用以下css代码块 …//注意：只要满足设备特征就可以了，不一定要是相同设备。 }

    下面，我们用一个例子，来一步一步介绍这四种表达式的用法。

    熊孩子的故事

    想想这一种场景，你开发了个小有名气的在线阅读网站，不过后来有小孩子吐槽说：“我常常在NDS上看电子书，能不能在NDS上，将背景变为深色，字变成白色，夜里看小说，背景太亮很刺眼。”
    这时，你有两种做法：
    1、对设备UA进行检测，完全为NDS重新做一个适合手机的站点。（这是传统的做法，虽然现在多数站点都在用，在现在看来，很不聪明了！）
    2、利用css3的强大特性，轻松完成（我们当然要选择这种聪明些的做法！）
    让我们来考虑考虑实现思路：

    首先利用media query检查是否是手持设备 如果是： 背景为黑色，字为白色 如果不是： 不做处理

    我们现在来看media query的第一种用法：

    @media 设备类型 { //…满足该设备条件的css属性… }

    用法1正好符合我们在此情形下的筛选条件，那么我们书写的css如下：

    @media handheld{ body{ color:white; background-color:black; } }

    我们的html页面便类似这个样子：

    代码家
    我们来测试Handheld，手持设备和screen显示器设备。

    用chrome打开该html，发现如下图：

    好像没有看到黑底白字啊？当然啦，你现在是在用电脑显示器来访问的页面，也就是满足了screen设备特征，handheld设备所书写的css都被忽略了。

    那我们要如何测试在手持设备中的样式呢？难道一定要用NDS访问么，可是我没有NDS啊?！
    当然不是，我们这里要用Chrome的一个设置功能，来覆盖一些属性，模拟手持设备，按照如下操作，便可以调用Chrome中模拟各种设备的功能。
    1.首先，点击右键->审查元素

    2.而后，在弹出的控制窗口中，点下设置按钮

    3.左上角切到overrides中，寻找Emulate选项，勾上后，选中HandHeld，你就会惊奇的发现，网页整个变了个风格。正如我们预期的那样，黑底白字。

    做到此处，是否已经对media query有些了解，而且有很强的成就感，不过先按捺住不要激动，这才是media query功能的一部分，还有一些更为实用的用法还没有接触到。还需慢下心来继续看下去。

    后来，过了一段时间，上次的那个小盆友又发来吐槽反馈，说：“哈哈哈哈，我买了个iPad2，可是我发现iPad2在横屏看书的时候字体有点儿小啊，能不能在横屏的时候把字改大一点儿？”。
    这时候，技术人员抓狂了，这可怎么改啊，iPad2也是screen设备，电脑显示器也是screen设备？！ 让我怎么识别！

    冷静

    我们下面介绍的东西就能很好的处理这种情形：那就是 设备特征表达式

    设备特征表示 看起来是是这个样子的：设备特征：设备特征值

    留意一下用法3：

    @media [逻辑表达式only或者not] 设备类型 [and 设备特征表达式]{ …//我们现在就要用用法3来识别iPad2 }

    现在考虑一下，虽然iPad2和电脑显示器都是screen设备，可是他们之间还是有不同之处的。比如说，ipad是有横屏特征的设备，电脑却没有。
    这个问题先搁浅到这里，我们先来研究一下设备表达式究竟是什么，等弄懂后，你自然就知道该怎么做了。

    前面说到过，media query是可以识别设备特征的，可是设备特征是什么？想想，屏幕宽度算不算设备特征？设别分辨率算不算设备特征呢？设备色彩支持情况，横竖屏情况？
    没错，这些都是我们在使用电子设备时候的设备特征。Media query支持很多种设备特征的识别属性。

    媒体特性 说明/值 可用媒体类型 接受min/max
    width 长度正数值(单位一般为px下同) 视觉屏幕/触摸设备 是
    heigth 长度正数值 视觉屏幕/触摸设备 是
    device-width 长度正数值 视觉屏幕/触摸设备 是
    device-heigth 长度正数值 视觉屏幕/触摸设备 是
    orientation 设备手持方向(portait横向/landscape竖向) 位图介质类型 否
    aspect-ratio 浏览器、纸张长宽比 位图介质类型 是
    device-aspect-ratio 设备屏幕长宽比 位图介质类型 是
    color 颜色模式（例如旧的显示器为256色）整数 视觉媒体 是
    color-index 颜色模式列表整数 视觉媒体 是
    monochrome 整数 视觉媒体 是
    resolution 解析度 位图介质类型 是
    scan progressive逐行扫描/interlace隔行扫描 电视类 否
    grid 整数，返回0或1 栅格设备 否

    扫了一眼表格发现不明白min/max？没有关系，后面会说到。
    这张表格来自：zzjyingzi，尊重原创，转载请保留。

    留意一下那个蓝色的orientation,这不正是我们可以用来识别ipad横屏的状态么？

    我们在原来的html中加上：

    @meida screen and (orientation:landscape){ font-size:25px; }

    这样，你可以测试一下，在ipad横屏时。会正如我们所预料的那样，25px字体展示。一切都太完美了。
    在此之前，你或许需要用js去获取，而后调整属性。现在，只需简单几行就能实现，css3的强大之处当然不止如此，以后我也会给大家介绍更多关于css3的新特性。

    正在我们说话之际，小盆友又发来消息：“我最近买了个iPhone，我也要黑底白字，保护眼睛。”

    我想你也猜到了，我们这次需要识别的是同为screen设备的iPhone….

    Here we go!

    先来考虑iPhone与台式机显示器的不同之处：最大的区别就是屏幕大小。

    那我们这次就要介绍一个属性，device-width，指代的是设备的宽度，注意，这可不是网页渲染的区域宽度。这个是与设备相关的。

    iPhone的device-width就是320px，那么我们继续补充一个media-query在css中。

    @media screen and (device-width:320px){ body{ background-color:black; color:white; } }

    好啦，加上以后，那个小盆友就每天很happy的看上了小数，可是过了几日，我们又收到了这个倒霉孩子的来信：“我的iPhone坏了…555555….我妈给我买了个小手机先用着，屏幕可小了，烦。。。能不能把这个小屏幕的手机也让黑体白字、”。

    忽然觉得技术部门就是为他开的。

    好吧，冷静。

    这个时候，就要介绍min/max属性了。device-width:320px 其实类似于divice-width==320px;
    min/max 其实就是 >= 和 <=
    min-device-width : 320px; 等价于 device-width >= 320px;
    max-device-width : 320px; 等价于 device-width <= 320px;
    明白了吧，我们只要在device-width前加个max 就能轻松解决这个熊孩子的要求了（让iPhone或者iPhone屏幕小的设备都能黑底白字）。来自Apple官方

    @media screen and (max-device-width:320px){ body{ background-color:black; color:white; } }

    从此之后，这个熊孩子就成了网站的忠实用户。。

    关于Media Query的初步介绍就随着这个熊孩子安静下来而在此结束，不过我们的教程还未完结，熊孩子或许有一天又会发信来吐槽。

    你可以在这个gist中查看目前多数设备的Media Query语句：点此

    作者：代码家
    来源：代码家的博客
    你可以订阅我的Blog以获取最新的知识文章。
    请尊重版权，转载请注明来源！

  • Responsive系列之知识储备 – SASS高阶教程（2）

    在上一篇Responsive系列之知识储备 – SASS高阶教程（1）中，我带大家介绍了一些sass的高级特性。在这篇中，我将介绍另外一些比较常用的@指令。

    如果你还不知道什么是sass，可以看Responsive系列之知识储备 – SASS基础教程

    @extend

    @extend 是一种扩展功能，通常用在有一定递进关系的样式中。
    比如说有两个class,一个叫 .error ,一个叫 .seriousError。很明显 .seriousError应该是 .error的一个扩展。

    假设所有的 .error 都用红体字显示：

    .error{ color:red; }

    .seriousError不但要红体字，还要粗体！

    .seriousError{ font-weight:bold; }

    过去，我们通常是这样来表现这个seriousError的

    …

    其实这种写法并不合理，有语义学上的重叠。 seriousError本身就是一种error，而我们重复的写下error 和 seriousError 是不合理的，并且当一个div有两个class样式同时作用时，我们在维护的时候就得小心翼翼了，无疑增加了维护负担。
    我们如果能写成如下，就显得合理和精简了许多

    …

    但是想要写成这样，我们就得对css做一番修改。

    .error, .seriousError{ color:red; } .seriousError{ font-weight:bold; }

    很明显seriousError扩展了error样式。我们前面说到的@extend指令便实现了这种开发逻辑。

    .error{ color:red; } .seriousError{ @extend .error; /请留意此处的语法/ font-weight:bold; }

    生成的css：

    .error, .seriousError{ color:red; } .seriousError{ font-weight:bold; }

    @extend不但可以扩展class,也可以扩展伪类。

    .hoverlink { @extend a:hover; } a:hover { text-decoration: underline; }

    生成的css如下:

    a:hover, .hoverlink { text-decoration: underline; }

    @extend还能保持被扩展元素的父子关系。
    假使 error类下还有个 instruction 类用来显示错误的说明信息，因为字比较多的原因，为了让他能放得下，我们指定他的字体是小号的字体。

    .error{ color:red; } .error.instruction{ font-size:small }

    .seriousError下自然也有关于错误的说明，也就是instruction.
    sass对此考虑周到，对父类的子类在扩展的时候也考虑了进来。

    .error{ color:red; } .error .instruction{//instruction可以理解为error的子类 font-size:small; } .seriousError{ @extend .error; font-weight:bold; }

    请留意生成的css:

    .error, .seriousError { color: red; } .error .instruction, .seriousError .instruction { //.seriousError也包含了.instruction font-size: small; } .seriousError { font-weight: bold; }

    @extend同样支持多重扩展
    前面我们有了一个error和seriousError的例子，想想后来，我们又生成了一种attention的样式，为了提起人们的注意，为此我们设置了边框为红色。

    .error{ color:red; } .attention{ border:1px solid red; }

    现在，我们相对seriousError进行一番修改，毕竟是serious，一定要确保引起了用户的注意，因此，我们也需要将attention样式集成进来，这时多重扩展便起了作用。

    .error{ color:red; } .attention{ border:1px solid red; } .seriousError{ @extend .error; @extend .attention; /* 当然，也可以这样书写 @extend .error, .attention; */ font-weight:bold; }

    生成的css如下:

    .error, .seriousError { color: red; } .attention, .seriousError { border: 1px solid red; } .seriousError { font-weight: bold; }

    这样的样式用着用着，有一天发现又有一种更危险的error出现了，情况极其严重，一旦出现，就一定要引起用户注意并且修改，如果不改，简直要天崩地裂。

    好吧，我们姑且叫他 criticalError ,他依旧用鲜艳的红色，粗体，并且要有像attention一样的红色边框，只不过他需要更大，达到40px才解气。

    很显然，criticalError是seriousError情况的加深。因此我们选择extend seriousError。

    这样，便形成了一种链式extend结构。

    .error{ color:red; } .attention{ border:1px solid red; } .seriousError{ @extend .error, .attention; font-weight:bold; } .criticalError{ @extend .seriousError; font-size:40px; }

    生成的css如下：

    .error, .seriousError, .criticalError { color: red; } .attention, .seriousError, .criticalError { border: 1px solid red; } .seriousError, .criticalError { font-weight: bold; } .criticalError { font-size: 40px; }

    现在，这个error系统用着很棒，但是忽然有一天，技术总监说：“上面又发了一个新的error系统我们需要完成，我认为我们应当用现在的sass错误系统建立一个快速的error开发框架”
    这时，问题来了，如何用sass建立一个error开发框架呢？这时，让我们引出extend的另一个特性，这个特性就是为建立框架而生的。

    让我们先来做个简单的实验，粘贴下面的sass代码然后编译看看：

    %baseError{ color:red; }

    是不是发现生成的css空空如也。
    现在 试试这个

    %baseError{ color:red; } .Error{ @extend %baseError; }

    生成的css是否如下:

    .Error { color: red; }

    这便是一个最最简单的框架结构。%Name 告诉sass这时框架结构，不要输出这些。 @extend %name告诉sass我要扩展这个name选择器样式，调用一下这个框架。

    框架在书写的时候，需要debug，在用户使用的时候需要对错误的输入警告，这时就需要@debug和@warn

    @debug

    用在测试时候的输出，可以在控制台看到。
    如
    @debug 10em + 12em;
    你就会在控制台看到：
    Line 1 DEBUG: 22em

    @warn

    看个例子：

    @mixin adjust-location($x, $y) { @if unitless($x) { @warn “没有赋予单位，假设#{$x}按像素来算”; $x: 1px * $x; } @if unitless($y) { @warn “没有赋予单位，假设#{$y}按像素来算”; $y: 1px * $y; } position: relative; left: $x; top: $y; } .box{ @include adjust-location(10,20);//我们在这里故意不加入像素值 }

    生成的css如下:

    .box { position: relative; left: 10px; top: 20px; }

    但是这不是重点，请留意你的控制台。

    WARNING: 没有赋予单位，假设10按像素来算 on line 3 of style.scss, in adjust-location' from line 13 of style.scss WARNING: 没有赋予单位，假设20按像素来算 on line 7 of style.scss, inadjust-location’ from line 13 of style.scss

    至此，我大致介绍了大致85%左右关于sass的常用知识，随后我将推荐和分析几个sass框架，来带着大家一起摸索sass的开发模式。
    在探索过程中，我们将一起来制作一个基于Responsive和SASS的站点。

    作者：代码家
    来源：代码家的博客
    你可以订阅我的Blog以获取最新的知识文章。
    请尊重版权，转载请注明来源！

    SASS系列：
    Responsive系列之知识储备 – SASS基础教程
    Responsive系列之知识储备 – SASS高阶教程（1）
    Responsive系列之知识储备 – SASS高阶教程（2）

  • Responsive系列之知识储备 – SASS高阶教程（1）

    如果你还不了解什么是sass，请点击Responsive系列之知识储备 – SASS基础教程

    SASS中的控制指令

    sass支持一些基本的控制指令，通过条件判断来输出某些特定的样式。

    1、@if :

    @if 条件语句 {…（返回的样式）}

    如；

    p { @if 1 + 1 2 { border: 1px solid; } @if 5 < 3 { border: 2px dotted; } @if null { border: 3px double; } }

    生成的css如下：

    p { border: 1px solid; }

    @if 同样可以跟 @else if
    如：

    $type: monster; p { @if $type ocean { color: blue; } @else if $type matador { color: red; } @else if $type monster { color: green; } @else { color: black; } }

    生成的css如下：

    p { color: green; }

    2、@for
    @for指令用来重复输出一系列的样式，通过一个循环语句，指定一个变量名，一个开始和一个结尾，而后在执行体中写入想要输出的样式格式，sass会自动循环的输出一系列的样式结构。
    注：sass的循环 包含 开始和结尾
    如：

    @for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } }

    生成的css如下：

    .item-1 { width: 2em; } .item-2 { width: 4em; } .item-3 { width: 6em; }

    3、@each
    @each指令用来遍历一个序列，每次将序列中的一个值设为声明的一个变量，并且进行特定操作，操作完成后，循环到下一个值，直到结束。
    如：

    @each $animal in dog, cat, bird { .#{$animal}-icon { background-image: url(‘/images/#{$animal}.png’); } }

    生成的css如下：

    .dog-icon { background-image: url(‘/images/dog.png’); } .cat-icon { background-image: url(‘/images/cat.png’); } .bird-icon { background-image: url(‘/images/bird.png’); }

    设想如果有很多重复性的css要生成，sass多么的方便。
    4、@while
    @while语句首先判断是否满足给定条件，满足条件的情况下重复输出某一样式表达式，直到条件为false为止。
    @while是一个比较少用的表达式，通常用来实现@for语句难以实现的复杂循环结构.
    如：

    $i: 6; @while $i > 0 { .item-#{$i} { width: 2em * $i; } $i: $i – 2; }

    生成的css如下:

    .item-6 { width: 12em; } .item-4 { width: 8em; } .item-2 { width: 4em; }

    Mixins高级用法

    在Responsive系列之知识储备 – SASS基础教程中，介绍了Mixins的基础用法，@include以及传递参数。
    现在我将介绍一下关于Mixins的更多功能：
    1、Mixins的声明内部可以@include其他的Mixins
    如：

    @mixin compound { @include highlighted-background; @include header-text; } @mixin highlighted-background { background-color: #fc0; } @mixin header-text { font-size: 20px; }

    2、Mixins的参数传递功能可以有默认值
    如：

    @mixin sexy-border($color, $width: 1in) { border: { color: $color; width: $width; style: dashed; } } p { @include sexy-border(blue); } h1 { @include sexy-border(blue, 2in); }

    生成的css如下：

    p { border-color: blue; border-width: 1in; border-style: dashed; } h1 { border-color: blue; border-width: 2in; border-style: dashed; }

    3、Mixins同样可以显式声明要传递的参数/也可以叫作关键字传参 （Keyword arguments）
    如：

    p { @include sexy-border($color: blue); } h1 { @include sexy-border($color: blue, $width: 2in); }

    显式传递会让sass代码更加易读，而且在有很多参数的情况下，不用过多的在意参数传递的顺序，建议多用这种方式去传递参数。

    4、Mixins也支持不定参数传递
    在某些情况下，我们可能无法确定一个Mixins要传递的参数个数，这个时候，我们就可以利用这一特性来传递参数。参数书写规则类似其他语言，在参数变量后加… 代表不定参数。
    如我们要实现shadow效果，而shadow的参数往往比较多样，无法确定：

    @mixin box-shadow($shadows…) { -moz-box-shadow: $shadows; -webkit-box-shadow: $shadows; box-shadow: $shadows; } .shadows { @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999); }

    生成的css如下：

    .shadowed { -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999; -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999; box-shadow: 0px 4px 5px #666, 2px 6px 10px #999; }

    5、调用Mixins，也可以用类似不定参数的方法调用。
    可以提前声明一个数值List,而后在调用时传入这个List+…，sass会自动分配List中的value给每个参数。
    如下：

    @mixin colors($text, $background, $border) { color: $text; background-color: $background; border-color: $border; } $values: #ff0000, #00ff00, #0000ff; .primary { @include colors($values…);/留意这里/ }

    生成的css如下：

    .primary { color: #ff0000; background-color: #00ff00; border-color: #0000ff; }

    6、如果你想扩展一个已有的Mixins（如：添加某些新的属性），又不希望打破旧的结构，这时新的Mixins可以包装旧的Mixins，并且可以利用不定参数的方式来实现参数传递，是不是听起来略微抽象，没有关系，看个例子就明白了。
    假如有个Mixins叫stylish-mixin，我们现在想扩展出一个新的Mixins，让他的字体变为bold

    @mixin stylish-mixin($color,$width){ color:$color; font-size:$width; } @mixin wrapped-stylish-mixin($args…) { font-weight: bold; @include stylish-mixin($args…); } .stylish { @include wrapped-stylish-mixin(#eeeeee,$width: 100px); }

    生成的css如下：

    .stylish { font-weight: bold; color: #eeeeee; font-size: 100px; }

    7、传递内容块（content blocks）给Mixins
    这个比较抽象，我会从一个例子下手，而后讲解此功能的用法。
    首先，我们在此引入一个@指令，即@content,@content表示一个未来要被替换的文本。
    看如下scss文件:

    @mixin apply-to-ie6-only { * html { @content; /这个@content,表示未来此处会被传递的值重新替换的样式文本/ } } /而后，我们利用@include指令来调用 apply-to-ie6-only mixins/ /但是在调用的时候，我们得考虑到替换@content ， 因而我们要使用 @include 的另一种使用方式 ，如下：/ @include apply-to-ie6-only {/*这个代码段内的文本将替换 apply-to-ie6-only中的@content部分 */ #logo { background-image: url(/logo.gif); } }

    而后sass在编译后的文本内容其实如下:

    @mixin apply-to-ie6-only { * html { #logo { background-image: url(/logo.gif); } } } @include apply-to-ie6-only;

    最终生成的 css文件如下：

    • html #logo { background-image: url(/logo.gif); }

    这种看似麻烦的方法是用来做什么的呢？
    实际上是用来提供抽象接口的，看看这种结构像不像C++中的abstract类（抽象类）。想想C++的抽象类是用来干什么的？

    函数指令

    sass允许你定义自己的函数。
    使用方法：
    @function 函数名（参数1，参数2…）{
    …一些处理语句;
    @return 返回的内容;
    }
    举个例子：

    $grid-width: 40px; $gutter-width: 10px; @function grid-width($n) { @return $n * $grid-width + ($n – 1) * $gutter-width; } #sidebar { width: grid-width(5); }

    生成如下css:

    sidebar { width: 240px; }

    函数跟mixin的传参方法很类似，同样支持关键字传参，如上面的grid-width也可以如下调用：

    sidebar { width: grid-width($n: 5); }

    同样函数也支持不定参数的传递方式。
    注意：为了不发生命名冲突或者为了不使阅读你代码的人误以为函数是sass内部提供的函数，建议在属于你自己的函数上加入前缀，如你在google工作，可以在grid-width前加入google，变成为google-grid-width

    下一节，我将补充介绍一些@规则指令，并且介绍一些常用的css格式。
    也会补充介绍一些平台下的便利开发工具。

    作者：代码家
    来源：代码家的博客
    你可以订阅我的Blog以获取最新的知识文章。
    请尊重版权，转载请注明来源！

    SASS系列：
    Responsive系列之知识储备 – SASS基础教程
    Responsive系列之知识储备 – SASS高阶教程（1）
    Responsive系列之知识储备 – SASS高阶教程（2）

  • Responsive系列之知识储备 – SASS基础教程

    SASS 是一 CSS 的预处理标记语言。为CSS加入了如 变量、判断、嵌套、导入等功能。

    安装：

    第一步：SASS需要Ruby环境

    Windows下的安装点此：Ruby Installer

    Mac OS 是自带Ruby环境的，所以无需再装

    第二步：在命令行下安装SASS

    在命令行下执行：

    gem install sass

    等待片刻就可以装上了。

    入门：

    1、新建一个style.scss文件

    2、输入并且保存

    /* style.scss / $width:23px; /此处是sass变量*/ #navbar { height: 80%; width: $width; }

    3、在控制台中，cd到所在目录，然后输入

    sass –watch style.scss:style.css

    输入后，sass会自动监测style.scss文件的变化，并且重新生成style.css。

    4、观察在该目录下是否生成了一个style.css文件，并且是否发现width属性被设置成了23px呢？这就是scss的基本操作流程。

    语法

    一、变量：**

    sass允许使用变量，变量以$符号开始，类似属性的声明方式，值可以为颜色，数字（带单位），以及文本,而后以分号结尾。

    变量可以使你不用重复去书写一些属性值，而且为修改提供了很大的便利，可以在一处轻松修改整体风格。

    例子：

    /* style.scss */ $color:#eeeeee; $width:960px; div.header{ width:$width; background-color:$color; }

    生成的style.css如下

    /* style.css */ div.header{ width:960px; background-color:#eeeeee; }

    二、嵌套

    在书写css的过程中，经常会利用后代选择器(也叫上下文选择器)

    如：想对p元素下的em元素做特殊样式处理，就可以用后代选择器

    p{…}

    p em{…}

    在sass中可以对一书写进行简化。

    p{ … em{ … } }

    来一个稍微复杂一点儿的例子：

    /* style.scss / #navbar { width: 80%; height: 23px; ul { list-style-type: none; } /嵌套样式/ li { /嵌套样式/ float: left; a { font-weight: bold; }/嵌套样式*/ } }

    由sass处理后css的如下：

    /* style.css / #navbar { width: 80%; height: 23px; } /sass将嵌套元素拆解成后代选择器*/ #navbar ul { list-style-type: none; } #navbar li { float: left; } #navbar li a { font-weight: bold; }

    三、父元素简写

    常用在伪类中，如 a:hover , li:hover，sass将伪类也添加了嵌套写法。
    在嵌套中用符号 & 来指代 父元素。如下例子，&:hover {…} 中 &就指代 父元素 a

    /* style.scss / a { color: #ce4dd6; &:hover { color: #ffb3ff; }/嵌套样式/ &:visited { color: #c458cb; }/嵌套样式*/ }

    生成的style.css如下

    /* style.css */ a { color: #ce4dd6; } a:hover { color: #ffb3ff; } a:visited {color: #c458cb; }

    四、融合/代码片段（ Mixins )

    Mixins 是sass很强大的一个特征，他可以让你重复使用样式，属性，选择器。就类似于代码片段的重复使用。
    Mixins 的定义是以 @mixin 声明作为开始，而后给一个调用名称，紧跟可以被融合的代码块片段。
    在需要使用这一代码片段的时候，使用 @include 片段名
    比如下面的例子，通常我们我们想让css某一部分圆角，就得给某一元素加入以下css

    -webkit-border-radius: 20px; border-radius: 20px;

    如果想要圆角的部分非常多，就得不断地复制粘贴这一代码片段，而且如果以后想同意修改圆角大小，就得一个一个改，sass就将这一过程简化，提供了更方便的书写，修改起来也变得易如反掌。

    /style.scss/ $radius:20px; @mixin rounded{/可以将这个视为一个代码片段/ -webkit-border-radius: $radius; border-radius: $radius; } /比如我想在header上圆角/ div.header{ @include rounded;/引入这一代码片段/ }

    产生的css如下：

    /比如我想在header上圆角/ div.header { -webkit-border-radius: 20px; border-radius: 20px; }

    五、融合/代码片段 传参

    sass最强大的地方就是你可以为你的代码片段进行参数传递。
    回想刚才的那个rounded代码片段，可能我们不想要全局的设置radius为20px，我们想要在div.footer中设置为10px，在div.header中设置为20px,这个时候传参显得很有意义。并且我们可能还想给border加入一个色彩属性。

    如下代码所示：

    /style.scss/ @mixin rounded($radius,$border-color){/支持参数传入和参数列表/ -webkit-border-radius: $radius; border-radius: $radius; border-color:$border-color; } div.header{ @include rounded(20px,#ff0000); } div.footer{ @include rounded(10px,#0000ff); }

    生成的css如下:

    /style.css/ div.header { -webkit-border-radius: 20px; border-radius: 20px; border-color: red; } div.footer { -webkit-border-radius: 10px; border-radius: 10px; border-color: blue; }

    六、利用@import来管理mixins片段和变量

    如果我们的一个页面的css文件很多，这无疑会浪费一部分时间在http request上。
    但是
    又如果我们在一个scss文件中写入大量的mixins片段，又使得整个文件结构变得不清晰，想要修改某一部分时，又得找半边天。
    这时
    将不同的mixins分文件存放，需要哪个载入哪个，这样就实现了分块管理。一旦某部分需要修改，只要找到该文件并且修改即可。
    sass利用@import实现了这一功能

    用刚才的rounded的例子：
    在目录下建立名为 _rounded.scss 文件，写入rounded的mixin：

    /_rounded.scss/ @mixin rounded($radius,$border-color){ -webkit-border-radius: $radius; border-radius: $radius; border-color:$border-color; }

    /style.scss/ @import “rounded”; div.header{ @include rounded(25px,#ff0000); }

    生成的css文件如下：

    /style.css/ div.header { -webkit-border-radius: 25px; border-radius: 25px; border-color: red; }

    sass对Minis文件命名约定如下：
    1、以下划线开始。 如刚才的rounded，如果要以mixins存放，就得以 _rounded.scss 文件名存放。
    2、后缀可以是scss或者sass

    @import约定如下：
    1、无需添加下划线
    2、无需加入文件后缀名

    例如想要加入rounded的mixin： @import “rounded”;

    *七、插值 Interpolation *

    变量不仅仅可以用在属性值上，还可以用 #{} 的方式，将变量插入到属性名中。**

    /* style.scss */ $vert: top; $horz: left; $radius: 10px; .rounded-#{$vert}-#{$horz} { border-#{$vert}-#{$horz}-radius: $radius; -moz-border-radius-#{$vert}#{$horz}: $radius; -webkit-border-#{$vert}-#{$horz}-radius: $radius; }

    生成的css文件如下:

    /* style.scss */ .rounded-top-left { border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; }

    八、操作和函数 （Operations and Functions）

    sass支持变量的数学运算，同时也可以调用一些预设的函数方法来实现计算元素大小和动态着色以及处理字符串，条件判断等等。
    这个我将会重新开一篇文章详细介绍函数的一些用法和技巧。

    以上只是sass的一些基本用法，后续我将继续介绍sass的一些高级用法。你可以订阅我的blog，随时获取更新。

    作者：代码家
    来源：代码家的博客
    你可以订阅我的Blog以获取最新的知识文章。
    请尊重版权，转载请注明来源！

    SASS系列：
    Responsive系列之知识储备 – SASS基础教程
    Responsive系列之知识储备 – SASS高阶教程（1）
    Responsive系列之知识储备 – SASS高阶教程（2）