看慕课网materliu前辈的sass教程，http://www.imooc.com/learn/364。顺便把刚做完的项目重构一下，然后把一些笔记和心得都写在这里~首先安装sass，这里直接参考 大漠前辈的安装教程 http://www.w3cplus.com/sassguide/install.html。然后安装compass， 在ruby command 里面打命令，gem install compass 就好了；就现阶段来说，对compass理解的不是很多，看完sass那个视频之后就觉得暂时只是用来编译scss文件和压缩css（雾）。compa...
SASS的安装方法： 1、先安装Ruby，下载地址：http://download.csdn.net/detail/hzf2257/3334439。安装注意事项如下图，装在C盘会比较好，装其它盘也可以。 2、打开Ruby的命令符面板，输入： gem install haml 和 gem install sass SASS文件转换为CSS文件的方法： 如：在D盘建立一个SASS文件夹，文件夹下有一个style.scss文件（scss，sass都行。sass文件对代码的排版有着非常严格的要求，而且没有大括号，没...
自从发现可编程的css语法 Sass和基于Sass的css库compass 一个给我的感觉像c# 另外一个给我的感觉像.NET Framework，一切都为了提升开发效率和降低开发大型web的门槛。 当web开发趋势迈进WebApi+Js 时代，compass和Sass 会不会成为web开发的标配？这个得实际开发检验下. 预处理 当web站点变的越来越复杂。 先是html 复杂了----》动态编程语言解决方案 js复杂了---》jq和dojo 等解决方案 css现在也变的复杂了，但是css本...
Bourbon 是一个简单易用的 Sass 混入（Mixin）库，无需配置。该混入包含用于支持所有现代浏览器的 CSS3 属性前缀。前缀需要确保在旧的浏览器支持优雅降级。Bourbon 使用 SCSS 语法。 立即下载 官方网站
demo 源码 地址 https://github.com/qqqzhch/webfans compass 的表格提供了集中常见样式 表格边框 outer-table-borders($width, $color) 控制外边边框的尺寸和颜色 inner-table-borders($width, $color) 控制里面边框的尺寸和颜色 例如 .table1{ table { @include inner-table-borders(1px, #7a98c6); @include outer-table-borders(2px); }} 最外边行列（top left）字体 table-scaffolding 例如 ...
reset 可以重置浏览器的的html的默认样式，因为各个浏览器对有些元素解析差别很大 通过重置样式可以让样式的浏览器兼容 更简单 使用方法简单 @import "compass/reset" layout 有几个常见的布局函数，我觉得挺管用，其他的都是用来写组建非常常用的 Sticky Footer 该模块提供了需要布置你的页脚，它坚持到页面底部的工具。 这个模块主要用于布局页脚，可以让页脚固定在页面的最底部，是一个比较常用的功能，而且有配套的...
前言：CSS预处理语言 CSS预处理语言可为CSS增加更多编程特性，以CSS作为目标生成文件。 这些语言可有效提高编程效率，使CSS更加简洁、适应性更强、可读性更加，并使项目更易于维护。 本文将在开发者角度使用表格横向对比的方式客观分析目前主流的CSS预处理语言LESS、Sass、Stylus的异同之处。 不介绍这些语言的安装、编译等内容。默认读者已熟悉CSS并可能已用过以上至少一种CSS预处理语言。 鉴于目前Sass...
有些人想学CSS，不知如何下手；有些人已经学会CSS的各种属性，却不知如何运用；有些人会平面设计，不知道如何与网页设计结合；有些人会HTML，就是学不会CSS。试问自己，图中的技术你都会了吗？ 别总是怨天尤人了，CSS高效开发实战?CSS 3、LESS、SASS、Bootstrap、Foundation--------写作的目的是要确保CSS不会成为开发过程或网站性能的瓶颈，确保读者可以运用一些工具、框架、预处理来提升开发效率和节约人力成本，确保所讲...
你也许会不时地写写 Sass 玩玩，你也会很享受它带给你各种便利。但还有一件事，你并不一定完全了解：插值 (interpolation) - 将一个占位符，替换成一个值。好了，你们都很幸运，因为今天我将把这种问题说清楚。 插值。啥玩意儿？ 插值，通常是指变量插值，或者变量替换。这不是Sass独有的。实际上，你可以在很多编程语言中，发现这种特性。比如 PHP, Perl, Ruby, Tcl, Groovy, Unix shells, 等等。我们经常说的是，插入一个变量，...
掌握CSS是每个Web开发者的基本要求，虽然CSS本身并不复杂，但怎样写出支持所有主流浏览器（特别是IE）的CSS，以及在大型网站中如何有序地组织好CSS结构却是一个相当棘手的问题。我更多的是一个开发者，而不是一个设计师，却不幸花了大量时间处理CSS这些棘手问题，如果能有一些工具能帮我处理这些问题，那将很有意义。经过一段时间的搜索和研究，还真发现了几个很棒的工具，感觉真是相见恨晚，与大家分享之。 Blueprint CSS F...
技术的新发展，除计算机可以接入互联网之外，平板电脑、智能手机、智能电视等其他设备均可访问互联网。在多设备时代，构建多屏体验也不是听说的那么难。 但是这也增加了学习CSS的难度？不知道如何上手，只懂一点基础的CSS语法，在移动互联时代，难道我们就这样落伍了？？好好学习吧，看完《CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation》，给自己的未来打气！ 5.1 设定背景图的大小 在CSS 3出现之前，背景图片的...
CSS 3允许设置多个背景图片，每个背景图片占一层，层的上下按照在CSS中书写的顺序来定，最先写的背景在最上层，每层图片定义使用英文逗号隔开。 例如下面的代码： background:url(http://dotnet.aspx.cc/Book/Images/CSS1_s.jpg) 0 0 no-repeat, url(http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg) 200px 0 no-repeat, url("http://dotnet.aspx.cc/Book/Images/ASPNET20Book1_s.jpg") 400px 201px no-repeat; 根据代码可...
线性渐变可以设置3个参数值：方向、起始颜色、结束颜色。最简单的模式只需要定义起始颜色和结束颜色，起点、终点和方向默认自元素的顶部到底部。下面举例说明： .test{ background:linear-gradient(red, blue);} 上述代码的效果如图5.9所示。 图5.9 最简单的线性渐变效果 如果要在一些旧版本的浏览器（除IE）下可以正常显示如图5.9的效果，则需要添加兼容代码： .test { background:-webkit-linear-gradient(re...
相比传统的图片背景来说，使用CSS构造背景色不仅可以降低网络传输的开销，更由于其尺寸的可控性受到开发者的青睐。 如设计师设计了一张背景图片作为标题背景，如图5.18所示。对于用电脑浏览网页的用户来说，标题基本不存在折行现象，布局也基本是固定宽度的，因此直接使用设计师给出的背景图即可。但是这个页面主要是在手机上显示，标题根据长度不同可能占1行，也可能占3行，如果采用图片就必须根据不同的情况放不同的背景图，实现...
阴影效果通常用来表现光线投射在物体上的感觉，如果想制作一个如图5.19所示的文字光影效果，就可以使用背景的线性渐变进行构建。 图5.19可以看到有类似光束照射文字的效果，很好地突出了文字。这实现起来很简单，只需要对文字居中，对背景元素设置从中心发散的放射渐变即可，代码如下： // HTML代码赞 // CSS代码：.box{ width: 200px; height: 200px; font-size: 80px; line-height: 200px; ...