css预处理器之sass
Sass的基本介绍:
1、sass是css的一个预编译处理器。增加了规则、变量、混入、选择器、继承等等特性。它是用ruby语言编写的，集合了两种语法：
- 缩排语法（或者就称为
"Sass"）
提供了一种更简洁的CSS书写方式。 它不使用花括号{}，而是通过缩排的方式来表达选择符的嵌套层级，I而且也不使用分号，而是用换行符来分隔属性。类似于ruby语言，文件名以.sass为后缀。
body
color:#fff;
font-size:14px;
- 对css的扩展
语法格式跟css完全一样，用大括号将选择器的属性包裹起来。比较适合于前端工程师。
body {
color:#fff;
font-size:14px;
}
-
Sass的安装和基本命令[两种方式]
-
标准的方式[方式一]
因为sass是基于ruby语言编写的，所有安装sass之前，得先安装ruby语言。可以去官网http://rubyinstaller.org和http://rubyinstaller.org 下载。
检测是否安装成功，在cmd命令行中输入:
ruby -v //检测版本号
ruby的可以通过它的包管理器gem安装程序，更改RubyGems的访问地址，默认是放在亚马逊的服务器上，国内难访问得到。通过命令:
// 移除默认的地址
gem sources -remove [https://rubygems.org/](https://rubygems.org/)
// 添加这个镜像地址，如果https协议可以用，就用https,不行就用http
gem sources -a[http://gems.ruby-china.org/](http://gems.ruby-china.org/)
// 查看地址
gem sources -l
安装sass：
gem install sass //安装sass
sass -v //查看sass的版本
gem update //更新所有的ruby程序包
gem list //列出所有安装的ruby程序包
gem install sass --version=3.3.0 //安装特定版本的程序包
gem uninstall sass --version=3.3.0 //移除当前程序包
SASS的一些常用命令：
sass style.scss style.css //将style.scss编译为 style.css
sass --watch style.scss:style.css //实时更新style.css
sass-convert style.css style.sass //将.css文件转换为.sass文件
sass-convert style.css style.scss //将.css文件转换为.scss文件
- npm安装方式
随着 webpack模块化打包工具的越来越流行，安装sass，已经没必要像传统方式那样繁琐了。因为 webpack的loader加载器插件已经有了对sass的支持，废话不多说。
首先得安装nodejs 和 webpack，这里不多余讲解webpack的用法了，只讲述使用sass 那一部分。
通过npm命令安装 sass依赖的包node-sass sass-loader css-loader style-loader ：
npm i -D node-sass sass-loader css-loader
然后再 webpack.config.js 文件中配置支持sass 语法：
// 省略了其他的配置项
export.modules={
..... // 省略
module:{
rules:[
{
test:/\.scss$/,
use:[
"style-loader",
"css-loader",
"sass-loader"
]
}
]
}
}
这样任何.js 文件中通过 require直接引用.scss文件了，比如：
// main.scss文件中
body {
font:{
size:14px;
weight:400;
}
}
然后可以直接在index.js 中引入：
require "./main.scss"
当编译的时候，通过webpack 的sass-loader配置，会自动的编译成浏览器能识别的css 样式。
-
sass语法：
变量：
sass 可以像编程语言那样，通过对一个样式赋值给一个自定义的名字。任何需要这个样式的类名，就可以赋值这个名字。这就是变量的好处。
sass中变量通常以$ 开头，后面可以接任何英文字母。一般都会把变量的声明放在文件的头部，或者可以存放在一个单独的文件保存所有的变量,通过 @import 引入。例如：
$font_ss: 14px; // 声明了变量
.head {font-size:$font_ss}; //引用变量
编译成CSS效果:
```
.head {font-size:14px;};
```
@import:
sass 的 @import跟css的 @import，本质上完全不一样。css的 @import指令最好不用，它有两大弊端：
1、css 的 @import 必须放在代码的最开始，否则就不起作用。
2、对性能不利。我们假设是a文件引入b文件，只有当浏览器在解析到a中的@import 指令时，才会去下载 b 文件，浏览器处于一个阻塞的过程，大大影响了页面渲染的时间。
而sass的 @import指令，在编译阶段将所有 @import 指令引入的文件，合并到相应的css文件中，而且@import指令可以用在文档的任何地方。默认sass的@import相对于宿主文件寻路。被引入的文件不需要添加后缀名.scss/.sass，
例如,需要引入 name.scss 文件，只需要写成：
@import "name"
而且对于被引入的文件，通常以"_"开头的文件，引入时可以省略"_"，例如："_versital.scss" 文件，引入时：
@import "versital"
sass的选择器：
- 嵌套选择器：
直接上实例代码，在.scss文件中
.class {
margin：0; padding:0;
.class-child {
width:40px;
height:40px;
}
}
编译输出的.css文件：
.class {
margin:0;auto
}
.class .class-child{
width:40px;
height:40px;
}
- 伪类选择器：
默认 css 中的伪类选择器只需要在选择器后面添加 :hover 即可，而在sass 中，需要使用一个特殊字符"&"，表示的是直接父元素，实例代码，在.scss文件中
a {
&:hover {
color:#f00;
}
}
编译输出的.css文件：
a:hover{
color:#f00
};
如果不加 "&"，结果就变成了:
a :hover {color:#f00};
就不是想要的效果了。
- 群组选择器：
这个跟css使用方法完全一样，这里就不概述了。
sass不但可以对选择器进行嵌套，还可以对属性进行嵌套，实例代码，在.scss文件中：
.a{
font:{
weight:700;
size:14px;
}
}
在.css文件中输出的结果:
a {
font-size:14px;
font-weight:700;
}
sass 选择器用法大致与css 相同，所以关键是要把css 的语法掌握好，自然的,sass语法就不在话下了！
- sass的函数：
sass的函数主要分两大类：
-
1、通过function定义的函数，这个使用的相对较少。这里不多说了！
-
2、通过@mixin 创建函数，通过@include 调用函数。
-
@mixin 函数：
@mixin 函数跟普通函数的使用方法差不多。语法：
// 定义：
@mixin name([params]){
margin:0;
}
调用：
.class{
@include name([params])；
}
输出在.css文件中：
.class {
margin:0;
}
参数：
==name:== 定义的函数的命名，
==params：== 定义时，需要传入的参数。可以省略的。比如：
@mixin name ($width){
width:$width；
}
调用时：
.class{
@include name(700px)
}
编译输出在.css文件中：
.class {
width:700px;
}
如果既不想在调用的时候写上参数，但又想有个默认值，怎么办？可以这样写：
@mixin name (@width:200px;) {
width:@width;
}
调用时不填参数：
.class {
@include name;
}
编译输出的结果：
.class {
width:200px;
}
如果想更改参数的默认值，可以传一个新的数值：
.class1 {
@include name (50%);
};
输出的结果：
.class1{
width:50%
};
- @extend:
在css中，当一个class类，想拥有另外一个class类的样式属性时，通常的做法在html中给它添加相同的类名，比如：
<div class="alert">今天你学习了吗？</div>
<div class="alert-sure">今天我学习了</div>
如果说 .alert-sure 的DIV中，也想要 .alert 的 DIV 的样式。传统做法有两种：
-
1、在
css中，将alert类的属性复制到一份到.alert-sure中 -
2、在
html中，给.alert-sure类再添加一个.alert类而在sass中，可以通过@extend函数实现继承。不在需要这种多余的代码了。比如，在.scss文件中:
.alert{
font-size:14px;
width:50px;
}
给.alert-sure 类添加的样式：
.alert-sure {
@extend .alert；
height:50px;
}
在.css文件中输出的结果就是:
.alert，.alert-sure {
font-size:14px;
width:50px;
}
.alert-sure {
height:50px;
}
这样很好的降低了代码的冗余。
但 @extend的继承有一个需要注意的问题。它的继承会影响到后代选择器中的元素样式，所有使用继承，尽量避免使用css层叠。
- 1、如果被继承的类仅仅只是为了继承，而对页面的样式无修饰作用，可以通过添加前缀
"%"
，那样它就不会被渲染到.css文件中！
比如:
%alert{
width:20px;
margin:0;
}
.alert-sure {
@extend %alert;
}
输出的.css文件就只有 .alert-sure类：
.alert-sure {
width:20px;
margin:0;
}
而 %alert 类不会输出到.css 文件中
- 2、另外，@extend是不能继承选择器序列的：
.A .B {
/***这样的文件是无法继承的***/
}
- @media query:
sass 中的 @media 跟CSS 区别：
sass中的 media query 可以内嵌在css规则中，在生成CSS的时候，才会把media query 提到样式的最高层级。
这样的好处，避免了重复书写选择器。比如：
@mixin col-sm($width:50%){
@media(min-width:768px)}{
width:$width;
float:left
}
}
调用的时候：
.webdemo-sec {
@include col-sm();
}
输出在.css文件中的结果就是：
@media (min-width:768px ){
.webdemo-sec {
width:50%;
float:left;
}
}
- @at-root指令：
在sass中，虽然它的嵌套规则确实很棒，但是也有个致命的缺点，对性能的影响不好，但如果不使用嵌套呢，代码的可读性又特别的差，所以sass中就有了一个 @at-root 指令，
它的作用就是把它包裹的所有选择器，提到样式的最外层。
既保证了代码的可读性，又提高了性能。比如，在 .scss 中：
.btn {
width:50px;
height:50px;
@at-root {
.btn-success{
color:#f00;
line-height:1;
}
.btn-info {
color:#0f0;
margin:0 auto;
}
}
}
输出的.css文件：
.btn {
width:50px;
height:50px;
}
.btn-success {
color:#f00;
line-height:1;
}
.btn-info {
color:#0f0;
margin:0 auto;
}
总结：
sass作为css 的一个强大的预处理器，可以有效的提高工作的效率，减少代码的冗余性。同时，也便利了代码的整理维护和修改。它的主要功能就是上面的这些。虽然简单，但首先必须需要CSS！
