scss

1.sass介绍

sass是成熟、稳定、强大的CSS预处理器，而SCSS是Sass3版本当中引入的新语法特性，完全兼容CSS3的同时继承了Sass强大的动态功能。

2.1 css的编译模式
　　css             ---普通
　　sass /scss  ---高效 **
　　ess             ---高效

2.2 sass的介绍
　　来源:ruby公司 基于ruby语言
　　基础版本,后缀名为sass 没有{} 只能通过缩进来实现 --- 可读性差,难以维护
　　.scss --- 可读性高,便于维护 -- 嵌套 --不用担心权重问题

2.3 如何使用scss

　　最终需要使用的是css文件,而编写的是scss文件
　　通常需要转换工具 gulp / webpack / ruby工具 /编辑器插件
　　这里主要使用gulp处理scss文件

3. sass的用法

3.1安装 sass 模块

安装命令

• cnpm i gulp-sass -s (推荐)
• cnpm i gulp-sass-china -s

 配置处理scss文件gulp的任务

gulp.task('scss2css', () => {   //即scss to css

　　gulp.src('scss/**/*')

　　　　.pipe(concat('main.scss'))   //合并scss文件

　　　　.pipe(sass())  //转为css文件

　　　　.pipe(gulp.dest('dist/css'))  

　　　　.pipe(minifyCss())  //压缩

　　　　.pipe (rename( main. min.css' ) ) //重命名
　　　　.pipe(gulp.dest( 'dist/css'))
　　　　.pipe(connect . reload( ))

})
//在watch中监听
//在build中构建

 4.学习scss语法

4.1 scss的注释语句

　　单行注释 : (推荐)

　　　　使用双斜杠// 完成单行注释 (类似于js)

　　　　并不会编译成css文件

　　多行注释 :

　　　　使用的是/*注释内容*/ ,完成多行注释(类似于js)

　　　　会编译成css文件,并在css文件中注释掉　　

 4.2 变量

　　scss给css赋予了动态语言的特性(变量,函数,条件判断,循环...)

4.2.1 单值变量

注意:scss对分号很敏感,一定要写分号

可以将属性保存在变量中

$baseColor : red;
.box {background-color : $baseColor;}

//转换成css

.box(background-color : red;)

4.2.2 scss做四则运算

$baseColor :red ;
html{background-color:$baseColor - 100;}

//转换成css

html{background-color:#9b0000;}

4.2.3 多值变量

多值变量使用语法

nth(变量名,索引值)   ==>索引值起始为1;

优点:解决代码体积;

$baseColor: red blue;
html(background-color: nth($baseColor,1);color:nth($baseColor,2));

//转换css

html(background-color: red;color:blue);

4.2.4 复杂变量

会遍历数据,类似于for-in的原理 

如下实例;遍历list中的数据,设置不同的box的   不同width和height;

$list:(top 20px 30px) (Ieft 40px 50px) (right 60px 70px) ;

@each $name, $width, $height in $list{
        .box-# {$name} {
            width: $width;
            height: $height;
        }
}

//转成css

.box-top {
    width:20px;
　　height:30px;
}
.box-right {width:40px;height:50px;}

 4.3 scss的嵌套

html {
    font-size: 12px;
　　　　body {
　　　　　　background:#f66;
　　　　　　　　header {
　　　　　　　　　　width: 100%;
　　　　　　　　　　height: 40px;
　　　　　　　　　}
　　　　　　　}
　　　　　}
//不用担心标签的权重问题

4.4 mixin 混入

语法:  @mixin marginCenter { }

//无参数
@mixin marginCenter {
  margin: 0 auto;  
}
.container {width:1000px;min-height:600px;@include marginCenter}

//转换为css

.container {width:1000px;min-height:600px;margin: 0 auto;}

 

//有参数

@mixin margin($top $right $bottom $left) {
  margin: $top $right $bottom $left;  
}
.container {
　　@include margin(10px,10px,20px,20px);
}

//转换为css

.container {margin:10px,10px,20px,20px}

 

//解决兼容问题 例如弹性盒的兼容问题
@mixin flexbox {
　　display : -webkit- box;
　　display: -moz- box;
　　display: -ms-flexbox;
　　display:一 webkit-flex;
　　display: flex;
}

 

//混入的默认参数

@mixin opacity($val: 1) {

　　opacity: $val;

}

//调用opacity,不传参数的话,默认是1;

 

4.5  扩展/继承

可以继承其他的样式,无需重复书写

.active{

        border:1px solid #b6b6b6;

        padding:10px;

        color: #333;

    }

    .success{

        @extend .active;

        width:100px;

    }

//转换css

. active, . success {background-color:#f66;color:#fff; }
. success {font-size: 30px; }

4.6 函数

sass定义了很多函数可供使用，当然你也可以自己定义函数，以@fuction开始。

    

实际项目中我们使用最多的应该是颜色函数，而颜色函数中又以lighten减淡和darken加深为最，

//减淡:
lighten($color,$amount)
//加深:
darken($color,$amount)

它们的第一个参数都是颜色值，第二个参数都是百分比。

//加深函数
@function dark($color, $val) {
　　@return $color / $val;
}
.text {dark: color([ red, 5%);

//转换css

.text {color:#330000;}

 

4.7 条件判断

拓展部分：

 

@if判断

@if可一个条件单独使用，也可以和@else结合多条件使用

 

$lte7: true;
$type: monster;
.ib{
  display:inline-block;
  @if $lte7 {
    *display:inline;
    *zoom:1;
  }
}
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}
 

 

三目判断

 

语法为：if($condition, $if_true, $if_false) 。三个参数分别表示：条件，条件为真的值，条件为假的值。

 

if(true, 1px, 2px) => 1px

if(false, 1px, 2px) => 2px

 

for循环***

 

for循环有两种形式，分别为：@for $var from <start> through <end>和@for $var from <start> to <end>。$i表示变量，start表示起始值，end表示结束值，这两个的区别是关键字through表示包括end这个数，而to则不包括end这个数。

 

.item-1 {width: 2em;}
.item-2 {width: 4em;}
.item-3 {width: 6em;}

 

 

@each循环

 

语法为：@each $var in <list or map>。其中$var表示变量，而list和map表示list类型数据和map类型数据。

 $animal-list: puma, sea-slug, egret, salamander;
@each $animal in $animal-list {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

 

4.8 导入另一个scss文件

@import "文件名.scss";