Sass/Scss

SASS/SCSS

谨为作者笔记用

  • 在sass/scss文件的第一行,我们需要写上一行注释
    • @charset”utf-8”
    • 以此当文件中存在中文时方才不会报错
  • sass与scss的区别自行百度,这里默认为scss的用法
  • scss的使用前需要安装Ruby,安装教程自行百度

基本操作 安装配置

  • 变量

    • scss中可以
      1
      2
      3
      4
      5
      6
        * 赋值号为 “:” 号
      * 变量的使用和操作逻辑与一般编程语言中的用法无二
      * 在Vue.js中的使用配置
      1. npm install -S sass-loader
      2. npm install -S node-sass  # 二者存在依赖关系,必须全部安装
      3. 修改style标签 ```<style lang="sass" rel="stylesheet/scss">
  • 编译

    1
    2
    3
    4
    5
    6
    7
    8
    9
    单个文件的编译
    sass --watch xxx.scss xxx.css

    单个文件的监听
    sass --watch xxx.scss:xxx.css

    监听整个目录
    sass --watch xxx/xxx
    一般而言,我们在实际开发中并不会只针对单个文件的编译。而是针对多个文件的编译,因此作者更偏爱使用这一命令。对于整个目录的监听并编译生成CSS文件输出到指定目录中。

属性用法

  1. 混合器/混入mixin
    1
    2
    3
    4
    5
    6
    定义语法为
    @mixin name{
    ruleContent
    }
    使用语法为
    @include name
  • 混合器还可以传参,例如

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    //定义mixin
    @mixin mixinTest($normal, $hover, $visited){
    color: $normal;
    &:hover{ color: $hover; };
    &:visited{ color: $visited; }
    }

    //mixin的使用
    .con{
    $widths: 120px;
    width: $widths;
    height: $widths;

    @include mixinTest(#000, red, green);
    }
  • 带参数的混合器还可以为形参指定默认值.

  1. 继承

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    定义语法与定义class样式方法无二。

    //继承的使用
    @extend 继承的类名

    //例如
    .error{
    border: 1px #f00;
    background-color: #fdd;
    }
    .seriousError{
    //继承的使用
    @extend .error;

    border-width: 3px;
    }
    //编译为
    .error, .seriousError{
    border: 1px #f00;
    background-color: #fdd;
    }
    .seriousError{
    border-width: 3px;
    }
  2. 导入其他文件

    1
    2
    @import fileName
    默认导入为scss文件
  3. 插值

    • 语法为#{}
    • 作者理解为花括号中的内容将会按照一定的方式进行解析而非简单的插入
    • 因此我们可以放入表达式与变量之类的进行解析才能得出正确结果的对象
    • 即使放在字符串中也会进行解析

基本的控制指令与表达式

  1. @if  内置分支函数

    1
    2
    3
    4
    5
    6
    7
    @if expression{

    }@else if expression{

    }@else{

    }
  2. @for

  • 该指令有两种形式

    1. for $var from
      through ``````
      1
      2. for $var from ```<start>``` to ```<end>
    • 第一种包括最后一位元素,而第二种便不包括
      1
      2
      3
      4
      5
      6
      示例:
      @for $i from 1 through 3{
      .item-#{$i}{
      width: 2px * $i;
      }
      }
  1. @each
  • @each $i in
    or map>```
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    ```
    示例:
    @each $i in a, b, c, d{
    .#{$i}-icon{
    background-image: url("./images/#{$i}.png");
    }
    }

    还可以多重赋值:
    @each $animals, $color, $cursor in(a, b, c),
    (e, f, g),
    (h, i, j){
    .#{$animals}-icon{
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
    }
    // 可迭代对象中的数据会一一对应好变量
    }
  1. @while
    1
    2
    3
    4
    5
    6
    7
    8
    $i: 6;
    @while @i > 0{
    .item-#{$i}{
    width: 2em * $i;
    }
    $i : $i - 2;
    }
    // 直到sassscript表达式为假才推出loop

自定义函数++++

  • 函数指令,支持自定义函数
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    // 自定义函数的定义
    $grid-width: 40px;
    $gutter-width: 10px;

    @function funcName($n){
    return $n * $grid-width + ($n - 1) + $gutter-width;

    }

    // 自定义函数的使用
    #sidebar{
    width: funcName(5);
    5 * 40px + 4 + 10px
    214px
    }
文章作者: Luo Jun
文章链接: /2018/04/17/sassStudy/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Aning