关于sass的基础语法介绍

注：主要做为记录用

前言：

　　 sass是css预编译工具中的一种，结合compass使用能够大大加快css开发的速度，同时也能够解决一些css开发里比较难受的点。使用sass可使css的开发对编程人员更友好。

安装和使用:

　　 sass基于ruby，首先须要去ruby官网下载安装ruby。ruby下载地址.

　　　下载安装过程很简单，记得勾选添加到PATH。以后就能够在命令行里经过 ruby -v 来查看是否安装成功。

　　　而后就可使用gem包管理工具了 由于容易被墙 须要换源：

　　　　gem sources --add https://gems.ruby-china.org/ --remove https://rubygems.org/

　　　可能会碰到SSL证书问题， 改成 http://gems.ruby-china.org/

　　　以后用gem install sass 安装sass

　　　同时能够用gem install compass 安装compass

　　　成功后就可使用了，能够在一个目录下，使用 compass create projectName 来新建一个sass项目

　　　而后使用 compass watch能够监听而且实时reload项目 获得编译后输出的css文件。

　　　关于cpmpass的使用会在以后总结。先来说讲Sass。

 

Sass语法：

　　注： sass由于历史缘由存在scss以及sass两种文件后缀名，采用了不一样的语法。sass使用缩进来进行嵌套，语法简洁开发高效，可是很是用者难以阅读。scss语法相似css的嵌套，方便阅读，本文均采用scss。
本文的介绍按照经常使用程度来，只记录了一些经常使用核心功能，详细介绍请阅读官方文档

　　变量：

　　　　抽象出网页上须要复用的样式，定义成变量。

　　　　变量像这样： $screen-ff: Arial;

　　　　使用变量: .screen {font-family: $screen-ff;}

　　　　会被自动编译为： .nav {height: Arial;}

　　　　通常把变量定义放在一个单独的文件里，例如_variables.scss(文件名字前加下划线说明是个模块，模块与待编译文件不能重名)而后用@import "variables"方法导入。

　　　　@import 与css原生的指令不一样。

　　嵌套:

.screen {
height: $screen-ff;

.head {
font-size: 14px;
}
}
输出为:

.screen {
height: Arial;
}
.screen .head {
font-size: 14px;
}
属性也能够嵌套:

.head {
font: {
family: $screen-ff;
size: 14px;
}
}
这样的嵌套可能会引起问题:

a {
:hover {
color: #66ccff;
}
}
输出为:

a :hover {
color: #66ccff;
}

这会让a标签里包含的子级标签得到此样式，这不是咱们想要的结果,此时须要使用&来确认引入父级标签

改写为:

a {
&:hover {
color: #66ccff;
}
}
输出变为:

a:hover {
color: #66ccff;
}

mixin:
通常在遇到网页上有重复功能的div的时候，使用mixin来构建一个模板，进行复用。mixin也可做为局部文件引入

示例:

@mixin col ($width: 50%) {
width: $width;
float: left;
}

这个方法用于设置一个模块占屏比，在传参的时候能够设置默认参数。
使用：

.body {
@include col(25%);
}
输出:

.body {
width: 25%;
float: left;
}

 

extend:
你们都熟悉的继承，当想要构建一些新的元素，又存在了相似元素的时候，能够经过继承来简化代码结构，加快开发和运行。
好比存在这样一个样式:

.danger {
color: #f00;
}

咱们想加一个更高程度的样式:

.danger-serious {
color: #f00;
border: 2px #f00;
}

这样就出现了代码冗余，经过extend改造:

.danger {
color: #f00;
}
.danger-serious {
@extend .danger;
border: 2px #f00;
}

输出为:

.danger, .danger-serious {
color: #f00;
}
.danger-serious {
border: 2px #f00;
}

若是不须要使用.danger样式，能够把.error改成%eroor，只用来继承，自身不输出（类比构造函数？）
可能要比较复杂的样式才能体现出extend的威力...
extend与类的继承不一样，更像是接口的继承，用于引入父级样式类的全部属性。
此外，extend不能继承嵌套的选择器序列。

sass的基本语法就说这些。此外sass还有不少自带的函数，用于构建更加庞大的插件模块，做为开发者的咱们本身去编写这些插件是很低效的，因此咱们通常使用Compass框架来提升sass的使用效率。