SCSS常用语法总结


一、CSS扩展

嵌套规则

为了避免像CSS那样重复输入父选择器,SCSS允许代码CSS样式嵌套,内层的样式将其外层的选择器作为父选择器。

.home {
    color: #00ff00;
    font-size: 12px;

    .header {
        color: #ffffff;
        font-size: 14px;
    }
}

编译为:

.home {
    color: #00ff00;
    font-size: 12px;
}

.home .header {
    color: #ffffff;
    font-size: 14px;
}

父选择器&

可以用 & 代表嵌套规则外层的父选择器,编译后的CSS文件中&会被替换为外层的父选择器。

a {
    font-weight: bold;
    color: #000;
    text-decoration: none;
    
    // 示例1:伪类
    &:hover {
        text-decoration: underline;
    }
    
    // 示例2
    .header & {
        color: #f00;
    }
    
    // 示例3:拼接后缀(&必须放在首位)
    &-green {
        color: #0f0;
    }
}

编译为:

a {
    font-weight: bold;
    color: #000;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
.header a {
    color: #f00;
}
a-green {
    color: #0f0;
}

属性嵌套

像background、font、border、outline这些复合属性,都是具有多个单属性的。在可能仅需要个别单属性的情况下,可以使用属性嵌套来简化代码。

.box {
  border: {
    style: solid;
    color: red;
    width: 1px;
    radius: 10px;
  }
}

编译为:

.box {
    border-style: solid;
    border-color: red;
    border-width: 1px;
    border-radius: 10px;
}

占位符选择器%

单独使用占位符选择器时(未通过@extend调用),不会被编译到CSS中,仅当@extend指令调用,样式才会被编译到CSS中。

#context a%extreme {
    color: blue;
    font-weight: bold;
    font-size: 2em;
}


// 仅当使用了下列代码,scss才会编译出对应的css
.notice {
    @extend %extreme
}

编译为:

#context a.notice {
    color: blue;
    font-weight: bold;
    font-size: 2em;
}

二、注释

多行注释/* */(会被编译到CSS文件中)

/* 
 *This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output.
 */

单行注释//(不会被编译到CSS文件中)

// These comments are only one line long each.
// They won't appear in the CSS output.

三、SassScript

变量$

变量以$开头,赋值方法与CSS写法一样。

// 全局变量
$color: red;

.header {
    color: $color;
}

.content {
    color: $color;
}

.box1 {
    // 局部变量,只能在该嵌套内部使用
    $width: 100px;
    
    // 局部变量转换为全局变量
    $size: 15px !global;
    width: $width;
    
    .inner {
        width: $width;
    }
}

.box2 {
    font-size: $size;
}

数据类型

支持的数据类型有:

  • 数字,1, 2, 13, 10px
  • 字符串,有引号和无引号,"foo", 'bar', baz
  • 颜色,blue, #ff0000, rgba(0,0,0,0.5)
  • 布尔值,true, false
  • 空值, null
  • 数组,用空格或逗号做分隔符,1.5em 1em 2em, Arial, sans-serif
  • maps, 相当于js中的Object,(key1: value1, key2: value2)

运算

每种数据类型都支持相等运算==!=,此外,每种数据类型也有其格子支持的运算方式。

  • 数字运算
    支持加、减、乘、除、取余等运算、关系运算(<,>,<=,>=)
  • 颜色值运算
p {
    color: #432542 + #78de1c;
}
a {
    color: #010203 * 2;
}

编译为:

p {
    color: #bbff5e;
}
a {
    color: #020406;
}
  • 字符串运算

    p:before {
        // +号左侧为有引号的字符串,编译的结果为有引号的字符串
        content: "Foo " + Bar;
        
        // +号左侧为无引号的字符串,编译的结果为无引号的字符串
        font-family: sans- + "serif";
    }

    编译为:

    p:before {
        content: "Foo Bar";
        font-family: sans-serif; 
    }
  • 布尔值运算
    支持andor以及not运算

  • 数组(List)运算
    不支持任何运算方式,只能使用list functions控制。

函数

详细用法参见Sass函数列表

四、@-Rules与指令

@import

使用@import可以的导入SCSS或Sass文件,被导入的文件将合并编译到同一个CSS文件中。被导入的文件中包含的变量或混合指令都可以在导入的文件中使用。

// 导入单个文件(带扩展名)
@import 'foo.scss';

// 导入单个文件(不带扩展名,会尝试寻找扩展名为.scss或.sass的文件)
@import 'foo';

// 同时导入多个文件
@import 'rounded-corners', 'text-shadow';

// 一般导入都是不会在嵌套规则内,但是在嵌套规则内导入也是支持的
// 但是这样编译的样式也是会在嵌套内的
#main {
    @import "example"
}

@extend

@extend用于将一个选择器下的所有样式继承给另一个选择器。

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

五、控制指令

@if

@if的表达式返回值不是false或者null时,条件成立,输出{} 内的代码:

p {
    @if 1 + 1 == 2 { border: 1px solid red; } 
    @if null  { border: 3px double blue; }
}

编译为:

p {
    border: 1px solid red;
}

类似if...else if...else...语句,@if也支持@else if@else

$type: A;
p {
    @if $type == A {
        color: red;
    } @else if $type == B {
        color: green;
    } @else {
        color: blue;
    }
}

@for

语法格式1:@for $var from <start> through <end>
语法格式2:@for $var from <start> to <end>
<start><end>必须是整数;使用to时,遍历范围不包含<end>

@for $i from 1 through 3 {
    .item-#{$i} { width: 2em * $i; }
}

@each

语法格式:@each $var in <list>

@each $animal in puma, sea-slug, egret, salamander {
    .#{$animal}-icon {
        background-image: url('/images/#{$animal}.png');
    }
}

@while

指令重复输出格式直到表达式返回结果为false

$i: 6;
@while $i > 0 {
    .item-#{$i} { width: 2em * $i; }
    $i: $i - 2;
}

六、mixin指令

简单总结,详细用法参考文档。

// 定义
@mixin large-text {
    font: {
        family: Arial;
        size: 20px;
        weight: bold;
    }
    color: #ff0000;
}

// 引用混合样式(使用@include)
.page-title {
    @include: large-text;
    padding: 10px;
}

// 定义(带参数)
@mixin large-text($size, $color) {
    font: {
        family: Arial;
        size: $size;
        weight: bold;
    }
    color: $color;
}

// 引用(带参数)
.page-title {
    @include: large-text(20px, red);
    padding: 10px;
}

七、参考文档及网站链接

1. Sass中文文档
2. Sass函数文档


文章作者: Snail-Lu
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Snail-Lu !
  目录