前言
sass是一款css预处理程序,它能提供一些css本身不具备的特性,比如:变量,嵌套,mixins,继承等。
安装、更新、卸载
- sass依赖于ruby,所以要先安装ruby。下载地址
- ruby安装成功后(记得配好环境变量),执行
gem install sass
- double-check。执行
sass -v
如果返回
Sass 3.4.21 (Selective Steve)
表明sass已经安装成功。 - 更新:当有新的sass版本时,执行
gem update sas
即可更新。 - 卸载:执行
gem uninstall sass
编译
命令行编译
命令格式
sass src:dest
1. 编译单个文件
sass --watch a.scss:/home/b.css
1. 编译整个文件夹里的所有scss文件
sass --watch /home/sass/:/home/
常用参数
注意:–watch参数表示如果文件有变化,则会自动编译一次。避免每次都手动执行。
常用参数
–watch 监视文件变化,编译文件
–update 监视文件变化,更新css文件
–style params params可以取以下值:
nested:嵌套缩进的css代码 (具有嵌套关系的元素样式 以缩进的方式显示)。该选项是默认的
expanded:展开的多行css代码(跟平时写css样式差不多)
compact:简洁格式的css代码(每个元素在一行)
compressed:压缩后的css代码(去掉空格、分行等,压缩在一起)
使用
变量
变量声明方式:$width:30px
在元素、mixin之外声明的变量为全局变量,在其它地方声明的变量为局部变量。
------------------------------------------------------------------
a.scss
--------------------------------
$global:30px;
body {
$local:40px;
}
嵌套
//scss style
//------------嵌套-------------------
body {
nav {
}
}
注意嵌套层次不要太高,否则生成的css 缩进太多,不好理解。
mixin(混合宏)
//scss style
//---------mixin 的声明---------------------------
<b>混合宏声明使用关键字@mixin</b>
//不带参数的mixin
@mixin border-radius(){
}
//带参数的mixin
@mixin border-radius($para:20px){
border-radius:$para;
}
//------------------------------------------------
//------mixin 的调用,使用关键字@include------------
@include border-radius(3px);
//-------------------------------------------------
//--------------传多个参数--------------------------------
声明:
@mixin center($width,$height){
width: $width;
height: $height;
position: absolute;
top: 50%;
left: 50%;
margin-top: -($height) / 2;
margin-left: -($width) / 2;
}
调用:
.box-center {
@include center(500px,300px);
}
//-------------------------------------------------------------
//------------当需要的参数过多时,可以使用...---------------------
@mixin box-shadow($shadows...){
@if length($shadows) >= 1 {
-webkit-box-shadow: $shadows;
box-shadow: $shadows;
} @else {
$shadows: 0 0 2px rgba(#000,.25);
-webkit-box-shadow: $shadow;
box-shadow: $shadow;
}
继承
/**关键字**/
sass 继承使用@extend关键字
/*******************************示例********************/
.btn {
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
}
.btn-primary {
background-color: #f36;
color: #fff;
@extend .btn;
}
.btn-second {
background-color: orange;
color: #fff;
@extend .btn;
}
/*****************编译后的结果********************/
//CSS
.btn, .btn-primary, .btn-second {
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
}
.btn-primary {
background-color: #f36;
color: #fff;
}
.btn-second {
background-clor: orange;
color: #fff;
}
==================================================
@extend与%placeholder(占位符)结合使用的效果
//SCSS
%mt5 {
margin-top: 5px;
}
%pt5{
padding-top: 5px;
}
.btn {
@extend %mt5;
@extend %pt5;
}
.block {
@extend %mt5;
span {
@extend %pt5;
}
}
编译后效果
//CSS
.btn, .block {
margin-top: 5px;
}
.btn, .block span {
padding-top: 5px;
}
注意事项
- scss文件编码格式不支持gbk,所以编写时注意将编码格式设置为utf-8。
- scss文件所在路径中文支持不够友好,建议路径全为英文,否则容易出现编译错误。
- @mixin,@extend,%placeholder的关系
css
*使用混合宏(@mixin),生成的css代码,会在调用的地方产生多个样式。
*使用继承(@extend),生成css代码时,会根据样式,将具有相同样式的元素以组合选择器的形式放在一起,看起来更整洁。
*使用占位符(%placeholder),生成css代码时,跟使用@extend有相同的效果。不同的是,使用%placeholder时,不会在css中生成占位符的选择器。更简洁了,不是吗?