CSS编程框架 - SASS之旅

CSS

开发网页样式，它不是一种编程语言,没法用它编程。这对程序员来说是很痛苦的，毫无语言规范可言，

借用大牛阮一峰的说法就是：CSS基本上是设计师的工具，不是程序员的工具。在程序员眼里，CSS是一件很麻烦的东西。它没有变量，也没有条件语句，只是一行行单纯的描述，写起来相当费事。

SASS

SASS是一种专门为CSS而服务的编程语言，是CSS的开发工具，通过编程语言进行网页样式设计，然后再编译成正常的CSS文件。

提供了许多便利的写法，可以将CSS代码模块化，分而治之。更好的CSS编码体验。配合gulp，webpack的自动化构建工具来做编译和文件合并。大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。

安装与配置

step1：安装Ruby

SASS是依赖于Ruby语言环境的，必须先安装Ruby环境

在安装的时候，请勾选Add Ruby executables to your PATH这个选项，添加环境变量，不然以后使用编译软件的时候会提示找不到ruby环境。

step2: 通过ruby命令 gem安装sass

安装完ruby之后，在cmd命令行中执行,如下图打开

淘宝RubyGems镜像安装 sass

gem sources -a http://gems.ruby-china.org

gem sources -l

安装命令

gem install sass

升级sass版本的命令行为

gem update sass

SASS编译

SASS编译的方式有多种：

1.通过gulp进行集成编译 /kaola(本文不做说明)

2.通过命令行的方式进行编译（本文不做详解）

sass scss目录地址：输出目录地址

如 sass scss/main.scss:style/main.css

SASS命令行工具可以对目录进行自动监视，这样我们的目录下的文件发生了变化，SASS帮助我们自动编译，

将sass scss/main.scss的SASS源码编译到style/main.css文件中去。

sass --watch 监视的目录地址：自动编译的目录地址

通过--watch命令让sass工具自动监视目录，并自动进行编译

sass --watch watchdir:outputdir --style nested|compact|compressed|expended

通过 --style nested(嵌套-默认)|compact(紧促型)|compressed(压缩)|expended(扩展)命令，可以为sass生成css样式指定生成的格式

SASS提供四种编译格式的选项

nested：嵌套缩进的css代码，它是默认值。

expanded：没有缩进的、扩展的css代码。

compact：简洁格式的css代码。

compressed：压缩后的css代码。

 

3.通过webstorm开发工具进行编译

setp1:配置环境　　　　

 Webstorm -> File -> Setting -> Tool -> File Watchers -> 右侧“+” -> SCSS  ->ok

setp2:新建一个SCSS文件

结果如下：SCSS文件自动生成CSS文件和MAP关联文件

SASS语法结构

1.嵌套语法使用定义变量
$+变量名 : 值

$color : #ffff ;
$border : 1px solid red(多值);

2.嵌套语法使用
使用嵌套语法的好处，我们可以去掉样式里面的公共重复的部份,在使用嵌套语法时，

如果使用:hover这种伪类选择器时，嵌套语法会保留空格，我们为元素定义伪类是不能在元素和伪类之间有空格。(ie: a:hover)。

& : 用于引用父类名称 （如: & &-title{} => .nav .nav-title {} ）

这个时候我们就必须使用一个符号 "&:hover" 的方式，直接使用父类名称，不保留空格。可以在属性中使用嵌套:

.circle {
　　background-color: red;
　　background-origin: border-box;
　　background-repeat: no-repeat;
　　background-size: cover;
}
.circle2 {
　　background :{ //注意需要添加 ":" color: #000;
    origin: border-box;
    repeat: no-repeat;
    size: cover;
  　}
}

3.@mixin语法
mixin 是一种预先定义好的样式块，我们可以在其它的任何地方重复使用这个样式块。
语法结构:

@mixin 名称 （$参数..,$参数）{
　　.......
}
//使用@include进行mixin的调用
@include 名称 ($参数，... ) {
　　.......
}

4.@extend 继承语法
我们通过继承来减少重复的定义

.mm {
　　background-color: red;
    a {
　　　　text-align: center;
    }
}
.mm2 {
   @extend .mm; background-origin: border-box;
}

当子类从父类继承后，子类可以继承父类相关的引用 ie: a的嵌套
5.占位符 %placeholder
 

%icon {
   transition: background-color ease .2s;
   margin: 0 .5em;
 }
.error-icon {
　　@extend %icon;
  　/*错误图标指定的样式... */
}
.info-icon { @extend %icon;
　　/* 信息图标指定的样式... */
}

6.@import 引入partial样式语法

SASS扩展了@import的功能,

SASS使我们可以在一个CSS文件里面可以引入多个文件,并且编译成一个文件；

因些我们就可以把一个大的css文件，

分为多个 partials (partials 需要以下划线开头 ie: _header.scss),

引入时，我们只需要在文件的头部添加

@import "header"

这个时候，header.scss的下划线和扩展名都不需要添加了！@import "header";
7.Interpolation 把一个值插入到别一个值中
#{$变量名} : 用于引用定义的字符串

$version:"0.0.1";
/* hello test comments #{$version} */
$nns : "txt";
.nav-#{$nns} {
　　background-size: cover;
}

8.SASS 控制语名

$theme :"ddd";
.testif {
　　@if($theme == light) {
　　　　background-color: lightblue;
    } @else if($theme == red){
　　　　background-color: red;
    } @else {
　　　　background-color: black;
  　}
}
@for $i from 1 through 5 {
    .col-#{$i} {
　　　　width:10% *$i;
　　}
}
@each $var in <list/map>
$list: zhangsan lisi wangwu; $map:(red:#dddd) -> map-get($map,key)
@each $name in $list {
　　.photo-#{$name}{
　　　　background: url("#{$name}.jpg");
　　}
}

9.SASS 自定义函数

$ccs:(light:#ffffff,dark:#000000); //定义function
@function getColor($key){
　　@return map_get($ccs,$key);
}
@mixin aa(){ //调用@function
　　color: getColor(light);
}
//使用mixin
.testff {
　　@include aa()
}

敬请留言指正补充交流！！

（未完待续~~）