JT's Blog

Do the right things and do the things right.

Scss and Sass

| Comments

學會 scss / sass 可以加速寫 css

sass 跟 scss 的差別，不需要寫大括號和分號和mixins 的用法

SCSS

檔名存成 .scss

常用功能

  1. 使用@import
  2. 算數
  3. 顏色

變數命名

已 $ 開頭命名

1
2

$base_font_size: 10px;
$base_color: #666;

Nesting（＆可省略, 注意「空格」）

1
2
3
4
5
6
7
8
9

.main {
  &.sec {
    # .main.sec
  }
  & .third {
    # .main .third
  }
  .fourth {}
}

Mixins

1
2
3
4
5
6
7

@mixin roundedBox {
  $radius: 10px;
  border-radius: $radius;
}
.main {
  @include roundedBox;
}

Mixins(預設參數）

1
2
3
4
5
6

@mixin roundedBox($radius: 5px) {
  border-radius: $radius;
}
.main {
  @include roundedBox(10px);
}

Inheritance

1
2
3
4
5
6
7

.red-color {
  color: red;
}
.error {
  font-size: $base_font_size * 1.4;
  @extend .red-color;
}

Operators

1
2
3
4
5
6
7
8

$margin : 16px;

.island {
    background: #cc0000;
    width: $column * 4;
    margin: $margin * 2 $margin / 2 $margin + 20 $margin;
    padding: $margin * 0.25;
}

SASS

檔名存成 .sass

變數命名

已 $ 開頭命名

1
2

$base_font_size: 10px
$base_color: #666

Nesting（＆可省略, 注意「空格」）

1
2
3
4
5
6
7
8

.main
  &.sec
    # .main.sec
  & .third
    # .main .third
  .fourth
    # .main.fourth
}

Mixins

1
2
3
4
5
6
7

=roundedBox {
  $radius: 10px;
  border-radius: 5px;
}
.main {
  +roundedBox;
}

Mixins(預設參數）

1
2
3
4
5
6

=roundedBox($radius: 5px) {
  border-radius: $radius;
}
.main {
  +roundedBox(10px);
}

Inheritance

1
2
3
4
5
6

.red-color
  color: red

.error
  font-size: $base_font_size * 1.4
  @extend .red-color

Operators

1
2
3

article[role="main"]
  float: left
  width: 600px / 960px * 100%

Mixin + media screen

1
2
3
4
5
6
7

$base_font_size: 10px
$phone: "(max-width: 540px)"

=font-size($large: $base_font_size*3, $small: $base_font_size*2)
  font-size: $large
  @media screen and #{phone}
    font-size: $small

Reference

Comments