Sass 完全指南,一起来看看 Sass 中常用的功能吧!

开发 前端
Sass 是一个 CSS 预处理器,完全兼容所有版本的 CSS。实际上,Sass 并没有真正为 CSS 语言添加任何新功能,只是在许多情况下可以可以帮助我们减少 CSS 重复的代码,节省开发时间。下面就来看看 Sass 中常用的功能吧!

Sass 是一个 CSS 预处理器,完全兼容所有版本的 CSS。实际上,Sass 并没有真正为 CSS 语言添加任何新功能,只是在许多情况下可以可以帮助我们减少 CSS 重复的代码,节省开发时间。下面就来看看 Sass 中常用的功能吧!

1. 注释

在 Sass 中支持两种类型的注释:

// 注释一

/* 注释二 */

需要注意,当 Sass 编译成CSS时,第一种注释不会编译到CSS中(只在Sass文件中可见),第二种注释会编译到CSS中。

2. 嵌套

嵌套的写法是Sass的一大特点,通过嵌套这些代码,可以得到类似HTML结构的CSS代码,使代码更具可读性。

nav {
    background : #C39BD3;
    padding : 10px;
    height: 50px;
  
    ul {
        display: flex;
        list-style : none;
        justify-content: flex-end;

        li {
            color: white;
            margin-right: 10px;
        } 
    }
}

那为什么要使用嵌套呢?在CSS中,如果想为其父元素的继承元素定义样式,就必须每次都选择父元素:

html, body {
    height: 100%;
}

html #root, body #root {
    height: 100%;
}

html .div-with-button, body .div-with-button {
    background-color: black;
}

html .div-with-button button, body .div-with-button button {
    background-color: #e4c681;
}

html .div-with-button button:hover, body .div-with-button button:hover {
    background-color: #ffe082;
}

在Sass中就可以这样写,这样写就会使代码更加清晰、条理和简洁:

html, body {
  height: 100%;

  #root {
    height: 100%;
  }

  .div-with-button {
    background-color: black;

    button {
      background-color: #e4c681;

      &:hover {
        background-color: #ffe082;
      }
    }
  }
}

注意,在编写Sass时,要嵌套嵌套太深,尽量不要超过三层,超过之后就会导致代码难以维护,并且在编译为CSS时就会出现不必要的选择器,就会导致CSS文件变大。

我们还可以在嵌套中使用 &,比如鼠标在按钮上悬浮时,改变颜色。在CSS中是这样的:

button {
  background-color: #535353;
  color: #000;
}
button:hover {
  background-color: #000;
  color: #fff;
}

在Sass中就可以这么写:

button {
  background-color: #535353;
  color: #000;
  &:hover {
    background-color: #000;
    color: #fff;
  }
}

通常,& 总是指向它上面的元素,可以用于伪类和伪元素:

.box {
  &:focus{} 
  &:hover{}
  &:active{}
  &:first-child{} 
  &:nth-child(2){}
  &::after{} 
  &::before{} 
}

编译后的CSS代码如下:

.box:focus{} 
.box:hover{}
.box:active{}
.box:frist-child{}
.box:nth-child(2){}
.box::after{}
.box::before{}

此外,如果类以相同的词开头(比如box-yellow和box-red),就可以嵌套它们:

.box {
  &-yellow {
    background: #ff6347;
  }
  &-red {
    background: #ffd700;
  }
  &-green {
    background: #9acd32;
  }
}

编译成CSS就是这样的:

.box-yellow {
  background: #ff6347;
}
.box-red {
  background: #ffd700;
}
.box-green {
  background: #9acd32;
}

Sass还支持使用:来嵌套属性:

add-icon {
  background : {
    image: url("./assets/arrow-right-solid.svg");
    position: center center;
    repeat: no-repeat;
    size: 14px 14px;
  }
}

上面的代码编译为如下CSS:

.add-icon {
  background-image: url("./assets/arrow-right-solid.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 14px 14px;
}

3. 变量

变量是用来储存数据的,在Sass中,我们可以将任何有效的CSS值保存在变量中。变量使用$符号定义:

$red: #ee4444;
$black: #222;
$bg-color: #3e5e9e;
$link-color: red;
$p-color: #282A36;

$font-p: 13px;
$font-h1: 28px;

$base-font: 'Noto Sans KR', sans-serif;

变量的使用:

body {
    background-color : $bg-color;
    font-size : $font-p;
    font-family : $base-font;
}

h1 {
    font-size: $font-h1;
    color: $black;
}

p {
    font-size: $font-p;
    color: $black;
}

a {
    color: $link-color;
}

当Sass编译成CSS时,所有的变量都会被替换为定义的变量值。变量可以减少重复、进行复杂的数学运算等。

需要注意,CSS变量是有范围的,位于顶层的变量都是全局变量,在块中定义的变量都是局部变量。全局变量可以在任何地方使用,局部变量只能在变量定义的块中使用。

$my-global-variable: "global";

div {
  $my-local-variables: "local";
}

变量值是可以覆盖的:

$color: #fefefe;
.content {
  background-color: $color;
}

$color: #939393;
.footer {
  background-color: $color;
}

在上面的代码中,content的背景颜色是#fefefe,而footer的背景颜色是#939393。要想改变全局变量,就需要添加!global修饰符:

$color: #111;
.content {
  $color: #222;
  background-color: $color;
}
.footer {
  $color: #333 !global;
}

除此之外,Sass变量是可以指定默认值的:

$message-color: blue !default;

.message {
    color: $message-color;
}

编译成的CSS代码如下:

.message {
  color: blue;
}

我们可以在 @import 之前覆盖模块默认值:

$message-color: black;
@import 'my-module';

.message {
    color: $message-color;
}

编译成的CSS代码如下:

p.message {
  color: black;
}

也就是说,带有 !default 的变量只有在没有值的情况下才会生效。

4. Mixins 和  Include

mixin 是一组可以重用的 CSS 声明,语法类似于JavaScript中的函数,使用 @mixin 指令来代替 function 关键字。调用 mixin 是通过 @include 语句完成的。

以下是用 mixins 使元素水平垂直居中的方法:

@mixin absolute-center() {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

.element {
  @include absolute-center();
}

当然,mixin也是支持传递参数的:

@mixin square($size) {
  width:$size;
  height:$size;
}
div {
  @include square(60px);
  background-color:#000;
}

参数可以是可选的,可选参数的定义和Sass变量的定义形式是一样的:

@mixin square($width: 50px) {
  width:$size;
  height:$size;
}

我们还可以将 CSS 规则传递给 mixins。这些规则可以在使用 @content 的 mixin 中使用。

@mixin hover-not-disabled {
  &:not([disabled]):hover {
    @content;
  }
}
.button {
  border: 1px solid black;
  @include hover-not-disabled {
    border-color: blue;
  }
}

这样mixin中的@content在编译后就会变成border-color: blue;这样写有助于减少&:not([disabled]):hover部分的重复。

5. @import 和 @use

在CSS中我们通常会创建多个CSS文件并在需要时引入:

<link rel="stylesheet" href="/path/to/css/1"></link>
<link rel="stylesheet" href="/path/to/css/2"></link> 
<link rel="stylesheet" href="/path/to/css/3"></link>

这样做会使浏览器发出多个HTTP请求,从而在一定程度上降低应用的速度。而Sass会在代码发动到浏览器之前进行代码组合,这样只需要请求一个CSS文件。

下面来看看如何使用 @import 将文件分块并导入到一个父文件中:

body {
  padding:0;
  margin:0;
}

body, html {
  width:100%;
  min-height:100%;
}
@import 'normalize';

content {
  max-width:660px;
}

假设 normalize.scss 和 styles.scss 都在同一个文件夹中,可以将一个导入另一个,如上所示。在使用@import时,所有变量、mixin 等都可以全局访问,因为一切都是全局的,所以库必须为其所有成员添加前缀以避免命名冲突。因此不建议使用 @import。

可以使用 @use 来代替,它的基本用法与@import 相同:

@use 'normalize';

content {
  max-width:660px;
}

使用 @use 导入的文件称为模块。要使用这些模块的 mixin 或变量,必须使用命名空间来调用它们。默认情况下,命名空间是文件名(不带扩展名)。

$accent-color: #535353;
@mixin dark-background {
  background-color:#000;
  color:#fff;
}
@use 'src/colors';
body {
  color: colors.$accent-color;
}
.dark-region {
  @include colors.dark-background;
}

还可以使用 as 来使用自定义命名空间:

@use 'src/colors' as c;
body  {
  color: c.$accent-color;
}

当 _ 被添加到 SCSS 文件的文件名前时,解析器知道它是一个部分文件并且它仅用于导入。导入时,_ 部分是可选的。注意,这里使用 src/colors 来导入 src/_colors.scss。

6. 算术运算符

在CSS中可以使用calc()进行数学计算,Sass 支持直接使用+、-、/、*、% 操作符对值和变量进行计算:

$content-width: 600px;
content {
  width:$content-width;
}
.inner-content {
  width: $content-width - 60px; 
}
.outer-content {
  width: $content-width + 60px;
}

7. 流程控制

在 Sass 中有四种类型的流程控制规则:@if /@else、@each、@for 和@while。其中 @if 和 @else 类似于 JavaScript 中的 if 和 else。

@mixin theme($is-dark: false) {
  @if $is-dark {

  }
  @else {
    
  }
}

@each 类似于 JavaScript 中的 for of:

$sizes: 40px, 50px, 80px;
@each $size in $sizes {
  .icon-#{$size} {
    font-size: $size;
    height: $size;
    width: $size;
  }
}

注意:#{$size} 表示法用于使用变量制作动态属性名称和选择器,这称为插值。

@for 类似于 JavaScript 中的 for 循环:

@for $i from 1 through 4 {
  .bubble-#{$i} {
    transition-delay: .3 * $i;
  }
}

@while(不常用)类似于 JavaScript 中的 while 循环。

8. 扩展/继承

有时需要编写一个仅用于扩展的样式规则。在这种情况下,可以使用占位符选择器,它看起来像以 % 而不是 . 开头的类选择器。

%flex {
  display: flex;
}

.some-class {
  height: 50%;
  background-color: black;
}

%flex_with_color {
  @extend %flex;
  @extend .some-class;
}

%button_styles {
  height: 50px;
  width: 200px;
}

div {
  @extend %flex_with_color;

  button {
    @extend %button_styles;
    color: #424242;
    background-color: #d966fb;
  }
}

上面的代码编译成CSS之后将是这样的:

div {
  display: flex;
}

.some-class, div {
  height: 50%;
  background-color: black;
}

div button {
  height: 50px;
  width: 200px;
}

div button {
  color: #424242;
  background-color: #d966fb;
}

9. 媒体查询

在Sass中可以这样来使用媒体查询:

body {
    article {
        p {
            font-size: 100%;
            color: black;
            padding: 10px;

            @media (max-width: 768px) {
                font-size: 150%;
            }
        }
    }
}

编译成的CSS代码如下:

body article p {
  font-size: 100%;
  color: black;
  padding: 10px;
}

@media (max-width: 768px) {
  body article p {
    font-size: 150%;
  }
}

媒体查询是支持嵌套的,并将所有适用的查询与 and 运算符结合起来:

p {
    @media (max-width: 768px) {
        font-size: 150%; 
        @media (orientation: landscape) {
            line-height: 75%; 
        }
    }
}

编译成的CSS代码如下:

@media (max-width: 768px) {
  p {
    font-size: 150%;
  }
}

@media (max-width: 768px) and (orientation: landscape) {
  p {
    line-height: 75%;
  }
}
责任编辑:姜华 来源: 前端充电宝
相关推荐

2022-11-12 12:33:38

CSS预处理器Sass

2023-10-20 10:11:00

Nuxt 3.8前端

2021-09-09 08:47:52

Dependency 安全漏洞工具

2024-03-21 08:21:34

Java 22Java 语言开发工具包

2024-05-24 08:35:00

Angular 18版本更新

2021-10-11 08:21:23

@Valuespringspring框架

2021-02-01 08:16:14

ChromeNode.js

2013-02-18 13:44:22

CSSSASSWeb

2022-03-18 08:16:51

微软Windows 11

2024-04-09 10:10:23

GridCSS网格

2022-06-24 06:32:46

iOS 16Beta 2

2024-03-08 06:58:55

TypeScript类型缩小模块解析

2010-05-10 17:21:26

Unix操作系统

2021-07-15 05:26:22

Windows 10操作系统微软

2020-05-20 13:20:45

KubernetesSpark数据

2021-05-14 05:20:45

Windows10操作系统微软

2022-01-12 14:05:58

Sass代编译器 css

2020-10-28 07:03:11

NodeSassDart Sass

2010-12-30 10:35:42

SOA云计算

2022-02-07 13:34:05

冬奥会黑科技机器人
点赞
收藏

51CTO技术栈公众号