Sass语法---sass的安装和引用

什么是Sass

Sass(英文全称:Syntactically Awesome Stylesheets)

Sass 是一个 CSS 预处理器。

Sass 是 CSS 扩展语言,可以帮助我们减少 CSS 重复的代码,节省开发时间。

Sass 完全兼容所有版本的 CSS。

Sass 扩展了 CSS3,增加了规则、变量、混入、选择器、继承、内置函数等等特性。

Sass 生成良好格式化的 CSS 代码,易于组织和维护。

Sass 文件后缀为 .scss。

为什么使用 Sass?

CSS 本身语法不够强大,代码重复繁琐,无法实现复用,而且在代码也不方便维护,

Sass 引入合理的样式复用机制,增加了规则、变量、混入、选择器、继承、内置函数等等特性。

Sass安装

NPM 安装 

npm install -g sass

9911c3058bf14dd0ad73bbf1244fafff.png

在控制台上输入sass,可以看到如上内容则表示sass安装成功

第一个sass文件

sass兼容所有原css的语法,并在此基础上新增了部分内容

.box{
    width: 100px;
    height: 100px;
    background-color: rgb(255, 227, 117);
}

263ddfd3bd594fbb9ef716244ae79f5b.png

在控制台输入sass style.scss可以将sass代码转换成css代码

da1cbffb5019409090b7a0f6723524bf.png

 在控制台输入sass style.scss style.css可以将sass代码转换成css代码并将css代码存放到style.css文件中,可以看到产生了两个文件.css和.css.map文件

也可以下载Live Sass Compiler插件

6f48f137ca5d47e3aa72f806b6c01acd.png

点击 右下角的watch并保存sass就可以立即生成对应的css文件

引入生成的css后可以看到结果

5720281ef0a244fbb0cf5fd76aaa3f7e.png

相关推荐

  1. SCSS Sass区别?

    2024-05-09 08:22:03       29 阅读
  2. Sass SCSS

    2024-05-09 08:22:03       23 阅读
  3. scss sass是什么?vue环境安装sass报错

    2024-05-09 08:22:03       25 阅读
  4. SASS/SCSS(二)】模块化语法

    2024-05-09 08:22:03       30 阅读
  5. CSS、less、SassScss、Stylus认识

    2024-05-09 08:22:03       43 阅读
  6. Sass 一小部分功能语法

    2024-05-09 08:22:03       70 阅读
  7. reactsass模块化引入

    2024-05-09 08:22:03       63 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-05-09 08:22:03       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-05-09 08:22:03       106 阅读
  3. 在Django里面运行非项目文件

    2024-05-09 08:22:03       87 阅读
  4. Python语言-面向对象

    2024-05-09 08:22:03       96 阅读

热门阅读

  1. matlab实现四种数值积分法运算

    2024-05-09 08:22:03       34 阅读
  2. Oracle中blob和clob的区别和例子

    2024-05-09 08:22:03       36 阅读
  3. 加盟零食店的真是大冤种

    2024-05-09 08:22:03       30 阅读
  4. Debian常用命令

    2024-05-09 08:22:03       39 阅读
  5. TensorFlow 的基本概念和使用场景

    2024-05-09 08:22:03       33 阅读
  6. 20240508金融读报:风控分析拟人化&国际信贷创新

    2024-05-09 08:22:03       33 阅读
  7. C++中的特殊类设计看完秒懂!

    2024-05-09 08:22:03       35 阅读
  8. Kubernetes(k8s)的认证(Authentication)策略解析

    2024-05-09 08:22:03       36 阅读
  9. 链表的原理和实现python

    2024-05-09 08:22:03       34 阅读
  10. 在Linux中,用户的软件一般安装在哪里比较好

    2024-05-09 08:22:03       34 阅读
  11. 【算法】用存入下标的方法来巧解单调队列

    2024-05-09 08:22:03       38 阅读