SASS语法

最新推荐文章于 2023-12-05 16:32:16 发布

HHYZBC

最新推荐文章于 2023-12-05 16:32:16 发布

阅读量1.3k

点赞数 2

分类专栏： web 文章标签： sass css 前端

本文链接：https://blog.csdn.net/HHYZBC/article/details/125360955

版权

web 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

SASS 运算（Operations）符的基本使用

SASS混合指令（Mixin Directives）

sass 流程控制指令@if、@for、@each、@while

Sass是什么

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。

有关如何安装等详情看下面链接，是sass的中文官网

Sass世界上最成熟、稳定和强大的CSS扩展语言 | Sass中文网https://www.sass.hk/

语法格式

Sass 有两种语法格式

SCSS (Sassy CSS)
- 这种格式仅在 CSS3 语法的基础上进行拓展，所有 CSS3 语法在 SCSS 中都是通用的，同时加入 Sass 的特色功能。此外，SCSS 也支持大多数 CSS hacks 写法以及浏览器前缀写法 (vendor-specific syntax)，以及早期的 IE 滤镜写法。这种格式以 .scss 作为拓展名。
Sass（Indented Sass）
- 是最早的 Sass 语法格式，被称为缩进格式。使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性，很多人认为这样做比 SCSS 更容易阅读，书写也更快速。缩进格式也可以使用 Sass 的全部功能，只是与 SCSS 相比个别地方采取了不同的表达方式

在本文中所写的是第一种格式SCSS。

SASS变量

Sass变量的定义规则

变量以美元符号($)开头，后面跟变量名；
变量名是不以数字开头的可包含字母、数字、下划线、横线（连接符）；
写法同css，即变量名和值之间用冒号（:)分隔;
变量一定要先定义，后使用；

连接符与下划线

通过连接符与下划线定义的同名变量为同一变量，建议使用连接符

$font-size:14px;
$font_size:16px;
.container{font-size: $font-size;}

CSS定义变量的方法

:root {
    --color: #F00;
}

body {
    --border-color: #f2f2f2;
}

.header {
    --background-color: #f8f8f8;
}

p {
    color: var(--color);
    border-color: var(--border-color);
}

.header {
    background-color: var(--background-color);
}

SASS变量的使用

$font-size:14px;
.container {
    font-size: $font-size;
}

变量的作用域

局部变量

定义：在选择器内容定义的变量，只能在选择器范围内使用

.container {
    $font-size: 14px;
    font-size: $font-size;
}

全局变量

定义后能全局使用的变量

第一种：在选择器外面的最前面定义的变量

$font-size:16px;
.container {
    font-size: $font-size;
}
.footer {
    font-size: $font-size;
}

第二种：使用！global 标志定义全局变量

.container {
    $font-size: 16px !global;
    font-size: $font-size;
}
.footer {
    font-size: $font-size;
}

变量值类型

SASS支持 7 种主要的数据类型

数字，1， 2， 13， 10px，30%
字符串，有引号字符串与无引号字符串，“foo”， 'bar'， baz
颜色，蓝色， #04a3f9， rgba（255，0，0，0.5）
布尔型，真，假
空值，空值，值null是其类型的唯一值。它表示缺少值，通常由函数返回以指示缺少结果。
数组（list），用空格或逗号作分隔符，1.5em 1em 0 2em， Helvetica， Arial， sans-serif
maps，相当于 JavaScript 的 object，（key1： value1， key2： value2）

默认值

$color:#333;
// 如果$color之前没定义就使用如下的默认值
$color:#666 !default;
.container {
    border-color: $color;
}

注释

Sass支持两种注释

标准的css多行注释 /* ... */ 会编译到.css文件中
单行注释 // 不会编译到.css文件

.container {
    width: 1200px;
    .swiper {
        // 网站幻灯片相关css
        width: 100%;
        height: 260px;
        .dot {
            /* 
                    幻灯片指示点
                    默认白色
                    选中时蓝色
                */
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #FFF;
            &.active {
                background-color: blue;
            }
        }
    }
}

SASS 运算（Operations）符的基本使用

等号操作符
- 所有数据类型都支持等号运算符:
- ==
  - 等于
- !=
  - 不等于
- 所有数据类型均支持相等运算或，此外，每种数据类型也有其各自支持的运算方式。==!=
关系（比较）运行符
- < （lt）
  - 小于
- > （gt）
  - 大于
- <= （lte）
  - 小于等于
- >= （gte）
  - 大于等于
逻辑运行符
- and
  - 逻辑与
- or
  - 逻辑或
- not
  - 逻辑非
数字操作符
- +
  - 加
  - +也可用于连接字符串
    - 如果有引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的，相反，无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号。
- -
  - 减
- *
  - 称
- /
  - 除
- %
  - 取模
- / 在 CSS 中通常起到分隔数字的用途，SassScript 作为 CSS 语言的拓展当然也支持这个功能，同时也赋予了 / 除法运算的功能。也就是说，如果 / 在 SassScript 中把两个数字分隔，编译后的 CSS 文件中也是同样的作用。以下三种情况 / 将被视为除法运算符号：
  - 如果值或值的一部分，是变量或者函数的返回值
  - 如果值被圆括号包裹
  - 如果值是算数表达式的一部分

语法嵌套规则

选择器嵌套

例如有这么一段css，正常CSS的写法

.container{width:1200px; margin: 0 auto;}
.container .header{height: 90px; line-height: 90px;}
.container .header .log{width:100px; height:60px;}
.container .center{height: 600px; background-color: #F00;}
.container .footer{font-size: 16px;text-align: center;}

改成写SASS的方法

.container {
    width: 1200px;
    margin: 0 auto;
    .header {
        height: 90px;
        line-height: 90px;
        .log {
            width: 100px;
            height: 60px;
        }
    }
    .center {
        height: 600px;
        background-color: #F00;
    }
    .footer {
        font-size: 16px;
        text-align: center;
    }
}

避免了重复输入父选择器，复杂的 CSS 结构更易于管理

父选择器 &

在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，例如，当给某个元素设定 hover 样式时，或者当 body 元素有某个 classname 时，可以用 & 代表嵌套规则外层的父选择器。例如有这么一段样式：

.container{width: 1200px;margin: 0 auto;}
.container a{color: #333;}
.container a:hover{text-decoration: underline;color: #F00;}
.container .top{border:1px #f2f2f2 solid;}
.container .top-left{float: left; width: 200px;}

用sass编写

.container {
    width: 1200px;
    margin: 0 auto;
    a {
        color: #333;
        &:hover {
            text-decoration: underline;
            color: #F00;
        }
    }
    .top {
        border: 1px #f2f2f2 solid;
        //使用父选择器
        &-left {
            float: left;
            width: 200px;
        }
    }
}

属性嵌套

有些 CSS 属性遵循相同的命名空间（namespace），比如 font-family， font-size， font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中。例如：

.container a {
    color: #333;
    font-size: 14px;
    font-family: sans-serif;
    font-weight: bold;
}

用SASS的方式写

.container {
    a {
        color: #333;
        font: {
            size: 14px;
            family: sans-serif;
            weight: bold;
        }
    }
}

注意font：后面要加一个空格

SASS 导入@import

Sass 拓展了 @import 的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令（mixin）都可以在导入的文件中使用。例如：

public.scss：

$font-base-color:#333;

在index.scss里面使用

@import "public";
$color:#666;
.container {
    border-color: $color;
    color: $font-base-color;
}

注意：跟我们普通css里面@import的区别

如下几种方式，都将作为普通的 CSS 语句，不会导入任何 Sass 文件：

文件拓展名是 .css;
文件名以 http:// 开头;
文件名是 url（）;
@import 包含媒体查询。

@import "public.css";
@import url(public);
@import "http://xxx.com/xxx";
@import 'landscape' screen and (orientation:landscape);

局部文件（部分）

Sass源文件中可以通过@import指令导入其他Sass源文件，被导入的文件就是*局部文件*，局部文件让Sass模块化编写更加容易。

如果一个目录正在被Sass程序监测，目录下的所有scss/sass源文件都会被编译，但通常不希望局部文件被编译，因为局部文件是用来被导入到其他文件的。如果不想局部文件被编译，文件名可以以下划线（_）开头。例如：

_theme.scss

$border-color:#999;
$background-color:#f2f2f2;

使用

@import "theme";
.container {
    border-color: $border-color;
    background-color: $background-color;
}

可以看到，@import 引入的theme.scss，可以没有，这是允许的，这也就意味着，同一个目录下不能同时出现两个相关名的sass文件（一个不带，一个带），添加下划线的文件将会被忽略。

嵌套 @import

大多数情况下，一般在文件的最外层（不在嵌套规则内）使用 @import，其实，也可以将 @import 嵌套进 CSS 样式或者 @media 中，与平时的用法效果相同，只是这样导入的样式只能出现在嵌套的层中。例如：

_base.scss

.main-color {
    color: #F00;
}

使用

.container {
    @import "base";
}

注意：@import不能嵌套使用在控制指令或混入中

SASS混合指令（Mixin Directives）

混合指令（Mixin）用于定义可重复使用的样式。混合指令可以包含所有的 CSS 规则，绝大部分 Sass 规则，甚至通过参数功能引入变量，输出多样化的样式。

定义与使用混合指令 @mixin

定义：

// 定义页面一个区块基本的样式
@mixin block {
    width: 96%;
    margin-left: 2%;
    border-radius: 8px;
    border: 1px #f6f6f6 solid;
}

使用：

// 使用混入
.container {
    .block {
        @include block;
    }
}

定义传递变量：

// 定义flex布局元素纵轴的排列方式
@mixin flex-align($aitem) {
    -webkit-box-align: $aitem;
    -webkit-align-items: $aitem;
    -ms-flex-align: $aitem;
    align-items: $aitem;
}

使用传递变量：

// 只有一个参数，直接传递参数
.container {
    @include flex-align(center);
}

// 给指定参数指定值
.footer {
    @include flex-align($aitem: center);
}

多个参数传递参数方法类似，这里就不演示了。

@mixin混入总结

mixin是可以重复使用的一组CSS声明
mixin有助于减少重复代码，只需声明一次，就可在文件中引用
混合指令可以包含所有的 CSS 规则，绝大部分 Sass 规则，甚至通过参数功能引入变量，输出多样化的样式。
使用参数时建议加上默认值

什么时候使用混入?

很多地方都会用到却能根据不同场景灵活使用的样式

SASS @extend（继承）指令

在设计网页的时候通常遇到这样的情况：一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式。通常会在 HTML 中给元素定义两个 class，一个通用样式，一个特殊样式。

使用前：

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 12px;
}

.alert-info {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}

.alert-success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

.alert-warning {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}

.alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

<div class="alert alert-info">
    信息！请注意这个信息。
</div>

<div class="alert alert-success">
    成功！很好地完成了提交。
</div>

<div class="alert alert-warning">
    警告！请不要提交。
</div>

<div class="alert alert-danger">
    错误！请进行一些更改。
</div>

使用继承@extend改进：

基本样式.alert 我们没有变，主要是各个警告框单独的样式

.alert-info {
    @extend .alert;
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}

.alert-success {
    @extend .alert;
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

.alert-warning {
    @extend .alert;
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}

.alert-danger {
    @extend .alert;
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

使用时就不须要再写基本类了

<div class="alert-info">
    信息！请注意这个信息。
</div>

<div class="alert-success">
    成功！很好地完成了提交。
</div>

<div class="alert-warning">
    警告！请不要提交。
</div>

<div class="alert-danger">
    错误！请进行一些更改。
</div>

占位符%

你可能发现被继承的css父类并没有被实际应用，也就是说html代码中没有使用该类，它的唯一目的就是扩展其他选择器。

对于该类，可能不希望被编译输出到最终的css文件中，它只会增加CSS文件的大小，永远不会被使用。

这就是占位符选择器的作用。

占位符选择器类似于类选择器，但是，它们不是以句点(.)开头，而是以百分号(%)开头。

当在Sass文件中使用占位符选择器时，它可以用于扩展其他选择器，但不会被编译成最终的CSS。

继承中的css例子可改写为：

%alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 12px;
}

.alert-info {
    @extend %alert;
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}

.alert-success {
    @extend %alert;
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

.alert-warning {
    @extend %alert;
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}

.alert-danger {
    @extend %alert;
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

SASS 插值语句 #{ }

如果需要使用变量，同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中，只需要用 #{} 插值语句将变量包裹。使用插值语法：

p {
    $font-size: 12px;
    $line-height: 30px;
    font: #{$font-size}/#{$line-height} Helvetica,
    sans-serif;
}

插值语句可以在选择器、属性名、注释中使用变量：#{}

sass 常见函数的基本使用

Color（颜色函数）

sass包含很多操作颜色的函数。例如：

lighten（）与 darken（）函数可用于调亮或调暗颜色，

opacify（）函数使颜色透明度减少，

transparent（）函数使颜色透明度增加，

mix（）函数可用来混合两种颜色。

String（字符串函数）

Sass有许多处理字符串的函数，比如

向字符串添加引号的quote（）、

获取字符串长度的string-length（）、

将内容插入字符串给定位置的string-insert（）。

Math（数值函数）

数值函数处理数值计算，例如：

percentage（）将无单元的数值转换为百分比，

round（）将数字四舍五入为最接近的整数，

min（）和max（）获取几个数字中的最小值或最大值，

random（）返回一个随机数。

List函数

List函数操作List，

length（）返回列表长度，

nth（）返回列表中的特定项，

join（）将两个列表连接在一起，

append（）在列表末尾添加一个值。

Map函数

Map函数操作Map，

map-get（）根据键值获取map中的对应值，

map-merge（）来将两个map合并成一个新的map，

map-values（）映射中的所有值。

selector选择器函数

选择符相关函数可对CSS选择进行一些相应的操作，例如：

selector-append（）可以把一个选择符附加到另一个选择符，

selector-unify（）将两组选择器合成一个复合选择器。

自检函数

自检相关函数，例如：

feature-exists（）检查当前Sass版本是否存在某个特性，

variable-exists（）检查当前作用域中是否存在某个变量，

mixin-exists（）检查某个mixin是否存在。

自检函数通常用在代码的调试上

sass 流程控制指令@if、@for、@each、@while

@if控制指令

@if()函数允许您根据条件进行分支，并仅返回两种可能结果中的一种。

语法方式同js的if....否则，如果...还

.container{
    // 第一种
    @if(/* 条件 */){
        // ...
    }

    // 第二种
    @if(/* 条件 */){
        // ...
    }@else{
        // ...
    }
    
    // 第三种
    @if(/* 条件 */){
        // ...
    }@else if(){
        // ...
    }@else{
        // ...
    }
}

@for指令

@for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。这个指令包含两种格式：@for $var from through ，或者 @for $var from to

区别在于 through 与 to 的含义：

当使用through时，条件范围包含与的值。
而使用to 时条件范围只包含的值不包含的值。
另外，$var 可以是任何变量，比如 $i; 和必须是整数值。

@for $i from 1 to 4 {
    .p#{$i} {
        width: 10px * $i;
        height: 30px;
        background-color: red;
    }
}

@for $i from 1 through 3 {
    .p#{$i} {
        width: 10px * $i;
        height: 30px;
        background-color: red;
    }
}

@each指令

@each 指令的格式是 $var in ， $var 可以是任何变量名，比如 $length 或者 $name，而是一连串的值，也就是值列表。

@while 指令

@while 指令重复输出格式直到表达式返回结果为 false。这样可以实现比 @for 更复杂的循环。

HHYZBC

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
1
评论
SASS语法

目录Sass是什么语法格式SASS变量Sass变量的定义规则连接符与下划线CSS定义变量的方法SASS变量的使用变量的作用域局部变量全局变量变量值类型默认值注释SASS 运算（Operations）符的基本使用语法嵌套规则选择器嵌套父选择器 &属性嵌套 SASS 导入@import局部文件（部分）嵌套 @importSASS混合指令（Mixin Directives）定义与使用混合指令 @mixin@mixin混入总结SASS @extend（继承）指令占位符%SASS 插值语句 #{ }sass 常见
复制链接

扫一扫