[TOC]
为什么要学习Sass和Compass
简单来说,主要目标:
使用Sass和compass可以写出更加优秀的CSS
可以解决CSS编写过程中的一些痛点问题,如精灵图合成sprite 等
能够有效的组织样式,图片,字体等项目元素
当然前提是你要首先会写CSS,要不然也不会写出好的Sass和compass,不过也不排除意外。
那么到底哪些人需要来学习sass和compass呢
担任重构工作的同学,写很多CSS,不知如何自动化.
前端JS工程师,希望在项目周期内更好组织项目内容。
Sass的工作流程
首选第一步编写后缀为.scss或者.sass的代码文件,这里为什么会有两种不同的后缀命名方式呢,这要和sass的历史和CSS3的发展有关.最早的sass文件都是以.sass为后缀文件,随着CSS3的发展Sass加入了.scss的类似CSS代码编写风格的文件。
通过Sass引擎compass编译生成后缀为*.css文件最后将样式代码Deploy到代码仓库(git或者github)上,生成静态页面网页呈现。
sass语法分类
.Sass语法
h1
color: #000
background: #fff;
.Scss语法
h1{
color: #000;
background: #fff;
}
注意:一个项目中可混合使用两种语法,但不能在一个文件中使用两种语法
Sass和compass安装
由于Sass底层开发环境是由Ruby开发的,所以需要部署安装Ruby进行Sass的安装和编译使用,下面介绍一下Ruby的安装。
注意:这里说明一点,由于中国网络的限制,一般Ruby的安装是需要翻墙的,具体怎么翻,相信大家都有自己的方法,网上也可以搜到很对,这里就不做介绍了
Ruby的安装
登录Ruby的官方网站http://www.ruby-lang.orrg/en/进行下载安装,可以下载Mac,Linux,Windows 版本,这里讲一下Windows版本的安装,其他操作系统类似。
安装Ruby,选择文件目录,注意添加Ruby的执行程序到你安装的路径中。
查看Ruby版本号
Ruby -v
这里同样由于网络原因,需要将Amazon上的Ruby资源路径换成国内淘宝Ruby资源路径
执行
gem sources --remove https://rubygems.org/ //移除原来资源文件
gem sources -a https://ruby.taobao.org/ //换成淘宝资源
安装Sass和文件创建
gem install sass
同时可以指定sass安装版本号3.3
gem install sass --version=3.3
卸载指定版本
gem uninstall sass --version=3.30
新建一个名为learn-sass-cli的文件
mkdir learn-sass-cli //创建文件
cd learn-sass-cli/ //进入文件目录
echo off >main.scss //新建main.scss文件
sass main.scss mian.css //将main.scss文件编译成main.css文件
打开main.scss文件,输入简单的全局设置样式
*{
margin: 0;
pading: 0;
}
编译生成的文件目录如下所示
其中.sass-cache是一个编译缓存文件,main.scss是一个sass文件,main.css.map是一个映射文件,main.css便是最终编译生成的样式文件。
至此sass的安装和文件创建便完成了,下面介绍compass的安装和创建
compass安装和文件创建
comapss安装类似sass
gem install compass
compass -v //查看版本号
创建workspace工作文件
mkdir workspace
cd workspace/
compass create learn-compass-init //创建compass文件
实时监听文件变化
cd learn-compass-init/
compass watch
workspace工程目录如下所示
在sass目录下新建一个存放变量的_variable.scss文件
分别定义headline-ff和main-sec-ff两个字体变量,输入相应的字体内容:
$headline-ff: Braggadocio, Arial, Verdana, Helvetica, scans-serif;
$main-sec-ff: Arial, Verdana, Helvetica, scans-serif;
之后在screen.scss
文件中导入该文件和系统自定义的样式重置文件,screen.scss
称为“宿主文件”:
@import "variable", "compass/reset";
注意:这里的@import不同于CSS原生的@import,CSS中原生的@import指令有两大弊端,1,@import始终要放在代码的最前面2,对性能不利
编写主题样式和页面主题样式
//主标题样式
.headline{
font-family: $headline-ff;
}
/* 页面主题内容样式 */
.main-sec{
font-family: $main-sec-ff;
.headline{
font:{
family: $main-sec-ff;
size: 16px;
}
}
.detail {
font-size: 12px;
}
}
在screen.css文件中编译生成的代码如下:
/* line 25, ../sass/screen.scss */
.headline {
font-family: Braggadocio, Arial, Verdana, Helvetica, scans-serif;
}
/* 页面主题内容样式 */
/* line 30, ../sass/screen.scss */
.main-sec {
font-family: Arial, Verdana, Helvetica, scans-serif;
}
/* line 33, ../sass/screen.scss */
.main-sec .headline {
font-family: Arial, Verdana, Helvetica, scans-serif;
font-size: 16px;
}
/* line 40, ../sass/screen.scss */
.main-sec .detail {
font-size: 12px;
}
上面代码中使用了类似CSS编写过程中的中文注释,这里有些中文注释会在终端compss监听中报错,主要是ruby引擎的问题,解决方法是:找到rubyd 的安装目录里面的sass模块,路径如下:C:\Ruby\lib\ruby\gems\1.9.1\gems\sass-3.3.14\lib\sass,文件里面有个engine.rb,打开之后在所有的require XXXX后面添加代码Encoding.default_external = Encoding.find('utf-8)
。现在一般浏览器都是用的utf-8字符。
sass语法使用
1. 变量操作
①直接操作变量,即变量表达式。
在_variable.scss文件中统一定义变量,变量定义用$开头
$color: #fff;
调用变量
div{
color: $color;
}
编译生成的css文件
div{
color: #fff;
}
②通过函数
-
跟代码无关的函数,多是自己内置函数,称为functions
**自定义函数**
@function trible($i){
@return $i * 2;
}
//trible函数返回三倍数据
调用
div{
width: trible(5px);
}
编译实现效果
div{
widt: 15px;
}
可重用的代码块,称为mixin
mixinl类似于C中的宏定义,可以多次调用代码块,有@include
和@extend
两种不同方式,同样首先新建外部_mixin.scss外部代码文件
1.使用@include
方法
定义响应式代码块col-6模块,
@mixin col-6{
width: 50%;
float: left;
}
使用@include
命令调用,首先同样需要将mixin块import进来
@import "mixin";
.demo{
@include col-6();
&:hover{
background-color: #fff;
}
}
编译转换效果
.demo{
width: 50%;
float: left;
}
.demo:hover{background: #fff;}
2.使用mixin还能指定参数和缺省值
@mixin col($width){
width: $width;
float: left;
}
调用
.demo{
@include col(50%);
}
编译生成效果
.demo{
width: 50%;
float: left;
}
3.使用@extend
方法
现有两个错误级别,error和serious-error,
①第一张方案,serious-error中复用error中的color属性设置,造成了代码的冗余
.error{
color: red;
}
.serious-error{
color: red;
font-size: 20px;
}
html文件
<div class="error">基本错误</div>
<div class="serious-error">严重错误</div>
②第二种方案,在html中同时引入error类,不有利于语义化
.error{
color: red;
}
.serious-error{
font-size: 20px;
}
html文件
<div class="error">基本错误</div>
<div class="error serious-error">严重错误</div>
③使用@extend
方案
.error{
color: red;
}
.serious-error{
@extend: .error;
font-size: 20px;
}
编译生成css代码效果
.error, .serious-error{
color: red;
}
.serious-error{
font-size: 20px;
}
使用&符号,生成a标签的hover伪类
a{
&:hover {color: #f0f0f0;}
}
生成css文件
a:hover{
color: #f0f0f0;
}
内部属性嵌套,在头文件中字体font定义:
.headline{
font:{
size: 16px;
family: "微软雅黑";
}
}
编译生成css代码:
.headline{
font-size: 16px;
font-family: "微软雅黑";
}
(end)
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。