scss-使用手册

入门

变量

//定义
$highlight-color: #F90;
//引用

镶嵌

//父选择器

//组合选器

//嵌套属性
nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}
=>
nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

导入

@import "themes/night-sky";
//部分文件

//默认变量

//嵌套导入

//原生样式
@import "themes/night-sky.css";

注释

/* 这种注释内容会出现在生成的css文件中 */
// 这种注释内容不会出现在生成的css文件中

混合

//定义
//--基础
@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
//--于选择器
//--用于属性
//--传入参数
@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}
//--默认参数
@mixin link-colors($normal,$hover: $normal,$visited: $normal)
{
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

//使用
notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}
//场景

继承

//于选择器
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

文档

变量

//声明符号

//作用范围
//--局部变量

//--全局变量

//--局转为全
#main {
  $width: 5em !global;
  width: $width;
}
#sidebar {
  width: $width;
}
//数据类型
//--字符

//--数字

//--颜色

//--布尔

//--空值

//--映射

//--数组

运算

//数字运算

//关系运算

//颜色运算

//字符运算

//布尔运算
//--且

//--或

//--非

//数组运算

//运算顺序

//调用函数

//插值语句
$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

//父标识符

//默认取值

导入

//使用变量
$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=\#{$family}");

//导入分页
//将文件命名为 _colors.scss
@import "colors";

//嵌套导入
.example {
  color: red;
}
//非嵌套导

媒体查询

//非嵌

//嵌套

//条件

继承

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

控制

//条件
$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

//循环
//--for
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}
//--each
@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}
//--while
$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

混合

函数

$grid-width: 40px;
$gutter-width: 10px;

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

#sidebar { width: grid-width(5); }

输出

//--指定格式
可以通过 :style option 选项设定，或者在命令行中使用 --style 选项
//--嵌套格式
:nested
//--手写格式
:expanded
//--成行输出
:compact
//--压缩格式
:compressed

拓展

//自定函数

//存储缓存

//自定导入

问题收录

技巧

使用BEM
.aboutSection {
    &__wrapper {
        max-width 108rem;
        padding: 3rem 0;
    }
    &__headingContainer {
        background-color: steelblue;
    }
    &__header {
        font-size: 2.4rem;
        font-weight: 700;
    }
    &__subHeader {
        font-size: 1.8rem;
        color: green;
    }
}