WebApp实战系列课程 01-CSS编程框架(sass)

SASS 是成熟、稳定、强大的 CSS 扩展语言。

SASS 安装与配置

第一步：安装Ruby

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

ruby官方网站下载地址: http://rubyinstaller.org/downloads

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

第二步: 通过ruby命令 gem安装sass

安装完ruby之后，在cmd命令行中执行 gem install sass

 

gem install sass

淘宝RubyGems镜像安装 sass

$ gem sources --remove https://rubygems.org/

$ gem sources -a https://ruby.taobao.org/ 【如果你系统不支持https，请将淘宝源更换成：gem sources -a http://gems.ruby-china.org】 $ gem sources -l

*** CURRENT SOURCES ***

https://ruby.taobao.org

# 请确保只有 ruby.taobao.org

$ gem install sass

升级sass版本的命令行为

gem update sass

SASS编译

SASS编译的方式有多种：

1. 通过命令行的方式进行编译

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

1. 通过gulp进行集成编译 /kaola

通过命令行的方式进行编译

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

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

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

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

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

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

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

通过webstorm开发工具进行编译

--no-cache --update --style expended $FileName$:$FileNameWithoutExtension$.css

通过gulp进行集成编译

SASS语法结构

http://sass.bootcss.com/docs/sass-reference/

1.变量的定义

`$+变量名 : 值` 如 $color : #ffff | $border : 1px solid red(多值)

2.嵌套语法使用

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

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

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

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

可以在属性中使用嵌套:

.circle {

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 {

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;

/* 信息图标指定的样式... */

}

4.@import 引入partial样式语法

SASS扩展了@import的功能, SASS使我们可以在一个CSS文件里面可以引入多个文件,并且编译成一个文件； 因些我们就可以把一个大的css文件，分为多个 partials (partials 需要以下划线开头 ie: _header.scss), 引入时，我们只需要在文件的头部添加 @import "header"; 这个时候，header.scss的下划线和扩展名都不需要添加了！

@import "header";

5.Interpolation 把一个值插入到别一个值中

#{$变量名} : 用于引用定义的字符串

$version:"0.0.1";

/* hello test comments #{$version} */

$nns : "txt";

.nav-#{$nns} { background-size: cover;

}

6.SASS 控制语名

$theme :"ddd";

.testif {

@if($theme == light) {

} @else if($theme == red){

} @else { background-color: black;

}

}

@for $i from 1 through 5 {

.col-#{$i} { 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");

}

}

7.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()