Arvin's Studio.

SASS的用法

SASS
字数统计: 320阅读时长: 1 min
2018/09/30 Share

SASS

就是去掉了分号和括号的一门语言

SCSS

SCSS就是基于SASS语言的一套更适合前端工程师看的语言

1
2
3
npm init -y
npm i -D parcel
npx parcel index.html

可以自动的去编译SCSS的在线工具
还可以在codepen上自己切换SCSS的工具

嵌套选择器

1
2
3
4
5
6
.nav {
  border: 1px solid;
   > ul {
    background: white;
    }
}

变量

1
2
3
4
5
6
7
8
$grey: #666;
$border-width: 2px;
.nav {
  border: $border-width solid $grey;
   > ul {
    background: white;
    }
}

方便统一改样式，只需要改一处就行

mixin

可以把一堆代码写到一个地方，取个名字，然后在下面复用，如下：

1
2
3
4
5
6
7
8
9
10
11
12
$grey: #666;
$border-width: 2px;
@mixin debug {
  border: 1px solid red;
  background: $grey;
}
.nav {
  @include debug;
   > ul {
    background: white;
    }
}

高级用法，可以将其写成函数并带有参数，参数可以有默认值：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$grey: #666;
$border-width: 2px;
@mixin debug($border-color: red) {
  border: 1px solid $border-color;
  background: $grey;
}
.nav {
  @include debug;
   > ul {
    background: white;
      > li {
        @include debug(green)
      }
    }
}

placeholder

将要用同样样式的选择器放在了一起，节省了样式的代码。（mixin并没节省代码，只是复制粘贴了）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$grey: #666;
$border-width: 2px;
%debug($border-color: red) {
  border: 1px solid $border-color;
  background: $grey;
}
.nav {
  @extend debug;
   > ul {
    background: white;
      > li {
        @extend debug(green)
      }
    }
}

CATALOG
  1. 1. SASS
  2. 2. SCSS
    1. 2.1. 嵌套选择器
    2. 2.2. 变量
Total : 9
2018
CSS3 SASS Promise 原型链 flex布局 综合问题