css语言局限性

众所周知，CSS(层叠样式表)是一个控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。算不上什么编程语言。

Css语言局限性：

• 无法定义变量。
• 没有运算概念。
• 不能明确地指定继承性
• 没有函数功能以及逻辑程序。

CSS 预处理器是什么？

CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。
解决我们书写 CSS 时难以解决的问题：

• 语法不够强大，比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器。
• 没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。

CSS 预处理器语言

CSS 预处理器技术已经非常的成熟，而且也涌现出了很多种不同的CSS 预处理器语言，比如说：

• Sass（SCSS）
• LESS
• Stylus
• Turbine
• Swithch CSS

…….

到目前为止，在众多优秀的 CSS 预处理器语言中就属 Sass、LESS 和 Stylus 最优秀。将着重向大家介绍 CSS 预处理器中的 Scss。

Sass安装环境

Sass依赖于ruby环境，所以装sass之前先确认装了ruby。

打开电脑命令终端，执行命令gem install sass 。

确认自己是否安装 Sass 成功。运行sass –v。如出现以下字段，则表示安装成功。

Sass编译

sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

你也可以让SASS监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本。
　　　// 监听文件
　　sass --watch input.scss:output.css
　　// 监听文件夹
　　sass --watch app/sass:public/stylesheets

常见编译错误：
常见的一个错误就是字符编译引起的。所以在创建 Sass 文件时，就需要将文件编码设置为“utf-8”。

另外一个错误就是路径中的中文字符引起的。建议在项目中文件命名或者文件目录命名不要使用中文字符。而至于人为失误造成的编译失败，在编译过程中都会有具体的说明，大家可以根据编译器提供的错误信息进行对应的修改。

参考资料：http://www.jianshu.com/p/8b4b27eb698d

Sass的基本特性-变量

变量声明

$fontSize: 12px;

sass 的默认变量仅需要在值后面加上 !default 即可。

$baseLineHeight:1.5 !default;

变量调用

属性名 : 变量名;

font-zize : $fontSize;

全局变量和局部变量

$color: orange !default; //定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量)

.block {
　　color: $color;//调用全局变量
}
em {
　　$color: red;//定义局部变量
　　a {
　　　　color: $color;//调用局部变量
　　}
}

 上述代码编译出来:

.block {

　　color：orange;
}

em  a {

　　color: red;

}

Sass的基本特性-嵌套

选择器嵌套

div {　　

　　hi {　

　　　color:red;　

　　}　　

}

编译出的css:

div  h1 {　　　　

　　color : red;

}

属性嵌套

.box {
　　border: {
　　　　top: 1px solid red;
　　　　bottom: 1px solid green;
　　}
}
编译出的css:

.box {
　　border-top: 1px solid red;
　　border-bottom: 1px solid green;
}

伪类嵌套

.clearfix {
　　&:before,
　　&:after {
　　　　content:"";
　　　　display: table;
　　}
　　&:after {
　　　　clear:both;
　　　　overflow: hidden;
　　}

}

编译出css:

clearfix:before, .clearfix:after {
　　content: "";
　　display: table;
}
.clearfix:after {
　　clear: both;
　　overflow: hidden;
}

sass入門，以及如何高效开发CSS