服务器之家
您的位置： 首页 编程语言 css

关于 Sass 文档(scss在线转css)

100人浏览   2024-08-21 08:18:30

基本信息

Sass：（Syntactically Awesome Style Sheets）它是一个强大的工具，它为 CSS 语言提供了一些有用的编程特性，如变量、函数、导入和导出。

Sass 文件具有扩展名 (.scss)，我们以与 CSS 文件类似的方式将它们链接到 HTML 文件。


设置环境

1) 在 VSCode 上安装实时 Sass 编译器扩展

2) 创建一个常规的 HTML 文件

3) 创建一个名为 (styles) 的文件夹，并在其中创建一个名为 (style.scss) 的 Sass 文件

4) 单击 VSCode 屏幕底部的眼睛按钮 (Sass watch)。 它会将您的 Sass (.scss) 文件转换为常规 CSS (.css) 文件并创建一个

5) 现在转到您的 HTML 文件并以常规方式将新的 CSS (style.css) 链接到它。 现在你在 Sass 文件中写的任何东西都会被翻译成 CSS，它会更新 CSS 文件。


重要的：

现在，我们只在 Sass 文件中输入样式，我们不应该更改 CSS 文件中的任何内容。


变量处理

我们可以将属性的值存储在变量中，以便在代码的任何地方使用它们。


创建变量

$primaryColor: rgb(255, 255, 255);

它将创建一个名为 (primaryColor) 的变量并为其提供 RGB 颜色的值，以便我们可以多次使用它


使用变量

background-color: $primaryColor;

它将使用变量的值作为属性的值


嵌套 HTML 属性

我们可以将内部选择器放在父选择器的括号内，而不是键入许多选择器来指定内部元素的样式

老办法：

body{
    background-color: white;
}
body div{
    color: black;
}
body p{
    color: red;
}

新方法：

body{
    background-color: white;
    div {
        color: black;
    }
    p {
        color: red;
    }  
}


将 Sass 文件分成组

我们可以将我们的 Sass 代码分成许多子文件，并将它们链接在一起以组织代码。

1）我们必须创建名称必须以下划线（_）开头的子文件。 因此，在名为 (_header.scss) 的样式文件夹中创建一个新的 Sass 文件，并将您听到的元素的 CSS 代码放入其中

2) 现在回到主 Sass 文件并导入新的子文件

@import "./header";

3）现在这两个文件将合并在一起


构建和调用函数

创建函数

我们使用 (mixin) 关键字在 Sass 中创建一个函数，带或不带参数。

以下函数 (flexCenter) 将使用 (flex) 应用居中过程，并在任何调用它的元素上提供指定的方向。

@mixin flexCenter($dir) {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: $dir;
}


调用函数

我们使用关键字 (include) 来调用函数并传递要应用的参数。 下面的 div 将有一个居中的 flex 显示值和一个列 flex-direction。

div {
    @include flexCenter(column);   
}


继承风格

我们可以通过关键字 (extend) 将所有样式从一个选择器继承到另一个选择器。


定义原始选择器

我们通过类（.box）为元素赋予样式

.box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}


将样式继承到另一个选择器

现在我们可以为 body 元素提供 (.box) 类的所有样式

body {
    @extend .box;
}


覆盖样式

我们可以通过在新选择器中重新分配其值来覆盖继承的样式

body{
    @extend .box;
    flex-direction: column;
}


算术运算

我们可以使用像 + — / * 这样的算术运算和像宽度和高度这样的数值来产生动态响应样式。

main{
    width: 400px - 300px;
}

相关推荐