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

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

1 gem sources -l

安装命令

1 gem install sass

升级sass版本的命令行为

1 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.嵌套语法使用定义变量
$+变量名 : 值

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

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

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

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

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

 1 .circle {
 2 　　background-color: red;
 3 　　background-origin: border-box;
 4 　　background-repeat: no-repeat;
 5 　　background-size: cover;
 6 }
 7 .circle2 {
 8 　　background :{ //注意需要添加 ":" color: #000;
 9     origin: border-box;
10     repeat: no-repeat;
11     size: cover;
12   　}
13 }

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

1 @mixin 名称 （$参数..,$参数）{
2 　　.......
3 }
4 //使用@include进行mixin的调用
5 @include 名称 ($参数，... ) {
6 　　.......
7 }

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

1 .mm {
2 　　background-color: red;
3     a {
4 　　　　text-align: center;
5     }
6 }
7 .mm2 {
8    @extend .mm; background-origin: border-box;
9 }

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

 1 %icon {
 2    transition: background-color ease .2s;
 3    margin: 0 .5em;
 4  }
 5 .error-icon {
 6 　　@extend %icon;
 7   　/*错误图标指定的样式... */
 8 }
 9 .info-icon { @extend %icon;
10 　　/* 信息图标指定的样式... */
11 }

6.@import 引入partial样式语法

SASS扩展了@import的功能,

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

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

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

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

1 @import "header"

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

1 $version:"0.0.1";
2 /* hello test comments #{$version} */
3 $nns : "txt";
4 .nav-#{$nns} {
5 　　background-size: cover;
6 }

8.SASS 控制语名

 1 $theme :"ddd";
 2 .testif {
 3 　　@if($theme == light) {
 4 　　　　background-color: lightblue;
 5     } @else if($theme == red){
 6 　　　　background-color: red;
 7     } @else {
 8 　　　　background-color: black;
 9   　}
10 }
11 @for $i from 1 through 5 {
12     .col-#{$i} {
13 　　　　width:10% *$i;
14 　　}
15 }
16 @each $var in <list/map>
17 $list: zhangsan lisi wangwu; $map:(red:#dddd) -> map-get($map,key)
18 @each $name in $list {
19 　　.photo-#{$name}{
20 　　　　background: url("#{$name}.jpg");
21 　　}
22 }

9.SASS 自定义函数

 1 $ccs:(light:#ffffff,dark:#000000); //定义function
 2 @function getColor($key){
 3 　　@return map_get($ccs,$key);
 4 }
 5 @mixin aa(){ //调用@function
 6 　　color: getColor(light);
 7 }
 8 //使用mixin
 9 .testff {
10 　　@include aa()
11 }

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

（未完待续~~）

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有