scss

目录

• 1、回顾gulp的使用方法
• 2、sass语法
  • 2.1 css的编译模式
  • 2.2 sass介绍
  • 2.3 如何使用scss
• 3、sass用法
  • 3.1 安装 sass 模块
  • 3.2 配置处理scss文件gulp的任务
• 4、学习scss 语法
  • 4.1 学习scss的注释语句
  • 4.2 变量
    • 4.2.1 单值变量
    • 4.2.2 scss做四则运算
    • 4.2.3 多值变量
    • 4.2.4 复杂变量 - 循环
  • 4.3 scss嵌套
  • 4.4 mixin 混入
  • 4.5 扩展 / 继承
  • 4.6 函数
  • 4.7 条件判断
  • 4.8 导入另一个scss文件

1、回顾gulp的使用方法

2、sass语法

2.1 css的编译模式

• css --- 普通
• sass / scss --- 高效 // *********
• less --- 高效

2.2 sass介绍

• 来源： ruby语言
• 基础的版本，后缀名为sass：没有{},只能通过缩进来实现 -- 可读性差、难以维护

// css
.box {width: 100px}
// .sass
.box width: 100px; // 据说是这样

• .scss 后缀 --- 可读性高、便于维护

html { background: red }
 // scss语法--嵌套 --- 权重
.box {
    color: blue;
    .test {
        font-size: 20px;
    }
}
// ==》
.box {color: blue;}
.box .test { font-size: 20px;}

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

3.2 配置处理scss文件gulp的任务

gulp.task('scss2css', () => {
    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中监听
 gulp.watch('scss/**/*', ['scss2css'])
// 在build中构建
gulp.task('build', ['copy-html', 'copy-css', 'copy-js', 'copy-data', 'copy-assets', 'scss2css'], () => {
    console.log('success')
})

4、学习scss 语法

4.1 学习scss的注释语句

• 单行注释 --- 推荐使用

使用//来完成单行注释---和js类似
并不会编译成css

• 多行注释

使用的/* */ 来完成多行注释 --- 和 js类似
先编译成css文件，然后再注释掉css文件

4.2 变量

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

scss对于;很敏感，记住写;

4.2.1 单值变量

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

// ==> css
.box {
  background-color: red; }

4.2.2 scss做四则运算

// scss
$baseColor: red;
html {
    color: $baseColor;
    border: 1px solid $baseColor - 80;
    background-color: $baseColor / 2;
    background: $baseColor + 200;
}

// ==> css
html {
  color: red;
  border: 1px solid #af0000;
  background-color: maroon;
  background: #ffc8c8; }

4.2.3 多值变量

多值变量使用 nth(变量名, 索引值) 索引值起始值为1 --- 类似于css中 nth-child

还不如写多个单值变量 --- 并不是 --- 假设需要设定一组button按钮的样式

// scss
$baseColor: red blue;
html {
    background: nth($baseColor, 1);
    color: nth($baseColor, 2);
}
// ==> css
html {
  background: red;
  color: blue; }

4.2.4 复杂变量 - 循环

// scss
$list: (top 30px) (right 30px) (bottom 10px) (left 40px);
@each $name, $value in $list{
    .box-#{$name} {
        width: $value;
    }
}

// ==>
.box-top {
  width: 30px; }

.box-right {
  width: 30px; }

.box-bottom {
  width: 10px; }

.box-left {
  width: 40px; }

// scss
$headers: (h1: 32px, h2: 20px, h3: 14px);
@each $key, $value in $headers {
    #{$key} {
        font-size: $value;
    }
}
// ==> css
h1 {
  font-size: 32px; }

h2 {
  font-size: 20px; }

h3 {
  font-size: 14px; }

4.3 scss嵌套

// scss
html { 
    font-size: 12px;
    body {
        background: #f66;
        header {
            width: 100%;
            height: 40px;
            nav {
                background-color: #00f;
            }
        }
        section {
            width: 100%;
            min-height: 500px;
        }
        footer {
            width: 100%;
            height: 60px;
        }
    }
}
// ==> css
html {
  font-size: 12px; }
  html body {
    background: #f66; }
    html body header {
      width: 100%;
      height: 40px; }
      html body header nav {
        background-color: #00f; }
    html body section {
      width: 100%;
      min-height: 500px; }
    html body footer {
      width: 100%;
      height: 60px; }

4.4 mixin 混入

• 无参数

// scss
@mixin marginCenter {
    margin: 0 auto;
}

.container {
    width: 1000px;
    min-height: 600px;
    // margin: 0 auto;
    @include marginCenter();
}

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

• 有参数

// scss
@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; }

• 解决兼容问题

//scss
@mixin flexbox {
    display:-webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.nav {
    ul {
        @include flexbox();
        li{
            color: #333;
        }
    }
}
footer {
    ul {
        @include flexbox();
        li{
            font-size: 14px;
        }
    }
}

// ==> css
.nav ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; }
  .nav ul li {
    color: #333; }

footer ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; }
  footer ul li {
    font-size: 14px; }

• 混入 默认参数

// scss
@mixin opacity($val: 1) {
    opacity: $val;
}
.box {
    @include opacity();
}
.box1 {
    @include opacity(0.5);
}
// ==> css
.box {
  opacity: 1; }

.box1 {
  opacity: 0.5; }

4.5 扩展 / 继承

// scss
.active {
    background-color: #f66;
    color: #fff;
}
.success {
    // background-color: #f66;
    // color: #fff;
    @extend .active;
    font-size: 30px;
}
// ==> css
.active, .success {
  background-color: #f66;
  color: #fff; }

.success {
  font-size: 30px; }

4.6 函数

// scss
@function dark($color, $val) {
    @return $color - $val;
}
@function light($color, $val) {
    @return $color + $val;
}
.text {
    color: dark(red, 200);
}
.text1 {
    color: light(red, 200);
}
// ==> 
.text {
  color: #370000; }

.text1 {
  color: #ffc8c8; }

4.7 条件判断

// scss
// @mixin flex($val: 1) {
//     box-flex:$val;
//     -webkit-box-flex:$val;
//     -moz-box-flex:$val;
//     flex:$val;
//     -webkit-flex:$val;
// }

@mixin flex($val) {
    @if $val == auto {
        box-flex:1;
        -webkit-box-flex:1;
        -moz-box-flex:1;
        flex:1;
        -webkit-flex:1;
    } @else {
        box-flex:$val;
        -webkit-box-flex:$val;
        -moz-box-flex:$val;
        flex:$val;
        -webkit-flex:$val;
    }
}

.test {
    @include flex(auto);
}

li {
    @include flex(3);
}
// ==> css
.test {
  box-flex: 1;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  flex: 1;
  -webkit-flex: 1; }

li {
  box-flex: 3;
  -webkit-box-flex: 3;
  -moz-box-flex: 3;
  flex: 3;
  -webkit-flex: 3; }

4.8 导入另一个scss文件

// val.scss 变量
$baseColor: red;
$baseFontSize: 12px;
// base.scss 混入
@mixin flex {
    flex: 1
}
// test.scss 应用
@import 'val.scss';
@import 'base.scss';

.box {
    @include flex();
    font-size: $baseFontSize;
}

// ==》 css
.box {
  flex: 1;
  font-size: 12px; }