随笔4、sass基础

悠悠 2023-08-17 15:58 139阅读 0赞

### 文章目录 ###

*  1、sass语法
 *   *  1.1 css的编译模式
     *  1.2 sass介绍
     *  1.3 如何使用scss
 *  2、sass用法
 *   *  2.1 安装 sass 模块
     *  2.2 配置处理scss文件gulp的任务
 *  3、学习scss 语法
 *   *  3.1 学习scss的注释语句
     *  3.2 变量
     *   *  3.2.1 单值变量
         *  3.2.2 scss做四则运算
         *  3.2.3 多值变量
         *  3.2.4 复杂变量 - 循环
     *  3.3 scss嵌套
     *  3.4 mixin 混入
     *  3.5 扩展 / 继承
     *  3.6 函数
     *  3.7 条件判断
     *  3.8 导入另一个scss文件

# 1、sass语法 #

## 1.1 css的编译模式 ##

*  css — 普通
 *  sass / scss — 高效 // \*\*\*\*\*\*\*\*\*
 *  less — 高效

## 1.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;}

## 1.3 如何使用scss ##

最终需要使用的是css文件，编写的scss文件

转换工具 gulp / webpack / ruby工具 / 编辑器插件

选用gulp来处理scss文件

# 2、sass用法 #

## 2.1 安装 sass 模块 ##

cnpm i gulp-sass -S (推荐)

cnpm i gulp-sass-china -S

## 2.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')
    })

# 3、学习scss 语法 #

## 3.1 学习scss的注释语句 ##

*  单行注释 — 推荐使用

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

*  多行注释

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

## 3.2 变量 ##

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

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

### 3.2.1 单值变量 ###

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

### 3.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; }

### 3.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; }

### 3.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; }

## 3.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; }

## 3.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; }

## 3.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; }

## 3.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; }

## 3.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; }

## 3.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; }