01 【Sass的安装使用】

news2025/1/23 9:15:00

1.介绍

1.1 CSS预处理技术，及种类介绍

什么是css预处理技术

  • CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。
  • 通俗的说，“CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数（如变量$main-color）等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

css预处理技术的种类

  • Sass（SCSS）
  • LESS
  • Stylus
  • Turbine
  • Swithch CSS
  • CSS Cacheer
  • DT CSS

如此之多的 CSS 预处理器，那么“我应该选择哪种 CSS 预处理器？”也相应成了最近网上的一大热门话题，各大技术论坛也是争论不休。

到目前为止，在众多优秀的 CSS 预处理器语言中就属 Sass、LESS 和 Stylus 最优秀。

1.2 什么是sass

Sass(Syntactically Awesome StyleSheets)是一种CSS预处理器(preprocessor)， 是一款强化 CSS 的辅助工具。可以高效的编写样式，同时实现变量、嵌套、组合、继承等编程语言功能。

css是一门非程序式语言，没有变量、函数、scope(作用域)等概念。

  • CSS需要书写大量看似没有逻辑的代码，冗余度比较高
  • 不方便维护及扩展，难以复用
  • css没有很好的计算能力
  • 非前端工程师往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码

CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者只要使用这种语言进行CSS的编码工作就可以了。

“用一种专门的编程语言，进行 Web 页面样式设计，再通过编译器转化为正常的 CSS 文件，以供项目使用。”

2.关于scss和sass

sass是最早出现的css预处理语言，有着比less更强大的功能。采用Ruby语言编写。

最初版本采用的是严格缩进的风格（不带大括号( {} )和分号( ; )，这一语法也导致一开始，sass并不太为开发者所接受）。

从 V3 版本开始放弃了缩进式的风格，并完全兼容普通的css代码，也因此从第三代开始，sass也被称为scss。

Sass 3 就是 Scss，是Sassy CSS的简写，它是CSS3语法的超集，也就是说所有有效的CSS/CSS3样式也同样适合于Sass。

对现代编程来说，sass就是scss，也因此，sass现在的扩展名为.scss（如果是旧版本的sass，可能扩展名会为.sass）。

3.安装和命令行编译

cmd打开本地命令控制窗口，输入下面字符串然后回车就装好了。

npm install -g sass

编译.scss文件为.css文件：

Sass使用.scss作为文件后缀名，不能直接在< link >标签里使用，需要编译为 .css文件。 演示：

  1. 建一个html文件，随便写个h1标签：

    image-20220823140518434

  2. 建一个.scss后缀的文件，如input.scss，写点基本样式sass的语法：
    image-20220823140550201

  3. 在html文件所在的路径下打开cmd命令控制符，输入：

    //单文件转换命令
sass input.scss:output.css

// 或 sass input.scss output.css

    表示把名字为 input.scss 转换成名字为 ouput.css 的文件。
    回车后，接下来发现就得到了css的文件。

    image-20220823140645814

使用 : 编译输出时，前后不能有空格，即 : 前紧跟输入的scss文件，: 后紧跟输出的css文件。

: 冒号形式的命令，常用于编译文件夹（中的所有sass文件）的输入输出。

​ css文件内容如下，可以看出转换好了：
​ image-20220823140750386
​ 接下来就是老操作了，在HTML里用 < link >标签把css文件引入就行。

  1. 但是不可能说写一句.scss语句就转换一次，太麻烦，所以可以自动转换，当我在.scss里写一句，.css就自动生成一句。在cmd输入以下：

    sass --watch input.scss:ouput.css

    表示监视变化，当input.scss一变化，output.css就变化

空格和冒号对应生成css的两中模式，如果是一对一模式（一个scss生成一个css），使用空格即可；如果是多对多模式，比如一个文件夹生成到另一个文件夹，同时一次性有多个scss文件生成css文件等。

## 编译 light.scss 和 dark.scss 到 light.css 和 dark.css.
> sass light.scss:light.css dark.scss:dark.css

sass  --watch  fileFolder:outputFolder/css

当名字为fileFolder这个文件夹里任意一个.scss后缀的文件变化时，就将其编译到名字outputFolder/css这个文件夹里面（会自动生成相应的.css文件）

4.Sass文件编译快览

4.1 命令行编译配置选项

可以通过 sass -h 或 sass --help 查看详细配置项。

配置选项可以指定编译后的css的排版、是否生成调试map、开启debug等，最常用的是 --style 和 --sourcemap。

4.2 --watch监听文件变化

sass使用--watch选项，用于监听scss文件的变化。这样，当scss文件内容有改动时，会自动编译为css。

  • 监听单个scss文件
sass --watch .\firstsass.scss .\firstsass1.css
  • 监听scss文件夹
sass --watch .\scssdir\ .\cssdir\

sass --watch scssdir:cssdir

可以看到，使用 : 可以指定输出的路径（文件夹），否则css将默认生成在源scss文件所在目录中。

  • 结合 --style 监听
sass --watch app/sass:public/stylesheets --style=compressed

使用压缩（compressed）的样式（style）输出 css 文件

4.3 --style指定css的样式

--style 的css格式有两种：expanded（默认）、compressed。

旧版本的Ruby实现中有四种样式，还有nested、compact。

// 指定编译格式
sass input.scss:output.css --style=expanded

比如，一个scss文件如下：

.box {
  width: 300px;
  height: 400px;
  &-title {
    height: 30px;
    line-height: 30px;
  }
}

下面，可以查看expanded、compressed编译后的css格式。

  1. expanded ：默认值，未压缩的展开的css格式

每个选择器和声明单独一行。

执行如下命令编译：

sass styletest.scss styletest.css --style=expanded

## 或 sass styletest.scss styletest.css

expanded编译过后的样式，是标准的没有经过任何压缩，全部字符展开的css格式：

.box {
  width: 300px;
  height: 400px;
}
.box-title {
  height: 30px;
  line-height: 30px;
}
  1. compressed 去除所有的空白字符，全部css内容压缩为一行

生产环境中推荐的css格式。

执行如下命令编译，将css结果输出在命令行中：

sass --style=compressed styletest.scss

.box{width:300px;height:400px}.box-title{height:30px;line-height:30px}

5.使用VSCode插件编译

5.1 基本使用

live sass compiler是VSCode扩展，可以实时地将SASS / SCSS文件编译/转换为CSS文件。

  • 可以自动添加css兼容性前缀，-webkit-，-moz-，-ms，-o-等。
  • 可以自定义css文件解析后的代码样式（expanded 展开，compact，compressed 压缩，nested）。
  • 可自定义编译/转换后的文件扩展名（.css或.min.css）。

1.在vscode插件里搜索live sass compiler安装。

2.安装后，新建scss文件，在vscode底部状态栏中点击watch sass，此时状态为 Watching ，即可自动解析sass为css文件。

image-20220823173100339

5.2 自定义设置

在使用live sass compiler插件时，并不是所有的默认设置都如我们所愿，那么，我们来看一下如何自定义设置。

1.编译/转换后的文件格式、扩展名、保存位置

  • 文件格式
    格式可以是expanded，compact，compressed或nested。默认值为 expanded。
  • 扩展名
    扩展名可以是.css或.min.css。默认值为.css。
  • 保存位置
    默认的转换后的css文件保存在scss文件的同级目录下，但实际，我们通常需要把所有scss文件保存在scss文件夹，而css文件希望保存在css的文件夹，如图所示：
    image-20220823173159840

​ 我们在配置中如下设置：

"liveSassCompile.settings.formats": [
  {
    "format": "expanded",
    "extensionName": ".css",
    "savePath": "~/../css/"
  }
]

savePath即为导出后的文件保存位置。

2.去掉编译时出现的css.map文件
在每个文件编译后，默认设置下，会同时出现一个map格式的文件，有时并不需要该文件，那么我们如何去掉呢？

"liveSassCompile.settings.generateMap": false,

默认值为true，我们设置为false即可。

3.设置css兼容性前缀
live sass compiler可以在编译时自动添加CSS兼容性前缀（-webkit-，-moz-，-ms，-o-等），如下设置：

"liveSassCompile.settings.autoprefix": [
  "> 1%",
  "last 3 versions"
],

其中，

  • ">1%"是指 通过全球使用情况统计信息选择出的高于1%使用率的浏览器版本。
  • "last 3 versions"是指 每个浏览器的最后3个版本。

这里也可以设置为具体的浏览器，如下：

"liveSassCompile.settings.autoprefix": [
  "ie >= 6",  //ie6以上
  "firefox >= 8",
  "chrome >= 24",
  "Opera>=10"
],

总结

个人配置：

"liveSassCompile.settings.generateMap": true,
"liveSassCompile.settings.autoprefix": [
  "ie >= 6",  //ie6以上
  "firefox >= 8",
  "chrome >= 24",
  "Opera>=10"
],
"liveSassCompile.settings.excludeList": [
  "**/node_modules/**",
  ".vscode/**"
],
"liveSassCompile.settings.formats": [
  {
    "format": "expanded",
    "extensionName": ".css",
    "savePath": "~/../css/"
  },      "liveSassCompile.settings.showOutputWindow": true
]

压缩生成min.css文件
"liveSassCompile.settings.formats": [
    // More Complex
    {
        "format": "compressed",
        "extensionName": ".min.css",
        "savePath": "~/../css/"
    } 
 ]

感觉总体作用不大，还是结合webpack等工具，实时更新页面内容时，实时编译scss，而不需要单独使用该工具。

6.使用webpack编译

在目前主流的前端项目中，一般是使用 Webpack 来构建我们的前端项目，并且大多数都跑在 Node 环境下。

行如下命令安装 sass-loader ：

npm install mini-css-extract-plugin -D
npm install css-loader -D
npm install sass-loader --save-dev

webpack.config.js

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          '[MiniCssExtractPlugin.loader',
          // 将 css 文件整合到 js 文件中
          'css-loader',
          // 编译 sass 文件为 css 文件
          'sass-loader'
        ]
      }
    ]
  },
    plugins: [
    // 提取css成单独文件
    new MiniCssExtractPlugin({
      // 定义输出文件名和目录
      filename: "static/css/[name].css",
    }),
    ]
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/468553.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【Makefile】笔记

【Makefile】笔记

正点原子Linux驱动13.4.1节&#xff0c;通用Makefile疑难点解释 聊聊 SOBJS : $(patsubst %, obj/%, $(SFILENDIR:.S.o)) 的作用 聊聊变量替换语法 在 Makefile 中&#xff0c;变量替换语法可以用来对变量的值进行修改和转换。有以下几种不同的变量替换语法&#xff1a; $(va…
阅读更多...
二分类结局变量Logistic回归临床模型预测（一）——介绍

二分类结局变量Logistic回归临床模型预测（一）——介绍

本节讲的是二分类结局变量的临床模型预测&#xff0c;与之前讲的Cox回归不同&#xff0c;https://lijingxian19961016.blog.csdn.net/article/details/124088364https://lijingxian19961016.blog.csdn.net/article/details/124088364https://lijingxian19961016.blog.csdn.net/…
阅读更多...
C++类与对象this指针

C++类与对象this指针

文章目录 前言一&#xff0c;类1.类的引入2.类的定义3.类的作用域4.类的访问限定符及封装封装访问限定符面试题 二&#xff0c;this指针1.this指针定义2.this指针的特性 前言 从此篇往后&#xff0c;开始了C的类和对象的篇章&#xff0c;嗯就说这么多 一&#xff0c;类 1.类的…
阅读更多...
Microsoft Forms的應用(文行版）

Microsoft Forms的應用(文行版）

Microsoft Forms 功能是發起大眾投票及反饋數據的軟件。 首先要開啟Microsoft Forms 先要取得Microsoft Teams 的應用程式&#xff0c;在下載Microsoft Teams 後&#xff0c;可在最左邊的工具列選擇《應用程式》&#xff0c;然後從中開啟Microsoft Forms 就可以了。 看到Micr…
阅读更多...
Java如何生成随机数？要不要了解一下

Java如何生成随机数？要不要了解一下

目录 前言一、Random类介绍二、Random类生成随机数1.生成随机数2.nextInt()方法 三、使用场景四、官方提示总结 前言 我们在学习 Java 基础时就知道可以生成随机数&#xff0c;可以为我们枯燥的学习增加那么一丢丢的乐趣。本文就来介绍 Java 随机数。 一、Random类介绍 在 Ja…
阅读更多...
C++篇----构造函数和析构函数

C++篇----构造函数和析构函数

在很多时候&#xff0c;当写了初始化&#xff0c;动态开辟的&#xff0c;需要写销毁函数&#xff0c;写了销毁函数之后&#xff0c;但是却忘记了调用这些函数&#xff0c;忘记调用初始化函数还好&#xff0c;编译器会报错&#xff0c;但是如果是忘记调用销毁函数&#xff0c;那…
阅读更多...
社科院与美国杜兰大学金融管理硕士项目——选择在职读研是正确的吗

社科院与美国杜兰大学金融管理硕士项目——选择在职读研是正确的吗

这个世界上&#xff0c;根本没有正确的选择。我们只不过要努力奋斗&#xff0c;使当初的选择变得正确。最近有咨询项目的同学总是在纠结是否要在职读研&#xff0c;在职读研是否是一条正确的路。当我们为此纠结时&#xff0c;其实只有一条路&#xff0c;那就是选择向前走。往前…
阅读更多...
有我和另一个00后卷王后，公司老油条们破防了吗？

有我和另一个00后卷王后，公司老油条们破防了吗？

今年软件测试行业的内卷现象越来越明显&#xff0c;比2022年疫情那会更甚&#xff0c;越来越多的人涌入这个行业&#xff0c;而想要获得更好的待遇和机会&#xff0c;不断提升自己的技能栈成为了测试老油条不得不面对的问题。 不论是哪个级别的测试工程师&#xff0c;面试官都…
阅读更多...
络达开发---- AB1562x左右两侧同一按钮不同功能

络达开发---- AB1562x左右两侧同一按钮不同功能

开发平台&#xff1a;AB1562X SDK版本&#xff1a;V1.5.2 说明&#xff1a;AB1562X支持TWS&#xff0c;左右两个的耳机的按钮在硬件上是芯片的同一个IO口&#xff1b;那如何实现左右按键对应动作&#xff21;&#xff0c;右侧按钮对应动作B呢&#xff1f;即左右两侧同一按钮的…
阅读更多...
【创建一个网页，实现猜数字游戏】

【创建一个网页，实现猜数字游戏】

要求如下 逻辑如下&#xff1a; 一个button按钮第二行中&#xff0c;打印“请…数字” 然后一个 输入文本框 然后一个 按钮第三行 打印 “已经猜的次数” 然后打印 猜的次数结果显示 猜大了 猜小了 猜对了 在script中 获取button按钮、输入的数据、记录count的值&#xff…
阅读更多...
vue3——咸鱼仔

vue3——咸鱼仔

vue3——咸鱼仔 vue3——咸鱼仔P1.前言 【00:45】P2.创建项目 【02:09】P3.代码格式化 【01:37】P4.commit规范 【01:57】P5.强制commit 【02:41】P6.强制代码规范 【01:03】P7.按需导入elementplus 【02:58】P8.vue3.2新特性 【01:42】P9.初始化项目 【02:47】P10.登录页面静态…
阅读更多...
融合开源软件治理经验，助力科技企业规避开源风险

融合开源软件治理经验，助力科技企业规避开源风险

随着开源软件的普及&#xff0c;越来越多的科技企业依赖开源软件实现业务的高速发展&#xff0c;但开源软件存在的安全合规问题&#xff0c;已成为科技企业面临的主要风险之一。 开源网安十年发展&#xff0c;通过为百度、大疆、金蝶等科技企业提供优质的软件安全产品与服务&a…
阅读更多...
【虚幻引擎|UE4】TArray在C++中的使用

【虚幻引擎|UE4】TArray在C++中的使用

简介 TArray 类似于STL的vector&#xff0c;可以自动扩容&#xff0c;因为提供了相关操作函数&#xff0c;所以当作队列、栈、堆来使用也很方便&#xff0c;是UE4中最常用的容器类。其速度快、内存消耗小、安全性高。TArray 类型由两大属性定义&#xff1a;元素类型和可选分配…
阅读更多...
smardaten社区版/专业版发布，查看特性与区别！

smardaten社区版/专业版发布，查看特性与区别！

为满足个人和中小团队开发者需求&#xff0c;近期smardaten正式推出社区版与专业版&#xff0c;其中社区版为免费版本&#xff0c;支持一键下载安装。 值得一提的是&#xff0c;本次社区版和专业版&#xff0c;均支持独立私有部署&#xff0c;并进行商业应用交付。 熟悉smard…
阅读更多...
Linux网络——Shell编程之条件语句—if 、case

Linux网络——Shell编程之条件语句—if 、case

Linux网络——Shell编程之条件语句—if 、case 一、条件测试1.test命令2.文件测试3.整数值比较4.逻辑测试 二、if语句1.单分支结构2.双分支结构3.多分支结构4.实践操作 三、case分支语句1.case多分支结构2.实践操作 一、条件测试 1.test命令 测试表达式是否成立&#xff0c;若…
阅读更多...
信息收集（二）IP信息收集

信息收集（二）IP信息收集

信息收集&#xff08;一&#xff09;域名信息收集 什么是CDN&#xff1f; 内容分发网络&#xff08;CDN&#xff09;&#xff1a; 是指企业利用分布在不同区域的节点服务器群组成流量分配管理平台&#xff0c;为用户提供内容分散存储和高速缓存服务 在渗透测试过程中&#x…
阅读更多...
大数据好学么

大数据好学么

大数据本质上是海量数据。 以往的数据开发&#xff0c;需要一定的Java基础和工作经验&#xff0c;门槛高&#xff0c;入门难。 如果零基础入门数据开发行业的小伙伴&#xff0c;可以从Python语言入手。 Python语言简单易懂&#xff0c;适合零基础入门&#xff0c;在编程语言…
阅读更多...
kafka集群模拟单节点故障

kafka集群模拟单节点故障

这里通过kafka manage来展示节点宕机效果 现在三台主机节点均正常 topic正常识别到三个broker leader也均匀分配到了三个broker上 现在把节点id为0的主机模拟宕机 可以通过以上两张图片看到每个topic现在只识别到了两个broker节点，broker id为0的节点已经被剔除掉了 isr列…
阅读更多...
SpringBoot框架（邮件发送Mail|持久层框架JPA|Extra前后端分离跨域处理|接口管理Swagger）这一篇就够了（超详细）

SpringBoot框架（邮件发送Mail|持久层框架JPA|Extra前后端分离跨域处理|接口管理Swagger）这一篇就够了（超详细）

&#x1f648;作者简介&#xff1a;练习时长两年半的Java up主 &#x1f649;个人主页&#xff1a;老茶icon &#x1f64a; ps:点赞&#x1f44d;是免费的&#xff0c;却可以让写博客的作者开兴好久好久&#x1f60e; &#x1f4da;系列专栏&#xff1a;Java全栈&#xff0c;计…
阅读更多...
【Python表白集】没有哪个女孩子 不喜欢花 不喜欢惊喜：“一束花的仪式感，永远不会过时呢~”（turtle绘图代码）

【Python表白集】没有哪个女孩子 不喜欢花 不喜欢惊喜：“一束花的仪式感，永远不会过时呢~”（turtle绘图代码）

导语 “我想和你在一起虚度时光&#xff0c;坐看云卷云舒&#xff0c;花开花落” 所有文章完整的素材源码都在&#x1f447;&#x1f447; 粉丝白嫖源码福利&#xff0c;请移步至CSDN社区或文末公众hao即可免费。 又快到了一年小长假的时候啦&#xff0c; 单身狗的你们还好嘛…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023