Sass的使用和基础语法

sass安装

• 官网下载ruby的windows安装包,安装时勾选上添加到环境变量add ruby executables to your path。安装完成后打开命令行，ruby -v输出内容则安装完成。
• 添加国内sources，安装sass

gem sources --remove https://rubygems.org/
gem sources -a http://gems.ruby-china.org	国内的镜像
gem sources -l	查看current sources
gem install sass 	安装sass
sass -v		查看sass版本

其他命令

gem update	一段时间后更新所有的ruby程序
gem list	列出本地安装的所有ruby程序包
gem install sass --version=3.3.0		安装特定版本的ruby程序包
gem uninstall sass --version=3.3.0	删除某一版本的ruby程序包
gem uninstall sass	删除sass

compass安装

gem install compass
compass -v
compass create project_name		创建一个项目
compass watch	实时监听sass文件的变化

Sass基础语法

官网文档

• sass和scss文件的相互转化

sass-convert main.scss main.sass
sass-convert main.sass main.scss

• 变量
  
  $开头，后面紧跟变量名，而变量值和变量名之间就需要使用冒号(:)分隔开，如果值后面加上!default则表示默认值。

$color:#fff;
$side:left;
//变量引用
.headline{
    background-color:$color;
    margin-#{$side}:5px;	//变量在字符串中，要写在#{}中
}

可以将变量放在一个scss文件中，并用 @import引入，但是这个 @import并不是css中原生的 @import

• 计算
  
  SASS允许在代码中使用算式，并且可以带单位

.headline{
    margin：（500px/2）;
}

• 引入
  
  Sass的导入(@import)规则和CSS的有所不同，编译时会将@import的scss文件合并进来只生成一个CSS文件。但是如果你在Sass文件中导入css文件如@import 'reset.css'，那效果跟普通CSS导入样式文件一样，导入的css文件不会合并到编译后的文件中，而是以@import方式存在。
  
  所有的Sass导入文件都可以忽略后缀名.scss。一般来说基础的文件命名方法以_开头，如_mixin.scss。这种文件在导入的时候可以不写下划线，可写成@import "mixin"多个引入可以用逗号隔开@import "variables","mixin","compass/reset";。
• 嵌套

选择器嵌套

.main-sec{
    font-family:$main-sec-ff;
    .headline{
        font-family: $main-sec-ff;
    }
}

属性嵌套（有冒号）

.headline{
    font:{
        family: $main-sec-ff;
	size: 16px;
    }
}

父选择器的标识符&

在嵌套的代码块内，可以使用&引用父元素,如a:hover可以写成

a {
    color: blue;
    &:hover {
        color: red;
    }
    &.active {
        color: orange;
    }
}

• 注释
  • 单行注释
    
    //单行注释,sass文件编译后不保留
  • 文档注释
    
    /*文档注释,文件编译后保留.*/
    
    中文的注释必须在scss文件头部启用编码声明：@charset "utf-8";
• 混合器mixin
  
  @mixin通过 @include来调用。

@mixin col-6{
	width: 50%;
	float: left;
}
.webdemo-sec{
	@include col-6();
	&:hover{
		background-color: #f5f5f5;
	}
}

可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置缺省值。

@mixin col($width: 50%, $float: left){	//冒号后面是默认值
	width: $width;
	float: $float;
}

• 选择器继承
  
  选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。这个通过 @extend语法实现。注意：@extend不能继承.A .B{}这样的选择器序列。

.hint{
	border:1px solid #f00;
}
.error{
	@extend .hint;
	color: #f00;
}
//css样式
.hint, .error {
	border: 1px solid #f00;
}
.error {
	color: #f00;
}

不希望出现在css，仅用于继承的选择器可以使用%

%hint{
	border:1px solid #f00;
}
.error{
	@extend %hint;
	color: #f00;
}
//css样式
.error {
	border: 1px solid #f00;
}
.error {
	color: #f00;
}

• @media

.webdemo-sec{
	@include col-sm();
	&:hover{
		background-color: #f5f5f5;
	}
}
.webdemo-sec{
	@include col-sm();
	&:hover{
		background-color: #f5f5f5;
	}
}
//编译得到
@media (min-width: 768px) {
	.webdemo-sec {
		width: 50%;
		float: left;
	}
}

• @at-root 跳出嵌套，将样式提升到最外层

.main-sec{
	font-family:$main-sec-ff;
	@at-root{
		.headline{
			font:{
				family: $main-sec-ff;
				size: 16px;
			}
		}
		.detail{
			font-size:12px;
		}
	}
}
//编译得到
.main-sec {
  font-family: Arial, Verdana, Helvetica, sans-serif;
}
.headline {
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-size: 16px;
}
.detail {
  font-size: 12px;
}

• @if指令可以判断变量的值，配套的还有 @else、@else if

@mixin col($width: 50%){
	@if $width > 50%{
		$width: 50%;
	}
	width: $width;
	float: left;
}
.webdemo-sec{
	@include col(80%);
	&:hover{
		background-color: #f5f5f5;
	}
}
//编译得到
.webdemo-sec {
	width: 50%;
	float: left;
}

以上。