sass入门及环境配置

2019-07-29 本文已影响0人爱吃香菜的憨憨

一、sass定义

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量、嵌套、混合、导入等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass有助于更好地组织管理样式文件，以及更高效地开发项目。

二、环境配置（vue3.0）

1.安装sass相关插件(使用淘宝镜像，提高安装速度)

cnpm install sass  --save-dev
cnpm install node-sass --save-dev
cnpm install sass-loader --save-dev

2.配置vue.config.js
疑问：vue-cli3.0版本，安装完成之后找不到config、build等目录？
解答：查看官网文档发现，简化成使用vue.config.js来配置项目

module.exports = {
    // 配置stylelint，css语法检测自动修复
    pluginOptions: {
        lintStyleOnBuild: true,
        stylelint: {
            fix: true, // boolean (default: true)
        },
    },
  // 配置scss, 使用sassScript
    test: /\.scss$/,
    loader: 'sass-loader!style-loader!css-loader',
    options: {
        loaders: {
            scss: 'vue-style-loader!css-loader!sass-loader', // <style lang="scss">
            sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax', // <style lang="sass">
        },
    },
};

三、css扩展功能

1.嵌套规则
定义：内层的样式将它外层的选择器作为父选择器
优点：嵌套功能避免了重复输入父选择器，而且令复杂的 CSS 结构更易于管理

.header {
    width: 100%;
    height: 30px;
    background: rgba(0, 0, 0, 0.6);
    
    .head-title {
        font-size: 18px;
        color: #ffffff;
    }
    
    .account {
        float: right;
        width: 120px;
        height: 30px;
        linght-height: 30px;
    }
}

编译为

.header {
    width: 100%;
    height: 30px;
    background: rgba(0, 0, 0, 0.6);
}
.header  .head-title {
    font-size: 18px;
    color: #ffffff;
}
.header .account {
    float: right;
    width: 120px;
    height: 30px;
    linght-height: 30px;
}

2.父选择器
定义：在嵌套 CSS 规则时，可以用 & 代表嵌套规则外层的父选择器

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}

编译为

#main { color: black; }
#main a { font-weight: bold; }
#main a:hover { color: red; }

&必须作为选择器的第一个字符，其后可以跟随后缀生成复合的选择器

#main {
  color: black;
  &-sidebar { border: 1px solid; }
}

编译为：

#main  {  color: black; }
#main-sidebar  { border: 1px solid; }

3.属性嵌套
定义：有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

编译为

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; 
}

命名空间也可以包含自己的属性值

.box {
    border: 1px solid red {
        border-left: none;
    }
}

四、注释

定义：Sass 支持标准的 CSS 多行注释 /* */，以及单行注释 //，前者会被完整输出到编译后的 CSS 文件中，而后者则不会

五、sassScript

定义：可作用于任何属性，允许属性使用变量、算数运算等额外功能
1.变量
定义:以美元$开头，赋值方法与css属性写法一样

// 定义变量
$width: 120px;
.header {
    width: $width; // 直接使用变量
    height: 30px;
}

sass的变量与js的变量一样，也支持块级作用域，分为全局变量和局部变量
全局变量：不在嵌套规则内定义的变量，可在任何地方使用
局部变量：嵌套规则内定义的变量只能在嵌套规则内使用
将局部变量转换为全局变量可以添加 !global 声明：

#main {
    $width: 120px !global;
    width: $width;
}
#box {
    width: $width;
}

2.数据类型
定义：sassScript支持6种主要的数据类型

数字，1, 2, 13, 10px

字符串，有引号字符串与无引号字符串，"foo", 'bar', baz

颜色，blue, #04a3f9, rgba(255,0,0,0.5)

布尔型，true, false

空值，null

数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif

maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)