sass中scss语法教程指南

2018.05.13 17:10 阅读 504 评论 0

1.选择器

选择器嵌套

/* scss */
.foo {
  color: red;
  .bar {
    color: green;
  }
}

解析后css

/* css */
.foo {
  color: red;
}

.foo .bar {
  color: green;
}

引用父选择器

/* scss */
.foo {
  color: red;
  &:hover {
    color: green;
  }
  &-mid {
    color: blue;
  }
}

解析后css

/* css */
.foo {
  color: red;
}

.foo:hover {
  color: green;
}

.foo-mid {
  color: blue;
}

2.声明变量

用$符来声明变量

/* scss */
$color: red;

.foo {
  color: $color;
}

解析后css

/* css */
.foo {
  color: red;
}

3.运算

加减乘运算

可以使用加减乘运算

/* scss */
.foo {
  width: 2+3*2px;
  height: 7-3px;
}

解析后css

/* css */
.foo {
  width: 8px;
  height: 4px;
}

除法运算

scss中除法运算有点特殊,为了IE8下面css样式的写法5px/3px

/* scss */
.foo {
  width: 6px/3px;
  height: (6px/3); // 加括号为除法运算,被除数不带单位
}

解析后css

/* css */
.foo {
  width: 6px/3px;
  height: 2px;
}

4.颜色运算

颜色相加减

颜色可以使用加减法

/* scss */
.foo {
  color: #332 -#112;  // 减法符号前必须有空格
  background: #332 + #112;
}

解析后css

/* css */
.foo {
  color: #222200;
  background: #444444;
}

颜色运算函数

  • lighten 颜色变亮函数,百分比通常在3%-20%
  • darken 颜色变暗函数,百分比通常在3%-20%
/* scss */
.foo {
  color: lighten(#000, 10%);
  background: darken(#fff, 10%);
}

解析后css

/* css */
.foo {
  color: #1a1a1a;
  background: #e6e6e6;
}

5.插值符号#{}

插值符号的作用拼接变量和字符串

/* scss */
$prefix: 'fo';

.#{prefix}-btn {
  color: red;
}

解析后css

/* css */
.prefix-btn {
  color: red;
}
0 条评论
发布