scss

King

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;    }}// ==> cssh1 {  font-size: 32px; }h2 {  font-size: 20px; }h3 {  font-size: 14px; }

4.3 scss嵌套

// scsshtml {     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;        }    }}// ==> csshtml {  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; }

计算机

2022年2月03日