在研究grunt的时候发现sass好火,作为css的编译器有必要了解一下,因此做了些小例子学习了一下,现记录如下:
一.SASS与COMPASS简介与安装
1.安装Ruby:
一键安装,见官网。
注:在MAC系统中,安装RVM(可选:Ruby版本管理工具)和Homebrew(可选)
RVM安装:
gpg –keyserver hkp://keys.gnupg.net –recv-keys
409B6B1796C275462A1703113804BB82D39DC0E3 \curl -sSL https://get.rvm.io| bash -s stable
Homebrew安装:
/usr/bin/ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”
2.修改ruby软件包的sources
由于国内网络原因,导致rubygems.org放在亚马逊上的资源文件经常连接失败,所以换用国内淘宝提供的rubysources。
首先移除掉rubygems.org:
gem sources --remove https://rubygems.org/
添加淘宝源:RubyGems 镜像的管理工作以后将交由 Ruby China 负责,参考http://gems.ruby-china.org/
$ gem sources --add https://gems.ruby-china.org/ --remove https://rubygems.org/
$ gem sources -l
https://gems.ruby-china.org
# 确保只有 gems.ruby-china.org
由于Ruby缺少SSL证书,因此要先按照以下网址要求进行配置,否则将无法安正确安装:
https://gist.github.com/fnichol/867550
3.安装sass:
gem install sass
注:常用gem 命令 :gem update //更新所有包版本 ; gem uninstall sass –version=3.3.0//删除特定版本的sass
4.sass的简单使用
编译sass,第二个参数代表要编译的文件,后一个参数代表生成文件名:
注:一般不直接使用sass命令进行编译,常采用compass
5.compass的安装
gem install compass
6.compass的简单实用
compass create learncss
生成的项目目录如下图:
二.SASS的主要语法
以下只记录核心语法,其他参见官网:http://sass-lang.com/documentation/file.SASS_REFERENCE.html
1.实时监听sass的变化:
2.变量语法
在screen.scss中:
$headline-ff:Braggadocio,Arial,Verdana,Helvetica;
$main-sec-ff:Arial,Verdana,Helvetica,sans-serif;
@import "compass/reset";//compass提供的重置模块,通过重新定义标签样式来修改浏览器的默认样式。后期将改用Normalize插件,统一不同浏览器的样式差异。
.headline{
font-family:$headline-ff;
}
.main-sec{
font-family:$main-sec-ff;
}
import的使用: 新建一个文件— _variables.scss来存放变量,通过@import “variables” 引入。
注:不建议使用CSS原生的import指令。
基于sass的既定规则:
1.没有文件名后缀的时候,sass会添加.scss或者.sass后缀。
2.同一个目录下,局部文件和非局部文件不能重名。
3.可以通过逗号分离包: @Import “variables”,”compass/reset”
3.注释:
4.嵌套样式
//样式的嵌套
.main-sec{
font-family:$main-sec-ff;
.headline{
//属性的嵌套
font:{//不要漏掉冒号
family:$main-sec-ff;
size:16px;
}
}
.detail{
font-size:12px;
}
}
编译出的CSS结果为:
5.变量操作
有两种方式可以操作变量,一种方式是直接操作变量,即变量表达式。另一种方式是通过函数。
函数有两种方式,一种是跟代码无关的函数,多是自己的内置函数,称functions,另一种是可重用的代码块,成mixin,通过@include的方式调用,另一种以组合声明的方式调用,使用@extend。
6.颜色表示
H:0-360;S:0-100% L:0-100%
p{
color:hsl(270,100%,50%)
}
7.mixin的使用
界面中相同的组建可以抽象成mixin模块使用。
新建_mixin.scss
@mixin col-6{
width:50%;
float:left;
}
在screen.scss中,import “mixin”
.webdemo-sec{
@include col-6();
&:hover{
background-color:f5f5f5;
}
}
编译后的css文件如下:
注:mixin不调用的时候,不会输出任何的文件,调用的时候也只会在相应的地方生成。
mixin传参:
@mixin col($width:50%){//支持默认传参
width:$width;
float:left;
}
screen.scss
.webdemo-sec{
@include col-6(50%);//传入参数
&:hover{
background-color:f5f5f5;
}
}
8.extend
用一个选择器去计算另一个选择器的样式。
.error{
color:#f00;
}
.serious-error{
@extend .error;
border:1px #f00;
}
注:
- @extend可以继承多个选择器
- extend不可以继承选择器序列
- 仅用于集成的类 %error{ }
9.@media query
sass中的media query可以内嵌在css规则中,在生成css的时候,media query才会被提到样式的最高级。好处是避免了重复书写选择器或者打乱样式表的流程。
@mixin col-sm($width:50%){
@media(min-width:768px){//当屏幕宽度大于768的时候,将以50%的宽度显示,当宽度小于768的时候,默认以100%的宽度显示。
width:$width;
float:left;
}
}
9.at-root
由于嵌套过多会影响css渲染的效率,因此
@at-root{
….
}